CSS/@container

@container

@containerルールは、CSSコンテナクエリを定義するために使用されます。このルールを利用することで、要素が含まれる親コンテナのサイズやスタイルに基づいて、子要素のスタイルを動的に変更できます。これにより、従来のメディアクエリでは難しかった柔軟なレスポンシブデザインを実現できます。

書式

@containerルールの基本的な書式は以下の通りです：

@container [<名前>] [<条件>] {
  <スタイルルール>
}

• <名前>: （オプション）コンテナを特定する名前。
• <条件>: コンテナのクエリ条件（例：width, inline-sizeなど）。
• <スタイルルール>: 条件が満たされた場合に適用されるスタイル。

使用例

以下は、@containerの実際の使用例です：

/* コンテナ定義 */
.container {
  container-type: inline-size;
  container-name: my-container;
}

/* コンテナクエリ */
@container my-container (min-width: 500px) {
  .child {
    font-size: 1.5rem;
    color: blue;
  }
}

@container my-container (max-width: 499px) {
  .child {
    font-size: 1rem;
    color: red;
  }
}

この例では、my-containerという名前のコンテナを定義し、そのサイズに応じて子要素のスタイルを変更しています。

コンテナの種類

コンテナを使用するには、container-typeプロパティを指定する必要があります。以下の値を使用できます：

• inline-size: コンテナのインライン方向（横幅）を基準にします。
• block-size: コンテナのブロック方向（高さ）を基準にします。
• size: 幅と高さの両方を基準にします。

注意事項

• コンテナ定義が必須

  @containerルールを使用する前に、対象の要素でcontainer-typeまたはcontainer-nameを定義する必要があります。

• ブラウザ対応

  コンテナクエリは新しい機能であり、一部の古いブラウザではサポートされていません。最新の対応状況を確認してください。

• ネストされたコンテナ

  コンテナはネストして使用することもできますが、クエリ条件は直接の親コンテナにのみ適用されます。

関連情報

• W3C仕様: コンテナクエリ
• MDN Web Docs - @container
• Can I use: CSS Container Queries

@containerは、より柔軟でコンポーネント指向のデザインを可能にする新しいツールです。特に、複雑なレイアウトや多様な表示条件を扱う際に非常に便利です。