CSS– tag –

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

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

問題 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});

CSSコード 背景imgのアスペクト比を維持できるレスポンシブ表示。 div{ background-image: url(img.png); background-position: center center; background-size: cover; width: 100%; padding-top: calc((img縦サイズ / img横サイズ) * 100%); } imgは要...