はじめに
2023年に主要なブラウザで使用できるようになったCSSの新機能、コンテナクエリを今さらながら試してみました。
State of 2023:アワードを見ていると、has()に続き、使っている人が多いことを知り、実際にどんなことができるのか、簡単なデモを作って試してみました。
コンテナクエリとは
コンテナクエリは、これまでの画面サイズ（ビューポート）に応じてスタイルを変えるメディアクエリとは違い、親要素のサイズに応じてスタイルを切り替えられます。
実装方法
カードの親要素（.container）の横幅に応じて、カードのレイアウトが変わります。
横幅が350px未満のときは縦に、350px以上のときは横に並ぶように切り替わります。
イメージ
HTML
<div class="container">
<div class="card">
<img src="https://placehold.jp/300x200.png" alt="画像">
<div class="card-content">
<h3>カードタイトル</h3>
<p>このカードは親の幅(container)によって縦・横に切り替わります。</p>
</div>
</div>
</div>
①親要素にコンテナの指定をする
今回の場合、親要素のcontainerにcontainer-typeプロパティを指定します。
値は、size、inline-size、normalとありますが、横幅を基準にしたいので、inline-sizeを指定します。
| size | 横幅、高さ両方を基準とします |
| normal | 基準値となるので、コンテナクエリは効きません |
②@containerで条件付きスタイルを定義する
@containerのあとに () 内で条件（min-width など）を記述します。
CSS
※装飾のCSSは省略しています
.container {
width: 300px;
min-width: 200px;
max-width: 100%;
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
gap: 1rem;
}
@container (min-width: 350px) {
.card {
flex-direction: row;
align-items: center;
}
}
まとめ
新しい機能ということで難しそうに感じていましたが、実際に試してみるとシンプルでわかりやすい印象でした。特に、Vueコンポーネントのような再利用可能なUIと相性が良さそうだと感じました。
今後のコーディングにも少しずつ取り入れていきたいと思います！
参考サイト
こちらのサイトを参考にさせていただきました。
