「見た目」の前に「仕組み」を整えるのがWebデザインの基礎です。今回は2026年時点でブラウザ実装が進んだモダンCSSの基礎技術——コンテナクエリ、フルードタイポグラフィ、バリアブルフォント、8ptグリッド、サブグリッド、そしてWCAG 2.2のアクセシビリティ要件——を、実務でそのまま使える形でまとめます。
コンテナクエリ——「画面幅」ではなく「自分の置かれた場所」に反応する
長らくレスポンシブデザインは@mediaによるビューポート幅の分岐が主役でした。しかし同じカードコンポーネントでもサイドバーに置かれるか、メインカラムに置かれるかで最適なレイアウトは変わります。CSS Container Queries（@container）は、要素が「今、自分にどれだけのスペースが与えられているか」を基準にスタイルを切り替えられる仕組みです。
Smashing Magazineの解説記事は「コンテナクエリをメディアクエリの代替として使うな」と強調しています。両者は役割が異なり、大きなレイアウトの組み替え（複数カラム→1カラムなど）は引き続きメディアクエリが担い、コンポーネント単位の見た目調整はコンテナクエリが担う、という住み分けが実務的だとされています。
.card-container { container-type: inline-size; container-name: cards; }
@container cards (min-width: 400px) {
.card { display: grid; grid-template-columns: 120px 1fr; }
}コンテナクエリには専用の単位cqi（コンテナのインライン方向サイズに対する割合）もあり、後述のフルードタイポグラフィと組み合わせることで、コンポーネント自身のサイズに応じて文字サイズが滑らかに変化する表現が可能になります。
clamp()とコンテナクエリ単位で作るフルードタイポグラフィ
ビューポート幅ごとにfont-sizeを刻む代わりに、clamp(最小値, 可変値, 最大値)を使えば1行で「滑らかに拡大縮小しつつ、上限と下限を持つ」文字サイズを定義できます。可変値の部分にvwを使えば画面幅に、cqiを使えばコンポーネント幅に追従します。
| 従来のメディアクエリ | clamp()によるフルード指定 |
|---|---|
複数のブレークポイントごとにfont-sizeを再定義 |
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);の1行で連続的に変化 |
| コンポーネントの親要素の幅は考慮しない | cqiを使えばカードやサイドバーなど、置かれた場所の幅に応じて変化 |
実務上のコツとして、可変値にはremを混ぜておくとユーザーのブラウザ拡大設定を尊重でき、アクセシビリティの観点でも安全です。行の長さ（可読性）を整えるには文字数ベースの単位chでmax-widthを指定するのも定番のテクニックです。
バリアブルフォントで「大胆な見出し」を軽量に実現する
2026年のWebデザイントレンドとして、見出しがヒーロー画像に代わる主役になりつつあります。1本のバリアブルフォントファイルがWeight（太さ）やWidth（幅）など複数の軸を内包しているため、複数のウェイトを別ファイルで読み込むより軽量に、大胆で表情豊かなタイポグラフィを実現できます。スクロール位置に応じてWeightやWidthを動的に変化させる「キネティックタイポグラフィ」表現とも相性が良く、当メディアでも既に作例を取り上げています。
UI用の定番バリアブルフォントとしてはInter、Epilogue、Manropeなどが挙げられ、いずれもGoogle Fontsから無料で利用できます。
8ptグリッドとスペーシングトークンでリズムを揃える
余白の値を毎回「なんとなく」決めていると、サイト全体の統一感が崩れます。定番の解決策が8ptグリッド——余白・パディング・ギャップをすべて8の倍数（8, 16, 24, 32, 40, 48px）に統一する手法です。Material DesignやApple HIGなど主要なデザインシステムもこの考え方を採用しています。
| トークン名の例 | 値 | 主な用途 |
|---|---|---|
| space-xs | 8px | アイコンとテキストの間隔など小さな余白 |
| space-sm | 16px | ボタン内パディング、要素間の標準ギャップ |
| space-md | 24px | カード内の余白 |
| space-lg | 32〜48px | セクション間の余白 |
これをCSSカスタムプロパティ（デザイントークン）としてルートに定義しておけば、Figmaのスペーシング値とコードの値を一致させやすくなり、デザイナーとエンジニアの手戻りも減らせます。細かいUI要素には4pxの半歩幅を許容する「4pt/8ptのハイブリッド」も実務でよく使われます。
サブグリッド(subgrid)で入れ子レイアウトを親に揃える
CSS Gridでカードを並べたとき、カード内部の見出し・本文・ボタンの縦位置を複数カードで完全に揃えたい、という場面は多くあります。CSS Subgridを使うと、子要素のグリッドが親グリッドのトラック定義をそのまま継承できるため、通常の入れ子グリッドでは揃わなかった行・列の基準線をぴったり合わせられます。
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }主要ブラウザでの実装が進み、カードグリッドやフォームのラベル揃えなど、これまでJavaScriptや力技のCSSで対応していたレイアウト崩れの多くをシンプルに解決できるようになっています。
WCAG 2.2で足元を固める
見た目の洗練だけでなく、誰もが使えることも「基礎」の一部です。WCAG 2.2はISO/IEC 40500として国際標準にもなっており、2026年時点でWCAG 2.1からの実務的な移行が進んでいます。デザイン段階で押さえておきたい新しい達成基準は次の通りです。
- フォーカスの視認性：フォーカスされた要素が固定ヘッダーなど他の要素に隠れないようにする。
- ドラッグ操作の代替手段：ドラッグ&ドロップに頼るUIには、クリックやタップだけで完結する代替操作を用意する。
- ターゲットサイズ：タップ可能な要素は原則24×24 CSSピクセル以上を確保する。
- アクセシブルな認証：ログインなどで認知テスト（パズルの解読など）のみに頼らない。
これらはヨーロッパアクセシビリティ法（EAA）や各国のADA関連規制の基準にもなりつつあり、デザインの初期段階でチェックリスト化しておくと手戻りを防げます。
主な情報源
- Smashing Magazine: Stop Treating CSS Container Queries Like Traditional Media Queries
- MDN: Using container size and style queries
- Full Scale: The Best CSS Unit for Responsive Web Design
- Muksalcreative: Variable Fonts: Responsive Typography Trend 2026
- Fireart Studio: Web Design Trends 2026
- Design Overflow: Spacing Scale Calculator（8ptグリッド解説）
- MDN: Basic concepts of grid layout（Subgrid）
- W3C WAI: WCAG 2 Overview
- Cross & Crown: The Complete Guide to WCAG 2.2 for Website Owners
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。