概要

CSSのcontainerプロパティは、要素のスタイルをその親要素のサイズや条件に基づいて適用するために使用されます。このプロパティを使うことで、従来のメディアクエリでは実現しにくかった細かなレスポンシブデザインが可能になります。コンテナクエリを活用することで、ページ全体のレイアウトだけでなく、各コンポーネントが置かれたコンテナに応じたスタイル変更を簡単に行えます。

containerプロパティの基本的な使い方

containerプロパティは、要素に対してコンテナとしての役割を設定し、そのサイズや状態に応じて内部の要素のスタイルを変えることができます。コンテナクエリを設定するためには、まずコンテナとして定義する必要があります。

.container {
    container-type: inline-size; /* コンテナの幅に基づいてスタイルを変更 */
}

この例では、.containerクラスがコンテナとして定義され、幅に基づいたスタイルの変更が可能になります。

containerプロパティの値

containerプロパティにはいくつかの設定があり、それぞれが異なる条件でスタイル適用を制御します。以下の主要な値を紹介します。

inline-size

コンテナのインライン方向のサイズ（通常は幅）に基づいてスタイルを適用します。レスポンシブデザインで横幅に応じたレイアウト調整を行いたい場合に使用します。

.container {
    container-type: inline-size;
}

block-size

コンテナのブロック方向のサイズ（通常は高さ）に基づいてスタイルを適用します。コンテナの高さに応じて内部のスタイルを調整したい場合に利用します。

.container {
    container-type: block-size;
}

size

コンテナの幅と高さの両方を基準にスタイルを適用します。レイアウト全体を包括的に制御したい場合に最適です。

.container {
    container-type: size;
}

normal

コンテナとしては設定しませんが、必要に応じてデフォルトの状態に戻すために使用されます。

.container {
    container-type: normal;
}

使用例

コンテナクエリを使ったレスポンシブデザイン

以下の例では、コンテナクエリを使用して、コンテナの幅に基づいて子要素のスタイルを変更します。これにより、各コンテナのサイズに応じたレスポンシブデザインが実現できます。

<div class="container">
    <p>このコンテンツはコンテナの幅に応じてスタイルが変わります。</p>
</div>
<style>
.container {
    container-type: inline-size;
    padding: 20px;
    border: 2px solid #333;
}
/* コンテナの幅が600px以上の場合にスタイルを変更 */
@container (min-width: 600px) {
    .container p {
        font-size: 24px;
        color: blue;
    }
}
</style>

この例では、コンテナの幅が600px以上になると、段落のフォントサイズと色が変わります。従来のメディアクエリではなく、親要素のサイズを基準にスタイルが適用されるため、より細かいレスポンシブ対応が可能です。

高さに基づくレイアウト調整

block-sizeを使用して、コンテナの高さに応じてスタイルを変える例です。コンテンツの量や配置によって見た目を調整したい場合に役立ちます。

<div class="height-container">
    <p>高さに応じてスタイルが変化します。</p>
</div>
<style>
.height-container {
    container-type: block-size;
    padding: 20px;
    border: 2px solid #666;
    height: 150px;
    overflow: hidden;
}
/* コンテナの高さが200px以上の場合にスタイルを変更 */
@container (min-height: 200px) {
    .height-container p {
        font-size: 18px;
        background-color: lightgray;
    }
}
</style>

この例では、コンテナの高さが200px以上になると、段落の背景色とフォントサイズが変更されます。

注意点

  • containerプロパティは、ブラウザのサポート状況によっては一部機能が動作しない場合があります。最新のブラウザ環境での動作確認を行い、必要に応じてフォールバックの対応を考慮しましょう。
  • コンテナクエリを使うと、ページの各コンポーネントが独立してスタイルを持つようになり、より柔軟で再利用性の高いデザインが可能ですが、複雑さが増すこともあるため設計時に注意が必要です。
  • 設定するcontainer-typeや@containerの条件は、意図するスタイルの適用範囲を明確に定義することが重要です。特に複数のコンテナクエリが重なる場合は、意図しないスタイルの適用が起こらないように調整しましょう。

まとめ

containerプロパティは、CSSでのレスポンシブデザインをより柔軟に実現するための強力なツールです。従来のメディアクエリではできなかったコンポーネントレベルでのレスポンシブ調整が可能になり、モダンなウェブデザインにおいて不可欠な存在となりつつあります。コンテナクエリを活用して、親要素のサイズに応じた洗練されたデザインを構築してみましょう。

参照:

`CSS` container | MDN