【CSS Modules】container-typeプロパティの使い方

container-typeプロパティは、CSSのコンテナクエリ機能において、HTML要素が「コンテナ」としてどのように振る舞うかを定義する種類を保持するプロパティです。このプロパティを設定することで、その要素の子孫要素は、コンテナ自身のサイズ（幅や高さ）やスタイル情報に基づいて、自身の表示スタイルを動的に変更できるようになります。

主な設定値としては、normal、size、inline-sizeなどがあります。normalは、その要素がコンテナではない通常の振る舞いをすることを意味します。sizeを設定すると、その要素はブロック方向（垂直方向の高さ）とインライン方向（水平方向の幅）の両方に対するサイズクエリの対象コンテナとして機能します。これにより、コンテナの高さと幅の両方の変化に応じて、子孫要素のスタイルを調整できます。特に、inline-sizeは、要素をインライン方向（主に幅）のサイズクエリのコンテナとして定義する際に使用されます。これは、ウェブページのレイアウトにおいて、コンポーネントが配置される親要素の幅に応じて、その内部の要素のレイアウトを柔軟に調整したい場合に非常に有用です。

このプロパティを活用することで、コンポーネントがどのような親要素の内部に配置されても、自身のサイズを親要素から独立して調整し、最適な表示を保つことが可能になります。これにより、再利用性と保守性の高いUIコンポーネントの作成が促進され、現代のウェブ開発における柔軟なデザイン実現に貢献します。

Copy
1.my-element {
2  container-type: size;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません