2026年のレスポンシブ設計は「画面の幅」だけを見る時代から、「コンポーネントが置かれた場所の広さ」を見る時代へと移りつつある。ここでは実務で使えるCSSの新しい基本を、コンテナクエリ・流体タイポグラフィ・可変フォント・サブグリッド・色コントラスト・モーション配慮の6つの切り口でまとめる。
ビューポートから「その場」へ——コンテナクエリという発想転換
これまでのレスポンシブ設計は@mediaによるビューポート幅の判定が中心だった。しかしカードやサイドバーのように、同じコンポーネントが画面のさまざまな幅の場所に置かれる場合、ビューポート基準では「その場所に実際どれだけスペースがあるか」を知ることができない。Smashing Magazineは2026年9月、対応ブラウザが9割を超えているにもかかわらずコンテナクエリの普及がまだ進んでいないと指摘し、「メディアクエリの代わり」ではなく「コンポーネント単位で考えるための別の道具」として使うべきだと論じている。
| 観点 | メディアクエリ | コンテナクエリ |
|---|---|---|
| 判定基準 | ビューポート全体の幅 | 要素が属する親コンテナの幅・高さ |
| 得意な場面 | ページ全体のレイアウト切り替え | 同じカードやウィジェットを異なる場所で再利用 |
| 専用単位 | vw / vh | cqi / cqw / cqb など |
| 注意点 | 特になし | container-type: size指定時は高さの明示が必要（子要素基準の崩壊を防ぐ） |
実装は親要素にcontainer-type: inline-size;を指定し、子要素側で@container (min-width: 400px) { ... }のように書く。サイドバーに置かれた時とメインカラムに置かれた時で、同じカードコンポーネントが自動的に別の見た目になる。
コンテナクエリ×流体タイポグラフィ——clamp()をコンポーネント単位に
見出しサイズを画面幅ではなく「コンポーネントの幅」に応じて滑らかに変化させる手法も広がっている。clamp()とコンテナクエリ単位を組み合わせると、メディアクエリを何本も書かずに済む。
.card-title {
font-size: clamp(1rem, .5rem + 3cqi, 2rem);
}これまでのvwベースの流体タイポグラフィはページ全体の幅に連動するため、狭いカラムに置かれた見出しまで大きくなりすぎる問題があった。cqiを使えば、見出しは「自分が置かれた箱の広さ」だけを見て伸び縮みする。
可変フォントという伸び代——表現・可読性・軽量化を同時に
1つのフォントファイルの中にウェイトや幅、字面の太さなどの軸を連続的に持たせる可変フォント（Variable Fonts）は、複数のウェイトを別ファイルとして読み込む従来方式より軽く、見出しごとに細かなニュアンスを出せる。2026年はGoogle Fontsの可変フォント対応が大きく増え、太字見出しと繊細な本文を1ファイルで両立させるサイトが目立つ。
| 軸（Axis） | できること |
|---|---|
| Weight（wght） | 細字〜極太まで連続的に変化 |
| Width（wdth） | コンデンス〜エキスパンドの幅調整 |
| Slant / Italic | 傾き・イタリックの度合い |
| Optical Size（opsz） | 小さいサイズでも潰れにくい字形に自動最適化 |
可読性の観点では、文字の読みづらさを軽減する設計思想を持つLexendのような可変フォントも選択肢に入る。ウェイトを軽く上げるだけで長文の視認性を上げられるため、アクセシビリティ改善の実装コストが小さいのも利点だ。
サブグリッドでネストしたレイアウトの線を揃える
CSS Gridの入れ子は便利だが、子グリッドは親のガター（余白）やトラック幅を引き継がない、という長年の悩みがあった。grid-template-columns: subgrid;を使うと、子要素が親グリッドの列線をそのまま借用できる。カード内のタイトル・本文・フッターの縦位置を、複数のカードをまたいでぴったり揃えたい場合などに向く。対応状況が整ってきたことで、「ずれない一覧レイアウト」を素のCSSだけで組む選択肢が現実的になった。
見落とされがちな基本——色のコントラストとWCAG 2.2
装飾より地味だが影響が大きいのが色のコントラストだ。WCAG 2.2は通常テキストで最低4.5:1、大きな文字で3:1のコントラスト比を求めている。にもかかわらず、毎年公開されるWebAIM Millionレポートでは、コントラスト不足が最も多いWCAG違反として繰り返し報告されている。
| 組み合わせ例 | 用途の目安 |
|---|---|
| #000000 on #FFFFFF | 最大コントラスト。長文本文に安心して使える |
| #212121 on #FFFFFF | 純黒よりやわらかいが、なお十分な高コントラスト |
| #FFFFFF on #1B1B1B | ダークモードでの高コントラスト組み合わせ |
ブランドカラーを薄いグレーの文字に使いたくなる場面ほど、公開前にコントラストチェッカーで数値を確認する一手間が効く。
モーションは「配慮込み」で設計する——prefers-reduced-motion
スクロール演出やパララックスが増えるほど、前庭疾患や片頭痛を持つユーザーへの配慮が必要になる。prefers-reduced-motionメディア特徴を使うと、OS側で「視差効果を減らす」設定をしている訪問者にだけ、動きを抑えた代替表現を出し分けられる。
@media (prefers-reduced-motion: reduce) {
.hero-animation { animation: none; transition: none; }
}WCAGでは「操作に伴うアニメーション」への配慮として位置づけられており、実装コストは小さい一方で効果は大きい。派手な演出を入れるページほど、このワンブロックを忘れないようにしたい。
主な情報源
- Smashing Magazine: Stop Treating CSS Container Queries Like Traditional Media Queries
- MDN: Using container size and style queries
- MDN: clamp()
- Google Fonts: Variable Fonts
- MDN: Basic concepts of grid layout (Subgrid)
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2
- WebAIM Million
- MDN: prefers-reduced-motion
各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。