CSS コンテナクエリ (@container) 入門！基本的な使い方を分かりやすく解説

CSS コンテナクエリ（@container）は、ウェブデザインにおけるレイアウトの柔軟性と制御性を大幅に向上させる新しい機能です。従来のメディアクエリでは、ブラウザのウィンドウサイズに基づいてスタイルを適用していましたが、コンテナクエリは特定のコンテナ要素の寸法に基づいてスタイルを変更できます。これにより、より細かい制御が可能になり、複雑なレイアウトでも一貫性と反応性を保つことができます。本記事では、コンテナクエリの基本的な使い方を分かりやすく解説し、その効果的な活用方法を紹介します。

CSS コンテナクエリの基本概念と活用方法

CSS コンテナクエリとは何か

CSS コンテナクエリ（@container）は、CSS コンテナ内の要素に対して、コンテナの寸法や状態に基づいてスタイルを適用する機能です。従来のメディアクエリは、デバイス全体の幅や高さに基づいてスタイルを変更していましたが、コンテナクエリはより細かい粒度でスタイルを制御することができます。コンテナクエリを使用することで、コンテナ内のコンテンツのレイアウトを柔軟に調整することができ、より洗練されたユーザー体験を提供できます。

機能	説明
CSS コンテナクエリ	コンテナの寸法や状態に基づいてスタイルを適用
メディアクエリとの違い	デバイス全体ではなく、特定のコンテナに焦点を当てる
活用場面	コンテナ内のコンテンツのレイアウトを細かく調整

コンテナクエリの文法と基本構文

コンテナクエリは、@container ルールを使用して定義されます。基本的な構文は以下のようになります： css container-type: ; @container (min-width: 300px) { / コンテナの幅が300px以上のときに適用されるスタイル / p { font-size: 18px; } } 上記の例では、コンテナの幅が300px以上のときに、`p` 要素のフォントサイズを18pxに変更しています。コンテナクエリを使用することで、コンテナの状態に応じてスタイルを動的に変更できます。

要素	説明
container-type	コンテナのタイプを指定（例：size, inline-size）
@container	コンテナクエリを開始するキーワード
(min-width: 300px)	コンテナの最小幅を指定

コンテナクエリの実装方法

コンテナクエリを実装するには、まずコンテナ要素に `container-type` プロパティを設定します。このプロパティは、コンテナのタイプを指定します。例えば、`container-type: size;` と設定することで、コンテナの寸法に基づくクエリを使用できます。 css .container { container-type: size; } 次に、@container ルールを使用して、コンテナの寸法に基づくスタイルを定義します。 css @container (min-width: 300px) { .container p { font-size: 18px; } } このように、コンテナクエリを用いて、コンテナの状態に応じたスタイルを適用することができます。

ステップ	説明
1. container-type 設定	コンテナのタイプを指定
2. @container ルール使用	コンテナの寸法に基づくスタイルを定義
3. スタイル適用	コンテナの状態に応じてスタイルを動的に変更

コンテナクエリのブラウザ対応状況

コンテナクエリは、2022年9月にW3Cの候補勧告（Candidate Recommendation）となりました。しかし、すべてのブラウザで完全に対応しているわけではありません。主要ブラウザの対応状況は以下の通りです： - Chrome: 対応（バージョン 94 以降） - Firefox: 対応（バージョン 95 以降） - Safari: 対応（バージョン 15.4 以降） - Edge: 対応（バージョン 94 以降） - Internet Explorer: 非対応 対応していないブラウザでは、コンテナクエリを使用したスタイルが適用されません。そのため、フォールバックのスタイルを用意することが重要です。

ブラウザ	対応バージョン
Chrome	94 以降
Firefox	95 以降
Safari	15.4 以降
Edge	94 以降
Internet Explorer	非対応

コンテナクエリの活用例: レスポンシブデザイン

コンテナクエリは、レスポンシブデザインの実現に非常に役立ちます。例えば、コンテナの幅に応じて画像のサイズや配置を変更することが可能です。 css .container { container-type: inline-size; } @container (min-width: 600px) { .container img { width: 50%; } } @container (max-width: 599px) { .container img { width: 100%; } } この例では、コンテナの幅が600px以上のときには画像の幅を50%に、599px以下のときには100%に設定しています。これにより、コンテナの寸法に応じて画像の表示が最適化されます。

コンテナ幅	画像のスタイル
600px 以上	width: 50%
599px 以下	width: 100%

コンテナクエリの活用例: カードレイアウト

コンテナクエリは、カードレイアウトのデザインにも活用できます。例えば、カードの幅に応じて、カード内のテキストのサイズやマージンを調整することが可能です。 css .card { container-type: inline-size; } @container (min-width: 300px) { .card p { font-size: 16px; margin: 10px; } } @container (max-width: 299px) { .card p { font-size: 14px; margin: 5px; } } この例では、カードの幅が300px以上のときにはテキストのフォントサイズを16pxに、マージンを10pxに設定し、299px以下のときには14pxと5pxに設定しています。これにより、カードの寸法に応じた最適な表示が実現できます。

カード幅	テキストのスタイル
300px 以上	font-size: 16px; margin: 10px;
299px 以下	font-size: 14px; margin: 5px;

よくある疑問

@containerとは何ですか？

@containerは、CSSコンテナクエリで使用される新しい機能で、コンテナ要素の寸法や特性に基づいてスタイルを適用することができます。従来のメディアクエリはブラウザウィンドウ全体の寸法に基づいてスタイルを変更していましたが、@containerは特定の要素内のレイアウトやコンテンツに焦点を当て、より細かい制御が可能になりました。これにより、レスポンシブデザインの柔軟性と効率性が大幅に向上します。

@containerを使用する主な利点は何ですか？

@containerを使用することで、ウェブデザインにおいてより細かいレベルの制御が可能になります。例えば、特定のセクションやコンポーネントがどのように表示されるかを、そのコンテナのサイズや形状に基づいて調整できます。これにより、デバイスや画面サイズに関わらず、コンテンツが一貫性と機能性を保ちつつ、最適な形で表示されます。また、開発者にとっては、CSSのメンテナンスと管理が容易になり、コードの再利用性も向上します。

@containerの基本的な構文はどのように書きますか？

)p.@containerディレクティブを使用する際の基本的な構文は、以下のようになります:

@container container-name (width > 600px) { ... }

ここで、container-nameは事前に設定されたコンテナ名であり、width > 600pxはコンテナの幅が600ピクセルを超える場合にスタイルが適用されます。同様に、heightやaspect-ratioなどの他のプロパティを使用することもできます。

@containerを使った実際の例を教えてください。

例えば、以下のHTMLとCSSのコードを使用して、コンテナクエリの基本的な使用方法を示します:

<div class=container>
<div class=box>Box 1</div>
<div class=box>Box 2</div>
</div>

CSS:

.container {
container-type: inline-size;
container-name: my-container;
}

@container my-container (min-width: 300px) {
.box {
background-color: lightblue;
}
}

この例では、.containerがコンテナとして設定され、その幅が300ピクセルを超える場合に、.box要素の背景色がlightblueに変更されます。これにより、コンテナ内のコンテンツが動的に調整され、より快適なユーザー体験を提供できます。