コンテナークエリー(@container)は、CSSの新しいアットルールです。従来のメディアクエリー(@media)とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート(ブラウザ幅)を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。 コンテナークエリーを利用することで、再利用性の高いパーツを実装できます。とくに、カラム数が多いレイアウトや複雑な横並びの要素において、コンテナークエリーは有効な機能です。 この記事では、簡単な作例と使用上の注意点を紹介します。 コンテナークエリーの使い方 作例の紹介の前に、コンテナークエリーの使い方を簡単に説明します。 コンテナークエリーを使用するためには、使用したい親の要素にcontainer-typeプロパティを設定する必要があります。以下の2通りの指定ができます。 con
![要素の幅でレスポンシブ対応を行える! コンテナークエリーの使い方 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/d755a176ef5a8c4d11cec0397e4b176f0eb95d2c/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F240617%2Fimages%2Feyecatch.png)