【CSS Modules】container省略形プロパティの使い方

containerプロパティは、CSSの新しい機能であるContainer Queries（コンテナクエリ）において、要素をコンテナとして定義するための設定を保持するプロパティです。このプロパティは、要素がコンテナクエリの対象となるコンテナとして機能するための条件を、ショートハンド形式で一括して設定します。従来のメディアクエリがウェブページのビューポート（ブラウザの表示領域）のサイズに基づいてスタイルを適用するのに対し、コンテナクエリは個々の親要素（コンテナ）のサイズに基づいて、その子要素のスタイルを条件付きで適用できる画期的な仕組みです。これにより、ウェブサイトやアプリケーションを構成する各コンポーネントが、配置される場所（親要素のサイズ）に応じて、自身の見た目やレイアウトを柔軟かつ自動的に調整できるようになります。

containerプロパティを設定することで、指定されたHTML要素が、その子要素に対して@container（アットコンテナ）ルールを使ったスタイルを適用するための基準となるコンテナとして機能します。具体的には、このプロパティはcontainer-typeとcontainer-nameという二つの関連するプロパティの値をまとめて設定する役割を持っています。container-typeは、コンテナのどの軸（幅、高さ、または両方）のサイズ変化を監視するかを指定し、container-nameは、複数のコンテナが存在する際に特定のコンテナを識別するための名前を定義します。

このプロパティを活用することで、開発者は、独立して再利用可能なUIコンポーネントをより効率的に作成できます。例えば、同じカードコンポーネントをサイドバーのような狭い領域に配置した際には縦並びのレイアウトに、メインコンテンツのような広い領域に配置した際には横並びのレイアウトに、といった具合に、コンポーネントが自己判断で最適な表示に切り替わるようなレスポンシブデザインを容易に実現できます。これにより、より直感的でメンテナンスしやすいコンポーネントベースのウェブ開発が促進されます。

Copy
1container: <'container-name'> <'container-type'>;

引数なし

引数はありません

戻り値なし

戻り値はありません