コンテナクエリ（@container）は、CSSの世界において、レスポンシブデザインの新たな可能性を広げる革新的な仕組みです。
従来、ウェブデザインでレスポンシブ対応を行う際には、画面全体のサイズに応じたスタイル変更を行う「メディアクエリ（@media）」が主流でした。
しかし、コンテナクエリでは、要素自体の親コンテナのサイズを基準にデザインを変えることが可能です。
これにより、より細かいデザイン調整や、再利用可能なモジュール設計が容易になりました。
この新しいアプローチにより、コンテンツの規模や表示環境に左右されることなく、柔軟でメンテナンス性の高いレイアウトを実現できるようになり、特に複雑なデザインを扱うプロジェクトにおいて大きな利点があります。
本記事では、この「コンテナクエリ」を試しながら、どのように使いこなすか、また実際にどのような場面で役立つかを解説していきます。
メディアクエリを使い続けておそらく13~14年くらい？
その実装方法がついに変わる時がきたのか？
コンテナクエリ（@container）とは？
コンテナクエリ（@container）は、CSSにおける新しいセレクタで、特定の「親要素のサイズや状態」に基づいてデザインを調整できる機能です。
従来のメディアクエリ（@media）は、画面全体の幅や高さに基づいてスタイルを変更していましたが、コンテナクエリでは、画面サイズに依存せず、各コンポーネントや親要素のサイズに基づいて、スタイルを動的に変更することが可能です。
たとえば、従来のメディアクエリでは、ブラウザウィンドウの幅が768px以上であれば特定のスタイルを適用するといった形で全体的な調整を行っていました。
しかし、コンテナクエリを使用することで、ウィンドウ全体のサイズではなく、特定の「カード」や「セクション」などの親要素が一定の幅に達したときに、その内部にある要素に対してスタイルを変更することができます。
これにより、複数のコンポーネントで異なるスタイルを適用しやすくなり、再利用性やメンテナンス性が向上します。
具体的には、次のように使用します：
.container {
container-type: inline-size;
}
@container (min-width: 500px) {
.item {
display: flex;
}
}See the Pen Untitled by R (@rkpg) on CodePen.
このように、コンテナの幅に応じてスタイルを動的に変えることができ、モジュールごとに異なるデザイン調整が可能です。
コンテナクエリの実装方法
コンテナクエリを使ったCSSの実装方法は、基本的に2つのステップに分かれます。
1. コンテナの定義
まず、スタイルを変更したい要素の親要素に対して、container-typeプロパティを指定します。
このプロパティは、親要素がコンテナクエリの対象となることを指定し、そのサイズに基づいてスタイルの変化を管理します。
.container {
container-type: inline-size;
}container-typeには、inline-sizeやblock-size、またはその両方を指定することができます。
inline-sizeは親要素の幅、block-sizeは高さを基準にします。
これにより、指定された親要素のサイズに応じて、内部の要素のデザインを調整することが可能になります。
2. コンテナクエリの作成
次に、実際にコンテナクエリを使って、指定したコンテナのサイズに応じてスタイルを変えるためのCSSルールを定義します。
メディアクエリのように、特定の幅や高さに基づいて条件を指定します。
@container (min-width: 500px) {
.item {
display: flex;
}
}この例では、親要素（.container）の幅が500px以上になった場合に、子要素（.item）に対してflexディスプレイが適用されます。
これにより、ウィンドウサイズに関係なく、各コンテナが特定のサイズに達したときにスタイルを変更できます。
3. 実際の例
以下は、親要素が小さいときには1列表示、大きくなったときに2列表示に変更するシンプルな例です。
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
container-type: inline-size;
}
.item {
width: 100%;
}
@container (min-width: 600px) {
.item {
width: 50%;
}
}
</style>ここでは、コンテナの幅が600px以上になった場合、itemクラスの要素の幅を50%にして、2列表示にすることができます。
コンテナクエリを活用することで、メディアクエリに頼ることなく、親要素ごとに異なるスタイルを適用することが可能です。
この新しいCSS機能を活用することで、より柔軟で効率的なレスポンシブデザインを実現でき、メンテナンス性も向上します。
コンテナクエリを活用したユースケース
コンテナクエリは、従来のメディアクエリでは対応しきれない、より柔軟なレイアウト制御を可能にします。
ここでは、コンテナクエリが役立つユースケースをいくつか紹介します。
1. カード型レイアウトの調整
従来のメディアクエリでは、画面全体のサイズに依存してレスポンシブデザインを行うため、画面幅が大きくても特定のコンテナのサイズに合った表示ができないことがありました。
例えば、カード型デザインで、コンテナのサイズに応じて、カードの列数やレイアウトを動的に変更したい場合、コンテナクエリを使うことでこれを解決できます。
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
<style>
.card-container {
display: flex;
gap: 4px;
flex-wrap: wrap;
container-type: inline-size;
width: 100%;
}
.card {
width: 100%;
min-height: 200px;
border: 4px solid pink;
box-sizing: border-box;
}
@container (min-width: 500px) {
.card {
width: calc(50% - 8px);
}
}
@container (min-width: 800px) {
.card {
width: calc(33.33% - 8px);
}
}
</style>See the Pen Untitled by R (@rkpg) on CodePen.
この例では、コンテナの幅が500px以上なら2列表示、800px以上なら3列表示に変更できます。
こうすることで、画面全体のサイズに依存しない柔軟なレイアウトを実現可能です。
2. フォームのフィールドのレイアウト
コンテナクエリは、フォームのレイアウトにも役立ちます。
例えば、特定のフォームの幅に応じて、フォームフィールドを1列から2列に変更する場合、コンテナクエリを使えば、特定のフォームの幅が広くなったときにフィールドの配置を変更できます。
<form class="form-container">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
<input type="email" placeholder="Email">
</form>
<style>
.form-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 通常は3列 */
gap: 1rem;
container-type: inline-size;
}
@container (max-width: 600px) { /* 600px以下のときに1列に */
.form-container {
grid-template-columns: 1fr;
}
}
</style>See the Pen Untitled by R (@rkpg) on CodePen.
このコードでは、フォームが600px以上の幅のときは3列、600以下のときはフィールドが1列に配置されます。
これにより、画面全体ではなく、フォーム自体のサイズに応じてレイアウトを調整できます。
3. サイドバーの自動表示/非表示
コンテナクエリは、レイアウトの一部としてサイドバーを扱う場合にも有効です。
例えば、サイドバーを持つコンテナが一定の幅に達したときに自動的にサイドバーを表示し、幅が狭くなったときに非表示にする、といった動的なレイアウトが可能です。
<div class="layout">
<div class="main-content">Main Content</div>
<div class="sidebar">Sidebar</div>
</div>
<style>
.layout {
display: grid;
grid-template-columns: 1fr;
container-type: inline-size;
}
.sidebar {
display: none;
}
@container (min-width: 700px) {
.layout {
grid-template-columns: 1fr 250px;
}
.sidebar {
display: block;
}
}
</style>この例では、コンテナの幅が700px以上になると、サイドバーが表示され、コンテナが狭くなるとサイドバーが非表示になります。
これにより、レイアウトが画面全体のサイズに依存せず、特定の部分に応じて動的に変わることができます。
4. ギャラリーやカルーセルのレイアウト
ギャラリーやカルーセルのデザインにおいても、コンテナクエリは効果的です。
カルーセルの幅に応じて表示するアイテム数を変更したり、余白を調整したりすることが可能です。
<div class="gallery">
<div class="gallery-item">Item 1</div>
<div class="gallery-item">Item 2</div>
<div class="gallery-item">Item 3</div>
</div>
<style>
.gallery {
display: flex;
gap: 10px;
container-type: inline-size;
}
.gallery-item {
flex: 1 1 100%;
}
@container (min-width: 500px) {
.gallery-item {
flex: 1 1 48%;
}
}
@container (min-width: 800px) {
.gallery-item {
flex: 1 1 30%;
}
}
</style>この例では、ギャラリーの幅に応じて、ギャラリー内のアイテムの幅が変化します。
コンテナクエリを使うことで、カルーセルのサイズに応じたアイテムの調整が可能になり、より動的で柔軟なレイアウトが実現します。
これらのユースケースは、コンテナクエリがいかに強力で柔軟なツールであるかを示しています。
従来のメディアクエリでは制御しづらかった、より細かいレイアウトの調整が可能になり、モジュール単位でデザインを最適化することができます。
コンテナクエリを活用した柔軟なモジュールデザイン
コンテナクエリ（@container）は、モジュール化されたデザインにおいて大きな利便性をもたらします。
従来のメディアクエリは主に画面全体のサイズに依存してスタイルを変更しますが、コンテナクエリはコンポーネントごとのサイズに基づいてデザインを調整できるため、モジュール単位での柔軟なレイアウトが可能になります。
これにより、複数の異なるモジュールが同じ画面上で表示されていても、それぞれが独立したレイアウト調整を行うことができます。
1. レスポンシブなカードレイアウト
コンテナクエリを使えば、カード型のレイアウトを画面サイズではなく、コンテナのサイズに応じて変化させることが可能です。
例えば、ギャラリーや製品リストを構成するカードが、それぞれの親コンテナのサイズに基づいて自動的にレイアウトを変更することで、ページ全体の一貫性を保ちながら、個々のモジュールのレスポンシブ性を向上させます。
.card-container {
display: grid;
grid-template-columns: 1fr;
container-type: inline-size;
}
@container (min-width: 500px) {
.card-container {
grid-template-columns: 1fr 1fr;
}
}
@container (min-width: 800px) {
.card-container {
grid-template-columns: 1fr 1fr 1fr;
}
}この例では、カードのコンテナが500px以上になると2列、800px以上になると3列にレイアウトが変更されます。
コンテナクエリにより、モジュールのレスポンシブ性が大幅に向上します。
2. 複数のコンテナによるレイアウト調整
ページ内の各コンポーネントが異なるコンテナサイズを持つ場合でも、@containerを使うことで、それぞれのサイズに応じた柔軟なレイアウトが可能です。
これにより、複数の独立したモジュールを持つ複雑なページでも、モジュールごとにスタイルを調整しやすくなります。
例えば、サイドバーが表示されているときだけメインコンテンツの幅を変える、といった使い方が可能です。
.main-content {
container-type: inline-size;
}
@container (min-width: 700px) {
.main-content {
padding-left: 250px;
}
}3. フォームのカスタマイズ
コンテナクエリを使えば、フォームの幅や配置もコンテナサイズに応じて変化させることができます。
特に、フォームフィールドが多い場合や、異なるデバイスでの入力体験を向上させたい場合に有効です。
.form {
display: flex;
flex-direction: column;
container-type: inline-size;
}
@container (min-width: 600px) {
.form {
flex-direction: row;
}
}4. ダッシュボードやアプリケーションのコンポーネントレイアウト
ダッシュボードやウェブアプリケーションでは、多数のコンポーネントがそれぞれのサイズに基づいて異なるレイアウトを持つことが求められます。
コンテナクエリを使うことで、メインコンテンツエリアやウィジェット、サイドバーなどの要素を個別に調整することができ、デザインの柔軟性を保ちながらモジュール化されたUIを作ることが可能です。
コンテナクエリは、モジュールデザインにおける新しいアプローチを提供し、メディアクエリだけでは実現できない柔軟なレスポンシブレイアウトを可能にします。
この機能を活用することで、よりスケーラブルで管理しやすいデザインを実現し、さまざまなデバイスや画面サイズに対応したユーザーエクスペリエンスを提供できるようになります。
コンテナクエリを使ったレスポンシブデザインのベストプラクティス
コンテナクエリを活用したレスポンシブデザインは、柔軟性と管理性の両方を向上させるため、プロジェクトに取り入れる際にはいくつかのベストプラクティスを守ることが重要です。以下は、効果的なレスポンシブデザインを実現するためのコンテナクエリを使ったベストプラクティスです。
1. モジュール設計をベースにする
コンテナクエリは、ページ全体ではなく個々のコンポーネント（モジュール）にフォーカスするため、コンポーネントごとの独立性を意識してデザインすることが重要です。
これにより、ページ全体のレスポンシブ性ではなく、コンポーネントがどのサイズでも最適に機能する柔軟性を確保できます。
2. コンテナサイズを基準にレイアウトを調整する
メディアクエリとは異なり、コンテナクエリでは特定の要素のサイズに基づいてレイアウトを調整できます。
たとえば、特定のウィジェットやカードのサイズに応じて、テキストのサイズや余白を調整するなど、各モジュールのサイズに合わせたデザインをすることで、細かい部分までレスポンシブ対応を実現します。
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
padding: 20px;
font-size: 1.2rem;
}
}3. 冗長なスタイルの重複を避ける
コンテナクエリは非常に強力ですが、過度に多くの条件を設定すると、コードが複雑化し、保守が難しくなります。
あらかじめベースとなるスタイルを明確にし、必要な場合にのみコンテナクエリを使用するようにしましょう。
これにより、コードの整理がしやすく、予測可能なデザインが維持されます。
4. グローバルスタイルとの調和を保つ
コンテナクエリを使うことでコンポーネントごとの独立したレスポンシブデザインが可能になりますが、全体のビジュアルコンセプトやブランドガイドラインと一致させるために、全体のスタイルとも調和させることが大切です。
全体のレスポンシブデザインと個別のコンポーネントのスタイルが齟齬を生じないよう、グローバルスタイルとのバランスを意識しましょう。
5. ページパフォーマンスを考慮する
コンテナクエリは、モジュールごとに異なるスタイルを適用できるため便利ですが、あまりに多くのクエリを設定すると、ブラウザのレンダリングに負担がかかる可能性があります。
レスポンシブデザインのパフォーマンスを最適化するため、必要最小限のクエリに絞り、ページのパフォーマンスが低下しないように気を付けましょう。
6. コンテナクエリとメディアクエリの併用
コンテナクエリは特定のコンポーネントにフォーカスするため、ページ全体のレイアウトを調整するメディアクエリと併用することで、レスポンシブデザインの効果を最大限に引き出すことができます。
例えば、コンテナ内のコンテンツがある一定のサイズに達したらスタイルを変える一方で、メディアクエリで画面全体のレイアウトを調整するという使い方が効果的です。
@media (min-width: 800px) {
.main-layout {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
@container (min-width: 500px) {
.card {
padding: 15px;
}
}7. グローバルスタイルとコンポーネントスタイルの分離
プロジェクトが大規模になるほど、スタイルの管理が複雑になります。
コンテナクエリを導入する際は、グローバルなスタイルとコンポーネント固有のスタイルを明確に分けることで、可読性を高め、将来の拡張や保守がしやすいコード構成を保ちましょう。
コンテナクエリを活用すれば、従来のメディアクエリでは実現できなかった柔軟でモジュール化されたレスポンシブデザインが可能になります。
各コンポーネントが独立して最適なレイアウトを持つことで、ユーザー体験を向上させ、メンテナンス性の高いデザインを実現できます。
コンテナクエリのデメリットや制限
コンテナクエリ（@container）は、レスポンシブデザインをより柔軟にする強力なツールですが、いくつかのデメリットや制限も存在します。
これらを理解し、適切な場面で使用することが大切です。
1. ブラウザの互換性
2024年現在、コンテナクエリはモダンブラウザの多くでサポートされるようになりましたが、全てのブラウザで完全に対応しているわけではありません。
特に、古いバージョンのブラウザや特定の環境では、コンテナクエリを利用できないことがあります。
そのため、特定のユーザー層やデバイスをターゲットにしたサイトを作成する際は、必ず対応ブラウザを確認し、必要に応じてフォールバックを用意する必要があります。
2. パフォーマンスへの影響
コンテナクエリは、各コンテナのサイズを監視し、そのサイズに応じてスタイルを動的に適用する機能を持っています。
しかし、この動的な性質が原因で、コンテナ数が多い大規模なサイトや複雑なレイアウトでは、パフォーマンスに影響を及ぼす可能性があります。
特に、多くのクエリを頻繁に使用すると、ブラウザのレンダリングやリフローに負荷がかかり、サイト全体の動作が遅くなることがあります。
3. 実装の複雑さ
コンテナクエリを活用することで、より柔軟なデザインが可能になる反面、CSSの実装が複雑になる可能性があります。
特に、メディアクエリとコンテナクエリを併用する場合、それぞれの条件を適切に管理する必要があり、設計が複雑化することがあります。
CSSの構造を適切に整理し、必要な箇所にのみクエリを適用する工夫が求められます。
4. 既存のメディアクエリとの混在
メディアクエリ（@media）は画面全体のサイズに基づいてスタイルを変更するのに対し、コンテナクエリは特定の要素（コンテナ）のサイズに基づいてスタイルを変更します。
このため、既存のメディアクエリと混在させた場合、どちらの条件が優先されるかをしっかりと考慮しないと、意図しないレイアウトが発生する可能性があります。
5. フォールバックが必要
一部のブラウザではコンテナクエリがサポートされていないため、フォールバックのデザインを準備する必要があります。
コンテナクエリを使わない場合でも、基本的なレイアウトが崩れないように、デザインの余裕を持たせることが重要です。
これにより、ユーザーがどのブラウザを使っていても、最低限のデザインが保持されます。
コンテナクエリを使うことでレスポンシブデザインの柔軟性が向上しますが、ブラウザ互換性やパフォーマンスの問題に注意する必要があります。
適切に導入することで、コンポーネントベースのモジュール設計に非常に役立つツールとなりますが、実装時には注意点を把握して慎重に取り扱いましょう。
コンテナクエリを使いこなすための練習方法
コンテナクエリ（@container）は、柔軟でモジュール化されたレスポンシブデザインを実現するための新しいCSSツールですが、使いこなすには実際のプロジェクトや練習が欠かせません。
以下に、コンテナクエリを効果的にマスターするための練習方法を紹介します。
1. 基本的な実装を試す
まずは小規模なレイアウトからコンテナクエリの基本を学びましょう。簡単なコンポーネント（例えば、カードレイアウトやサイドバーのあるページ）を作成し、それぞれの要素に対してコンテナクエリを適用してみます。
画面サイズに依存するのではなく、コンテナ自体のサイズに基づいてスタイルを変更することで、どのようにデザインが変わるかを確認します。
.container {
@container (min-width: 500px) {
background-color: lightblue;
}
}まずは、基本的なCSSで試し、さまざまなサイズに基づいたレイアウト調整に慣れていきましょう。
2. 実際のWebページを再現してみる
既存のWebページのデザインを参考にしながら、メディアクエリをコンテナクエリに置き換えてみる練習をします。
例えば、ナビゲーションメニューやグリッドレイアウトのリストを作成し、特定のサイズに基づいてレイアウトがどのように変わるかを試してください。元のページと比較して、コンテナクエリがどれだけ効率的で柔軟か確認できます。
3. 様々なレイアウトパターンに挑戦
異なる種類のレイアウトパターンを練習することで、コンテナクエリを使いこなせるようになります。例えば、次のようなレイアウトに挑戦してみましょう：
- カードレイアウト
- フォーム要素の調整
- グリッドシステムの変化
コンテナクエリを適用し、画面サイズではなく、各モジュールのサイズや状態に応じてスタイルを変更する方法を学びましょう。
4. レスポンシブデザインとの併用
メディアクエリとコンテナクエリを組み合わせたレスポンシブデザインの実装を試みます。
これにより、画面サイズの変更だけでなく、要素ごとのサイズ変更にも対応できる、柔軟なデザインを学ぶことができます。
@media (min-width: 768px) {
.container {
display: flex;
}
}
.container {
@container (min-width: 500px) {
flex-direction: column;
}
}5. GitHubやCodePenを使って共有・フィードバックを得る
作成したレイアウトや実装例をGitHubやCodePenなどの共有プラットフォームに公開し、他のクリエイターからフィードバックを得ることで、より効果的な練習ができます。
また、他のデザイナーや開発者のコード例を参考にすることも、コンテナクエリの使い方を理解する上で非常に有効です。
6. 自分のプロジェクトに実装
練習で習得した技術を、実際のWebプロジェクトで試してみましょう。
特に、複数の異なるコンテンツモジュールを持つWebサイトやアプリケーションでは、コンテナクエリが非常に有効です。
実際にプロジェクトで実装してみることで、コンテナクエリの実用性やパフォーマンス面での考慮が深まります。
これらの練習を積み重ねることで、コンテナクエリを効率的に活用し、レスポンシブデザインをよりモジュール化された形で実装できるようになります。
実際のWebプロジェクトやチーム開発でコンテナクエリを導入し、柔軟で再利用性の高いスタイルを目指しましょう。
まとめと次のステップ
コンテナクエリ（@container）は、従来のメディアクエリを補完し、より柔軟でモジュール化されたデザインを実現する新しい機能です。
これにより、レスポンシブデザインが画面サイズだけでなく、要素ごとのサイズや状態に基づいて調整されるため、デザインの一貫性が向上します。
今後、コンテナクエリを使いこなすことで、デザインのメンテナンスが容易になり、さまざまなデバイスやレイアウトに対応できるWebページを効率的に構築できるでしょう。
特に、再利用可能なコンポーネント設計や、デザインの一貫性を保ちながら柔軟に変更できるシステムが必要なプロジェクトでは、非常に強力なツールとなります。
参考資料
コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する
CSS コンテナクエリ（@container）の便利な使い方を解説
【CSS】コンテナクエリについて / メディアクエリとの違い〜文法までを紹介
親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS
