コンテナクエリ単位: cqw cqh
cqw、cqhなどのコンテナクエリ単位を使って、クエリコンテナを基準に要素のサイズを設定します。
「コンテナクエリ単位: cqw cqh」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
コンテナクエリ単位
CSSには、クエリ対象のコンテナの寸法に対する割合で値を決める、コンテナ相対の単位があります。これはビューポート単位（vw/vh）に似ていますが、コンポーネントのコンテナを基準にします。
cqw — コンテナクエリの幅
1cqw = コンテナのインラインサイズの1%（横書きでは幅）。コンポーネントのコンテナに応じてタイポグラフィや余白を拡大・縮小できます。
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — コンテナクエリの高さ
1cqh = コンテナのブロックサイズ（高さ）の1%。container-type: sizeが必要です（inline-sizeだけでは不十分です）。
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — コンテナのインラインサイズ
cqiは横書きではcqwの別名です。特定の方向に依存せず、インライン方向の寸法を指します。
cqb — コンテナのブロックサイズ
cqbはcqhに似ていますが、書字方向にかかわらずブロックサイズを参照します。
cqminとcqmax
cqmin = コンテナの小さい方の寸法の1%。cqmax = 大きい方の寸法の1%。vmin/vmaxに相当します。
<div class="icon-wrapper"><div class="icon"></div></div>
コンポーネント内のフルイドタイポグラフィ
コンテナ単位を使うと、コンポーネント単位で適用範囲を限定した、本当の意味でのフルイドタイポグラフィを実現できます。
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
コンテナ単位を使う場面
次のような場合はコンテナ単位を使用します。
- コンポーネントのテキストを、コンポーネントの幅に応じて拡大・縮小したい場合
- コンポーネント内の余白を、そのサイズに比例させたい場合
- ビューポートに依存しない、コンポーネント単位のフルイドデザインを実現したい場合
コンテナ単位とビューポート単位
重要な違いは、ビューポート単位（vw、vh）がブラウザーのビューポートを基準にするのに対し、コンテナ単位（cqw、cqh）は最も近いクエリコンテナを基準にすることです。そのため、コンポーネントをどこに配置しても利用できます。同じコンポーネントが、幅300pxのサイドバーでも幅900pxのメイン領域でも、比例的に適切な見た目になります。
必須: container-type
コンテナ単位が機能するには、container-typeを持つ祖先要素が必要です。祖先要素がない場合、コンテナクエリ単位は小さいビューポート単位（svw/svh）にフォールバックします。
実践的なパターン
コンテナ単位を使った完全なコンポーネントです。
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
理解度チェック
幅400pxのコンテナ内にあるコンポーネントで、font-size: 5cqwを指定するとどうなりますか。
まとめ
コンテナクエリ単位（cqw、cqh、cqi、cqb、cqmin、cqmax）は、ビューポートではなくクエリコンテナを基準に値を決めます。コンポーネントの幅に応じて拡大・縮小するフルイドタイポグラフィにはcqwを使用します。機能させるにはcontainer-typeを持つ祖先要素が必要で、ない場合はビューポート単位にフォールバックします。
よくある質問
「コンテナクエリ単位: cqw cqh」レッスンは無料ですか？
はい。「コンテナクエリ単位: cqw cqh」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「コンテナクエリ単位: cqw cqh」で何を学びますか？
cqw、cqhなどのコンテナクエリ単位を使って、クエリコンテナを基準に要素のサイズを設定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「コンテナクエリ単位: cqw cqh」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- container-typeとcontainer-name
- @containerルールとブレークポイント
- コンテナクエリ単位: cqw cqh
- コンテナクエリとメディアクエリの違い