【CSS Modules】@containerアットルールの使い方

@containerオブジェクトは、コンテナクエリを定義するためのルールを表すオブジェクトです。このルールは、従来のメディアクエリがブラウザのビューポート全体に基づいてスタイルを適用するのとは異なり、特定の親要素（「コンテナ」と呼ばれます）のサイズやスタイルといった状態に基づいて、そのコンテナ内部の子要素のスタイルを調整できるようにします。

これにより、WebページのUIコンポーネントは、配置される場所（コンテナ）の利用可能なスペースや特性に応じて、自動的に自身のレイアウトや表示を最適化することが可能になります。例えば、サイドバーに配置されたカードコンポーネントと、メインコンテンツ領域に配置された同じカードコンポーネントが、それぞれ異なる幅のコンテナ内で最適な表示を行うように、独立してスタイルを変化させることができます。

@containerを使用するには、まず、スタイルを適用したい子要素の親要素に対し、container-typeプロパティを設定することで、その要素をコンテナとして定義する必要があります。その後、@container (条件) { ... }という構文を用いて、定義したコンテナの特定の条件（例えば、コンテナの最小幅が400px以上であるなど）が満たされた場合に適用するCSSスタイルを記述します。

この機能は、特にコンポーネント指向のWeb開発において極めて重要です。再利用可能なUIコンポーネントを設計する際に、コンポーネントが自身の内部で完結してレスポンシブな振る舞いを定義できるようになるため、より柔軟で予測しやすいWebデザインを実現します。個々のコンポーネントが自身のコンテナの状況を判断し、独立してスタイルを変化させることができるため、大規模なアプリケーション開発における保守性と拡張性が大幅に向上します。

Copy
1@container (min-width: 768px) {
2  .card {
3    display: grid;
4    grid-template-columns: 1fr 1fr;
5    gap: 1rem;
6  }
7}

引数なし

引数はありません

戻り値なし

戻り値はありません