baum8906– Author –

直面した問題 Webサイト制作時に右側に意図せぬ余白が発生。 結論（原因調査手法） 下記コードをCSSに一時的に追加して疑似要素を含むすべての要素に枠線を付与し原因を特定。 *, ::before, ::after { outline: 2px solid blue; } 枠線の色（上記コードで...

問題 tableに設定したborderがブラウザによって太く表示されてしまう問題。 例えばこんな表を作りたい時。 それぞれの行の下側だけ枠線を引くためにtableタグにborder-collapse: collapse;、trタグにborder-bottom: 1px solid #000;を指定。 <style>...

問題 Contact Form 7に自作スタイルを当てていたときに起きた問題。 下図のように意図しない空白が発生。 空白の原因は自動挿入されるpタグやbrタグの模様。 対策 公式に解決方法が載っていた。 wp-config.phpに定数WPCF7_AUTOPの値をfalseにするように追...

やりたいこと 最新の投稿記事には「NEW」のバッチを付けたい。 実装コード 日数計算用のPHPコード。 <?php // 現在の日時と投稿日時を取得 $today = date('Y-m-d H:i:s'); $post_date = get_the_date('Y-m-d H:i:s'); $date_diff = (st...

問題 svgがズレる時がある。 HTMLは<span>で<svg>を囲ってる。 <a class="prev page-numbers"> <div class="pagination-prev-icon"> <span> <svg width="16" height="16" viewB...

長い記事だとページ区切りを使って記事を複数ページに分割したりする。 そのリンクに自作スタイルを当てたい場合について。 該当CSSクラス 基本のクラス名は.post-page-numbers、現在のページは.currentが追加。 上図の例ではこんな感じで自作スタイルを当...

対処法 vertical-align: top; を当てると解決することがある。 原因 リセットCSS等の中に vertical-align: middle; 等が当たっているとそれが原因の可能性がある。

やりたいこと ホバー等でバーが左右対称に展開されるようなアニメーション。 コード transform: translateX(-50%) scaleX(0);とtransform-origin: center;を使う。 .title { position: relative; text-align: center; padding-bottom: 6px; cursor: pointe...

やりたいこと 例えばhタグ（ブロック要素）をこんな感じにしたい時。 hタグを水平センタリング hタグのテキストに対する相対座標で疑似要素を追加 方法（結論） hタグをdivタグ（ブロック要素）で囲う。 hタグを囲っているdivタグにはtext-align: center;...

コード 例えば $header-height-sp: 60px; のように変数定義したものをcalc( )で使いたいときは#{ }で囲えばOK。 height: calc(10px + #{$header-height-sp});