2026 年：静的サイト向け CSS コンテナクエリと Safari サインオフ

静的なランディングやデザインシステムのカードを配信するチームは、ビューポートだけを見た @media に何度も裏切られます。全画面では正しく見えても、狭いアサイドや 2 カラムのトラックに入ると崩れる。2026 年、CSS コンテナクエリ（@container）は各コンポーネントが「自分の親ボックス」に応答する手段です。Safari を主なサインオフ対象にするなら、実機の macOS Safari（Chrome だけでは不十分）で検証してください。本稿では @container を選ぶ場面、@media との違い、クラウド Mac ワークフローへの組み込みを整理します。STP と安定版 Safari の記事と併読するとチャネル判断が揃います。

コンポーネント断片とビューポート

従来のレスポンシブは「スマホは狭い・デスクトップは広い」という仮定に依存します。しかし同じ価格カードが 1200px のヒーローと 360px のプレビュー枠に同時に載ると、ビューポート基準のルールが嘘をつきます。コンテナクエリは「親ラッパーが 28rem 未満なら CTA を見出しの下に積む」といったコンポーネント言語で CSS を書けます。

WebKit は flex/grid の端とフォントメトリで Chromium と差が残ります。コンテナクエリはその差を消しませんが、「サイドバーなのにデスクトップ断片が適用される」系のオーバーフローを減らします。Vite 7 と Tailwind v4 を使う場合、外側のグリッドはビューポート、内側のカードは @container と役割分担すると衝突が減ります。

2026 年にそのまま書く構文

親にクエリコンテキストを宣言し、子で条件を書きます。

.card-wrap {
  container-type: inline-size;
  container-name: card;
}
@container card (min-width: 32rem) {
  .card { flex-direction: row; }
}

container-name はネストが深いドキュメントページで特に効きます。container-type: size は高さも条件に使うときだけ。高さを与えずに size だけ付けるとクエリが発火しない、という典型的なつまずきに注意してください。

ユーティリティ中心のコードベースでは、サイドバーとモーダル内コンポーネントから先にコンテナクエリへ移し、ヘッダー/フッターは @media のままにする移行パターンが現実的です。スタイルガイドに「どの Figma フレームがどちらのクエリか」を書いておくと、締切直前にビューポート断片が戻ってくるのを防げます。

Safari の事実とリリース

• Safari 16.0（2022 年 9 月、iOS 16 と Ventura）からサイズ系コンテナクエリが安定版に入り、2026 年の新規案件の互換表に載せてよい水準です。
• cqw など単位の先行検証には STP も使えますが、顧客サインオフは安定版を正とします。
• 純粋な静的ホスティングでは JS polyfill は重いので、古い埋め込み WebView 向けには簡素な 1 列フォールバックの方が現実的です。

README に「最低 Safari バージョン」とフォールバック方針を明記すると、外注先が無意識にビューポートだけへ戻すのを防げます。

判断表：@container と @media

シナリオ	推奨	理由
ルートのフォントサイズとページ余白	@media	読みやすさはビューポートが支配する。
グリッド内で再利用するカード	@container	幅はトラック幅に従う。
印刷	@media print	印刷は別軸。
高さ固定のダッシュボードタイル	@container + size	縦横両方がデザインに入る。
全幅ヒーロー	ハイブリッド	外枠はビューポート、内側プロモはコンテナ。

静的サイトとビルドツール

Eleventy や Hugo の出力 CSS にそのまま @container を書けます。PostCSS 8.4 以降は透過的に通ります。レイアウト評価のコストはコンテナの数に依存し、極端に多いと低価格帯 iPhone で数ミリ秒単位の差が出ますが、一般的なマーケサイトで 20〜40 個の命名コンテナ程度なら M 系 Mac のサンプリングでは誤差レベルです。長いスクロールリストは仮想化を先に検討してください。

アクセシビリティでは、ブレークポイントでレイアウトを変えたあと VoiceOver でフォーカス順を再確認してください。コンテナクエリはキーボードテストを省略する言い訳になりません。

四半期ごとにスタイルガイドをレビューし、新コンポーネントがどのクエリ種別に属するかを更新すると、デザインと実装のズレが蓄積しにくくなります。

レンタル Mac mini での QA

SSH/VNC で macOS に入り、Safari のレスポンシブモードと Web Inspector を使ってコンポーネント領域の幅を変えてください。ブラウザ外枠だけ動かすと誤った安心になります。1440×900 と 390×844 のスクリーン収録を回帰資産にすると差分レビューが速いです。

CI が Chromium のみのとき、クラウド上の実機 Safari が「出荷前の最後の WebKit」になります。Apple Silicon の Mac mini は静音で待機電力も低く、常時検証用ボックスに向きます。

Apple Silicon の Mac mini は、ネイティブ macOS と Safari、色管理をそのまま使えるため、Linux ヘッドレスだけでは拾いにくい CSS の差分確認に適しています。MacHTML では物理 Mac mini を SSH/VNC でレンタルでき、キャンペーン単位で立ち上げて検証後に縮小する弾力運用が可能です。ハードを買い切らずに Safari サインオフ基盤を揃えられます。

FAQ

コンテナクエリはメディアクエリの代替か？

いいえ。ページ全体のタイポやグローバルナビは @media が適しています。同じカードが 320px のサイドバーと 720px のメインに入るときに @container が有効です。

@container に対応した Safari は？

Safari 16.0 以降。Safari 15 をまだ対象にするなら段階的強化で flex 等の簡易レイアウトを併用してください。

container-type は inline-size と size どちら？

多くの静的レイアウトは inline-size で足ります。高さも条件に含めるダッシュボードタイルなどでは size と明示的な高さが必要です。