コンテナクエリで部品ごとにレイアウトを変える

このレッスンでは、コンテナクエリを使った部品単位でのレイアウト切り替えを学び、再利用しやすいコンポーネント設計ができるようになることを目標にします。「CSS コンテナクエリ 使い方」で調べている方向けです。

@container(コンテナクエリ)を使うと、画面全体の幅ではなく「その部品(コンテナ)自身の幅」に応じてスタイルを変えられます。同じカード部品を、狭い場所でも広い場所でも見た目良く配置したいときに便利です。

サンプルコードでは、.wrapperにcontainer-type: inline-size;を指定してコンテナとして登録し、@container (min-width: 400px)の中でカードのレイアウトを縦並びから横並びに切り替えています。.wrapperのwidthの値を変えると、切り替わるタイミングが変化することも確認してみましょう。

初心者がよくつまずくのが、コンテナクエリを使うには、まず親要素にcontainer-typeを指定してコンテナとして登録する必要がある点です。この指定を忘れると、@containerのルールが正しく動作しません。

従来のメディアクエリは画面全体の幅しか見られませんでしたが、コンテナクエリは部品単位で判定できるため、同じ部品を色々な場所で再利用しやすくなります。比較的新しいCSSの機能として注目されています。