すべての開発者が知っておくべきモダンCSSテクニック

CSSは劇的に進化しました。モダンな機能により、これまで複雑だったレイアウトが簡単に実現できるようになっています。

CSS Grid：レイアウトの革命

Gridは複雑なレイアウトをシンプルにします。

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Gridの機能

• fr単位: 柔軟な比率指定
• auto-fit / auto-fill: メディアクエリなしでレスポンシブに
• grid-template-areas: レイアウトを視覚的に定義

コンテナクエリ

ビューポートではなく、コンテナのサイズに基づいてスタイルを適用します。

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

CSSカスタムプロパティ

カスケードし、動的に操作できる変数です。

:root {
  --primary: hsl(220 90% 56%);
  --spacing: clamp(1rem, 3vw, 2rem);
}

モダンなセレクタ

:has() - 親セレクタ

.card:has(img) { padding: 0; }

:is() と :where()

:is(h1, h2, h3):hover { color: var(--primary); }

スクロール駆動アニメーション

スクロール位置に基づいてアニメーションさせます。

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: reveal linear;
  animation-timeline: view();
}

論理プロパティ

書字方向に依存しないCSSを書きましょう。

• margin-left/right の代わりに margin-inline
• padding-top/bottom の代わりに padding-block

カラースペース

モダンなカラー関数です。

• oklch() - 知覚的に均一
• color-mix() - 色を手軽にブレンド

導入のヒント

1. @supports で機能検出を行う
2. 古いブラウザ向けにフォールバックを用意する
3. プログレッシブエンハンスメントのアプローチをとる

まとめ

モダンCSSは強力です。これらの機能を取り入れて、よりクリーンでメンテナンスしやすいスタイルを書きましょう。