[CSS] コンテナクエリ学習

レスポンシブデザインは、メディアクエリだけ理解していればいいと思い込んでいたある時、「コンテナクエリの方が便利」という事を耳にした。 なんじゃそれ、知らないぞ！ 知らないことは調べればいいし、実際にいじってみれば、すぐに理解できるだろう。 ということで、便利と聞いたコンテナクエリについて調べてみました。 同じくコンテナクエリを知らないWebコーダーの人は、このブログを見て、理解して、スキルアップしましょう！

コンテナクエリとは？

調べてみたところ、次のような特性がありました。

・要素の親のサイズに応じてスタイルを切り替える仕組み。 ・従来のメディアクエリ（画面幅依存）では難しかった、コンポーネント単位のレスポンシブが可能になる。

同じコンポーネントを、狭い領域にも広い領域にも配置したい時、画面サイズだけでは判断できないため画面サイズのメディアクエリではなく、要素サイズのコンテナクエリが便利に使えるという事。 UIパーツの再利用性が大幅に上がるので、内容を理解して使いこなせるようになることで、柔軟なWebページ構築ができるようになります。

設置手順

HTML

次のHTMLをベースに、CSSのコンテナクエリをセットする手順を解説します。 <div class="card-container"> <div class="card"> <img src="https://placehold.co/120x120" alt=""> <div class="text"> <h3>タイトル</h3> <p>このカードは、親の幅が広くなると横並びになります。</p> </div> </div> </div>

1. 親要素にコンテナ指定をセットする

.card-container { container-type: inline-size; }

container-type: inline-size → 横幅だけを見る container-type: size → 縦横どちらも見る

2. 子要素にコンテナクエリを書く

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

サンプルコード

カードが狭い時は縦並び、広くなったら横並びパターン

HTML <div class="card-wrap"> <div class="card"> <img src="https://placehold.co/100x100" alt="img"> <div class="content"> <h3>タイトル</h3> <p>説明テキストが入ります。</p> </div> </div> </div> CSS .card-wrap { display: flex; flex-direction: column; container-type: inline-size; } @container (min-width: 500px) { .card-wrap { flex-direction: row; } }

タイトルを大きくしたり段組みを変える

HTML <div class="component-area"> <h2>コンテナクエリのタイトル</h2> <p>幅が広がるとタイトルが大きくなります。</p> </div> CSS @container (min-width: 600px) { h2 { font-size: 2rem; } }

コンテナ名のセット

.sidebar { container-type: size; container-name: sidebarArea; } @container sidebarArea (max-width: 300px) { .menu { display: none; } }

メリットまとめ

・コンポーネントごとにレスポンシブを完結できる ・画面サイズに依存しない柔軟な UI 開発が可能 ・再利用性が高いデザインシステムに向いている

ブラウザ対応

いつものように、IEはもはやオワコンなので無視していいとして、GoogleChromeで ver.106 以上ということなので、調べてみると「Android 6.0 Marshmallow」から使えるようです。 ちなみに、Safariは、ver.16.0 とのことで、こちらも調べてみると、iOS16以上でiPhone14が初期搭載の端末です。ちなみに、iPhone8または、iPhoneSE（第2世代）以降であれば、最新版にOSアップデートをするとiOS16までアップデートできるようです。

あとがき

画面全体のサイズで特定するメディアクエリと違って、それぞれの親要素のサイズで区別することができるコンテナクエリは、PCなどの横幅が広いけど数カラム構成の時の動的サイズ切り替えなどの場合に役立ちそうです。 スマホサイトの場合は、単一カラムの縦スクロールのみなので、メディアクエリの方がシンプルでいいかもですね。 でも、レスポンシブデザインの場合は、画面がガラッと変わった時に、親要素の状態を監視して適切に切り替えることができるので、コンテナクエリはかなり柔軟な対応ができることがわかりました。 今後のCSS制作活動の足しになることは間違い無いですね。