0Pricing
CSS Academy · レッスン

@containerルールとブレークポイント

コンテナが特定のサイズに達したときにスタイルを適用する@containerルールを記述します。

「@containerルールとブレークポイント」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

@containerルールの構文

@containerは、コンテナが特定のサイズ条件を満たしたときにスタイルを適用するアットルールです。構文はメディアクエリと同様です。

<div class="wrapper"><div class="box">Styled once container &ge; 400px wide</div></div>

名前付きコンテナクエリ

特定の名前付きコンテナを対象にします。

<div class="sidebar">
  <div class="nav-item">Dashboard</div>
  <div class="nav-item">Settings</div>
</div>

最大幅のコンテナクエリ

max-widthを使用して、より小さいコンテナ向けのスタイルを適用します。

<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>

範囲指定コンテナクエリ

最新のコンテナクエリ構文では、範囲を指定できます。

<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>

適応型カードコンポーネント

コンテナの幅に応じて適応するカードコンポーネントです。

<div class="card-wrapper">
  <div class="card">
    <div class="card__image"></div>
    <div class="card__body">Adaptive card content</div>
  </div>
</div>

ネストしたコンテナクエリ

コンテナクエリはネストできます。内側のクエリは、デフォルトで最も近いコンテナ祖先を参照します。

<div class="outer">
  <div class="inner">
    <div class="content">Nested container-aware content</div>
  </div>
</div>

コンテナクエリのブレークポイント

ビューポートのブレークポイントとは異なり、コンテナのブレークポイントは任意のデバイスサイズではなく、コンポーネントのレイアウトを変更する必要が生じるタイミングに基づいて選びます。まず、コンポーネントのコンテンツ幅の最小値と最大値を基準にします。

コンテナ内のタイポグラフィ

小さいコンテナ向けにタイポグラフィを調整します。

<div class="wrapper">
  <h3 class="card-title">Adaptive Heading</h3>
  <p class="card-text">Body copy that hides on very narrow containers.</p>
</div>

グリッドレイアウト用のコンテナクエリ

コンテナのブレークポイントで、コンポーネント内部のグリッドを変更します。

<div class="widget">
  <div class="widget-grid">
    <div>Tile 1</div>
    <div>Tile 2</div>
  </div>
</div>

スタイルクエリ（サイズ以外）

コンテナクエリは、計算済みのカスタムプロパティ値を確認するスタイルクエリにも対応しています。これにより、追加のクラスを使わず、CSS変数によってコンポーネントのバリエーションを切り替えられます。

<div class="wrapper"><div class="card">Featured card styled via style query</div></div>

理解度チェック

@container (min-width: 500px)は何を対象にしますか。

まとめ

@containerルールは、コンテナがサイズ条件を満たしたときに、コンテナ内の要素へスタイルを適用します。特定の祖先を対象にするには、名前付きコンテナを使用します。コンテナのブレークポイントはデバイスサイズではなく、コンテンツの要件に基づいて設定します。スタイルクエリを使うとCSS変数の値も確認できるため、宣言的なコンポーネントバリエーションを柔軟に実現できます。

よくある質問

「@containerルールとブレークポイント」レッスンは無料ですか？

はい。「@containerルールとブレークポイント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「@containerルールとブレークポイント」で何を学びますか？

コンテナが特定のサイズに達したときにスタイルを適用する@containerルールを記述します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「@containerルールとブレークポイント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. container-typeとcontainer-name
  2. @containerルールとブレークポイント
  3. コンテナクエリ単位: cqw cqh
  4. コンテナクエリとメディアクエリの違い
← CSS Academyに戻る