CSSでコンテナ幅に応じて文字サイズを変える方法

コンテナクエリとcqwを使って、要素の幅に応じた文字サイズ調整をする

Web制作において、文字サイズの調整はデザインの印象やユーザー体験に大きく影響します。
従来は画面幅に応じた調整としてvwやメディアクエリを使った文字サイズ調整が一般的です。
しかし、画面全体の幅ではなく、特定のコンテナに合わせて文字サイズを変えたい場面も少なくありません。
また、vwでは画面全体が基準になって、思うようにならなかったり、%も基準が変わるから扱いづらいと感じる場面もあります。

そんなニーズに応えるのが、CSSのコンテナクエリと、それを活用して親要素の幅に応じて文字サイズを変化させるcqw単位です。
文字を配置する親要素をコンテナとして定義しておくことで、そのコンテナ幅を基準にして値を指定できるようになります。

コンテナクエリとは

コンテナクエリは、親要素のサイズに応じて子要素のスタイルを変更できる仕組みです。
従来のメディアクエリは画面幅（viewport）に依存するため、親コンテナの幅が変化しても子要素のスタイルは追従しませんでした。
これに対してコンテナクエリを使うと、親要素の幅に応じて子要素の文字サイズやレイアウトを柔軟に変更できます。

実装方法について

まず、CSSを見てみましょう。

.container {
    container-type: inline-size;
}
.text{
    font-size: 5cqw;
}

親要素の横幅（inline-size）を基準としたコンテナクエリが利用可能になり、子要素のスタイルにcqw（container query width）が利用できるようになります。

5cqwは、コンテンツ幅に対して、5%のサイズを示しています。
例えば、親要素の横幅が500pxの場合、25px（500px × 5% = 25px）の文字サイズになります。
親要素の横幅が50%などで指定されている場合、配置しているコンテンツが比率を保ったまま縮小・拡大される仕組みです。

これによって、特定の画面幅になった時にサイズを調整する作業を減らすことができます。
ボタンなどに配置する文字をcqwで設定するなど、柔軟に対応できるようになります。

注意：親要素の幅が未設定だと動作しない

親要素の幅が、width:auto;などでコンテンツに依存している場合、横幅が変動してしまい、文字サイズが安定しません。
cqwを利用する際は、親要素の横幅を明確に設定しましょう。

このような場合には、親要素にmin-widthやmax-widthを活用したり、calc()といった関数を利用して、レスポンシブな幅指定をします。

応用例・注意点

複雑なレイアウトでの活用

タイトルと本文で、別々に文字サイズを調整する場合、

.text{
    font-size: 5cqw;
}
.title{
    font-size: 120%;
}

このように、cqwで親幅に応じた基本サイズを決めつつ、%やremで個別調整すると、タイトルのサイズ感も容易に調整できます。
素直にすべての要素にfont-size: cqw;を設定して、それぞれを制御してももちろんOKです。

cqwは便利ですが、全ての文字サイズをcqwに頼るのではなく、emやrem、vw、%と組み合わせたり、使い分けることで、より柔軟なレスポンシブデザインが可能です。

ブラウザ対応状況

コンテナクエリとcqwは比較的新しいCSS仕様のため、ブラウザ対応状況を確認することが重要です。
2025年11月現在では、主要ブラウザでサポートされていますが、古いブラウザでの閲覧にはどうしても対応が難しい場面が出てきます。
もし古いブラウザを想定したWebサイト制作が必要な場合は、メディアクエリやvw単位を組み合わせて対応しましょう。

まとめ・実務での活用のヒント

コンテナクエリとcqwを使うことで、特定のコンテナに合わせた文字サイズの調整ができます。
これによって、画面幅に応じてブレイクポイントごとにスタイルを調整する手間も減らすことができます。
UX改善につながるだけでなく、実務での作業効率も向上するので、ぜひ活用してみてください。