a-little-log

CSSで「たまに使うけど、使い方はどうだったっけ」と毎回うろ覚えになってしまうようなプロパティ、ありませんか。私にはあります。毎回調べるのも効率が悪いので、この記事ではそんな「つい何度も検索してしまうCSSプロパティたち」を自分用の備忘録としてまとめておきます。

grid関連

※デモページをご用意いたしました。

subgrid

subgrid は親のグリッド定義を子要素にも継承させたいときに使います。
主にカード型アイテムの中身を、グリッド状に並べて綺麗に配置し、全体のレイアウトを整えたいときに利用します。ですが、grid-template-rowsだけでなく、grid-template-columnsに対しても subgridを使えます。

<ul class="grid parent">
  <li class="child">
    <h5>タイトル</h5>
    <p>テキストが入ります。</p>
    <div class="btn">btn</div>
  </li>
  <li class="child">
    <h5>タイトル</h5>
    <div class="btn">btn</div>
  </li>
  <li class="child">
    <h5>タイトル</h5>
    <p>テキストが入ります。</p>
    <div class="btn">btn</div>
  </li>
</ul>

ここでポイントとなるのが grid-template-rows: subgrid。これにより、.child要素は .parentの3列グリッド構造をそのまま引き継ぎます。

.parent {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  .child {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  h5 {
    padding: 4px 6px;
    font-weight: bold;
    background-color: gray;
  }
  .btn {
    padding: 2px 5px;
    border: 1px solid #333;
    border-radius: 2px;
    text-align: center;
    grid-row: -1;
  }
}

auto-fillとauto-fit

auto-fillとauto-fitは、grid-template-columnsの中でrepeat()と組み合わせて使うことで、可変幅のグリッドレイアウトを実現する便利な仕組みです。親要素の幅に応じて、何列作るかを自動で計算してくれます。
つまり、どちらも親要素の横幅に収まらなくなったタイミングで列が折り返します（wrapされます）。

コード例

両方とも書き方はほぼ同じです。例えばminmax(100px, 1fr)は最小100px、最大は自動的に伸びる列を作る、ということです。どちらも横幅 ÷ 100px が整数で割り切れなくなったときに折り返します。

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

共通

• repeat()関数の中で使う。
• minmax() を組み合わせると、最小サイズと最大サイズを指定できる。

違い

auto-fillは親要素の幅に対して、minmaxの最小幅を満たせるだけ、グリッドトラック（列）を確保しようとします。
例えば、要素が5つ、親要素の幅が700pxで、minmax(100px, 1fr) を指定している場合、7列分のスペースが確保されます。このとき auto-fillでは、5つの要素 + 空の列2つという状態になります（空トラックができる）。
一方 auto-fitの場合、実際に存在する5つの要素だけが表示され、それぞれがスペースを等分して埋めるため、空白は生まれません。

auto-fill

• 最小幅に収まるだけのトラックを確保 する
• 要素が足りないと「空のトラック」ができる

auto-fit

• 実際の要素だけを表示（埋める）

特性	auto-fill	auto-fit
列の確保	親要素の幅に応じて最大数確保	実際の要素数に応じて確保
空のトラック	表示される（幅あり）	非表示（幅0）
見た目の余白	空トラックが余白として見える	余白なし。要素が詰まる

デモページで画面幅を変更してみると、トラックの空き具合や詰まり具合の違いがよくわかります。
特に空きトラックの有無に注目してみてください。

fillterとbackdrop-filter

※こちらもデモページをご用意いたしました。

backdrop-filter

backdrop-filterは、要素の背後（＝背景）にあるものに対してフィルター効果をかけるプロパティです。特にガラスのようなぼかし（blur）をよく利用します。

fillterとの違い

	filter	backdrop-filter
適用対象	要素そのもの	要素の背後の背景
主な用途	画像やアイコンを加工	半透明UIの背景加工
効果	要素がぼける	背景がぼける

コード例

.blur-bg {
  backdrop-filter: blur(10px);
}

【fillter】drop-shadow

drop-shadowは、要素の形に沿った影をつけるプロパティです。box-shadowと混同してしまいそうになりますが、これはfilterの一種です。
特に画像やSVGなどに自然な影をつけたいときに便利です。box-shadowと違い、画像の透過部分を除いた形に沿って影が出ます。

img {
  filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.3));
}

counter-increment

counter-incrementは、カスタムカウンターに数字を加算していくためのプロパティです。記事の番号付けなどでよく使います。counter-resetで初期化し、::beforeとcontentプロパティを使って表示します。
リストタグ（<ol>など）を使わずに、スタイルだけで連番をつけたいときに便利です。

<ul class="custom-list">
  <li>りんご</li>
  <li>ばなな</li>
  <li>みかん</li>
</ul>

.custom-list {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
}
.custom-list li::before {
  counter-increment: item;
  content: counter(item) ". ";
  font-weight: bold;
}

まとめ

何度も調べてしまうということは、まだ完全に理解しきれていないというサインです。
仕様をしっかり把握し、自分の言葉で整理することはスキルアップや作業効率の向上につながります。
今後も、同じように「迷いがちなCSS」についてはこの記事を随時更新していく予定です。