最近はブラウザのアップデートに伴い、進化したCSSの機能を導入できるようになってきています。今回は以前から記事としてまとめていた、メディアクエリを使わないレスポンシブコーディングをテーマに、新しいCSSの機能であるコンテナクエリを使ってみたいと思います。以前の関連記事については下記にまとめていますので、合わせてご参考ください。 （こちらの記事も合わせてどうぞ） メディアクエリを使わないレスポンシブコーディングを試してみる ＃2：フォントサイズ メディアクエリを使わないレスポンシブコーディングを試してみる ＃1：カラムレイアウト   コンテナクエリとは、親要素の幅に合わせてメディアクエリのようにスタイルを分岐できるものになります。現在一般的なレスポンシブコーディングでは、メディアクエリが用いられることが多く、ビューポートの幅に合わせて切り分けられていましたが、親要素の幅を対象とすることで、コンポーネント間でのスタイル分岐がやりやすくなったり、クエリの重複も避けられるなどのメリットがありそうですね。   ただ、親要素を対象とすることでネストされたHTMLを基準にスタイルを考えるため、メディアクエリより複雑になります。慣れるまではなかなか扱いにくいのかなと個人的には思います。今回はそのコンテナクエリを早速試してみたいと思います。ますは、下記のようにHTMLを用意します。

<section class="contents">
  <div class="container-main">
    <div class="grid-block">
      <div class="item-1">コンテンツ1</div>
      <div class="item-2">コンテンツ2</div>
      <div class="flex-block container-sub">
        <div class="item-3">コンテンツ3</div>
        <div class="item-3">コンテンツ3</div>
        <div class="item-3">コンテンツ3</div>
        <div class="item-3">コンテンツ3</div>
        <div class="item-3">コンテンツ3</div>
        <div class="item-3">コンテンツ3</div>
      </div>
    </div>
  </div>
</section>

  今回はよく見かけるレイアウトを想定し、最大コンテンツ幅を持たせて中央寄せにする前提で、その中でGridやFlexboxを使って複数行・複数列のレイアウトを用意しました。そして下記のCSSを用意します。

// ベース共通スタイル
.contents {
  max-width: 1440px;
  margin: 0 auto;
}
.container-main {
  container: main / inline-size;
}
.container-sub {
  container: sub / inline-size;
  grid-area: container-sub;
}
.grid-block {
  display: grid;
  grid-template-columns: 10% 20% 1fr;
  grid-template-rows: 200px;
  grid-template-areas:
    "item-1 item-2 container-sub";
  gap: 12px;
}
.flex-block {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.item-1 {
  grid-area: item-1;
}
.item-2 {
  grid-area: item-2;
}
.item-3 {
  width: calc((100% - 12px * 5) / 6);
}

  ベースは最大コンテンツ幅が1440pxのレイアウト内にビューポート幅が1281px以上で.container-main内には.container-subの要素を含む合計3カラム、.container-sub内には6カラムが1行内にある横並びを想定したレイアウトからスタート。後述するコンテナクエリを定義するためのプロパティについては後ほど解説しますが、それ以外は比較的シンプルなGridとFlexboxを混ぜたレイアウトになります。このあとのレスポンシブ対応のサンプルではビューポート幅を基準としたメディアクエリで1280px、992px、768px、460pxのブレークポイントで合計5つのレイアウトに切り替えるパターンを例に見ていきます。    

メディアクエリを使ってビューポートの幅を基準にアイテム要素のレイアウトを変更

まずは従来型のレスポンシブコーディングでレイアウトを変更していきます。今回はデスクトップファーストということで、広い画面幅から小さい画面幅に合わせるようにレスポンシブ対応を進めていきます。

@media (max-width: 1280px) {
  .item-3 {
    width: calc((100% - 12px * 2) / 3);
  }
}
@media (max-width: 992px) {
  .grid-block {
    grid-template-columns: 40% 1fr;
    grid-template-rows: 200px auto;
    grid-template-areas:
      "item-1 item-2"
      "item-1 container-sub";
  }
  .item-3 {
    width: calc((100% - 12px * 1) / 2);
  }
}
@media (max-width: 768px) {
  .grid-block {
    grid-template-columns: 100%;
    grid-template-rows: 200px 100px auto;
    grid-template-areas:
      "item-1"
      "item-2"
      "container-sub";
  }
  .item-3 {
    width: calc((100% - 12px * 2) / 3);
  }
}
@media (max-width: 460px) {
  .item-3 {
    width: calc((100% - 12px * 1) / 2);
  }
}

  特に変わったことはせず、シンプルに画面幅に合わせてカラム数を減らしたり、行数を増やしてレイアウトを最適化させていきます。上記のコードのイメージで作成したサンプルはこちらに用意しています。ただ、やはりどうしても長くなる印象はありますね。。メディアクエリでビューポート基準にした場合、画面幅に合わせてもれなく変化させていくため、重複するスタイルが所々見られるのがわかりますね。コンテナクエリを使うことでこういったところをスッキリさせていきます。    

コンテナクエリを使ってみる

コンテナクエリを使うためには、「container-type」プロパティと「container-name」プロパティでコンテナクエリの対象となる要素を定義する必要があります。container-typeプロパティには「inline-size」を指定することでコンテナ要素の幅を基準にします。そして、container-nameプロパティでコンテナクエリ対象の要素を紐付けます。

div {
  container-type: inline-size;
  container-name: main;
}

  container-typeプロパティとcontainer-nameプロパティはこのようにショートハンドが用意されていますので、それを利用するとシンプルになります。

div {
  container: main / inline-size;
}

  今回は入れ子になった2つのコンテナ要素をコンテナクエリの対象として定義するため、下記のようなCSSを追記します。そうすることで、コンテナクエリが使えるようになり、それぞれのコンテナ要素の幅に合わせてスタイルを切り替えられるようになります。コンテナクエリを使う際には専用のclassを付けておくと分かりやすそうですね。

.container-main {
  container: main / inline-size;
}
@container main (max-width: ***px) {}

.container-sub {
  container: sub / inline-size;
}
@container sub (max-width: ***px) {}

   

コンテナクエリを使って親コンテナ要素の幅を基準にアイテム要素のレイアウトを変更

では先ほどメディアクエリを使ってビューポートの幅を基準にレスポンシブ対応していたものを、コンテナクエリを使って親要素の幅を基準に分岐させていきます。こちらも先ほどと同様にデスクトップファーストで進めていくので、広い画面幅のレイアウトから進めていきます。一見混乱しそうな感じですが、基本的にはメディアクエリと同じような感じで、対象となる幅がことな感じでしょうか。慣れないうちはビューポート基準の幅も合わせてコメントとして書いておくとイメージしやすいですね。

@container main (max-width: 944px) { /* viewport max-width 992px相当 */
  .grid-block {
    grid-template-columns: 40% 1fr;
    grid-template-rows: 200px auto;
    grid-template-areas:
      "item-1 item-2"
      "item-1 container-sub";
  }
}
@container main (max-width: 720px) { /* viewport max-width 768px相当 */
  .grid-block {
    grid-template-columns: 100%;
    grid-template-rows: 200px 100px auto;
    grid-template-areas:
      "item-1"
      "item-2"
      "container-sub";
  }
}
@container sub (max-width: 819px) { /* viewport max-width 1280px相当 */
  .item-3 {
    width: calc((100% - 12px * 2) / 3);
  }
}
@container sub (max-width: 538px) { /* viewport max-width 992px相当 */
  .item-3 {
    width: calc((100% - 12px * 1) / 2);
  }
}

  今回は子要素をGridでレイアウトをしているメインのコンテナ要素と、子要素をFlexboxでレイアウトしているサブのコンテナ要素に分けてレイアウトを切り替えていますので、コンテナクエリもそのような形でまとめています。メディアクエリと比べるとかなりスッキリした印象ですね！スタイルの重複がなくなったのが分かりますね。このコンテナクエリで作成したレスポンシブレイアウトのサンプルはこちらに用意しています。    

コンテナクエリを使う際のポイント

1. 対応ブラウザによっては必要に応じてポリフィルの導入を この記事を書いている時点ではまだ全てのモダンブラウザに対応しているわけではなく、レガシーブラウザ含め一部ブラウザではコンテナクエリを使うことができません。ただその対象となるブラウザのシェアはかなり低く、ポリフィルも登場してきているので、実務でも取り入れられる機会は多いのではないでしょうか。 【container-query-polyfill】 https://github.com/GoogleChromeLabs/container-query-polyfill   2. コンテナクエリの対象となる要素にpaddingやborderが付与されている場合には注意 これは少しハマったのですが、コンテナクエリでは対象となるコンテナ要素の幅を基準に分岐させますが、その幅はpaddingやborderを除いたコンテンツ領域の幅が対象となります。paddingなどを含めた幅でクエリを設定してしまうと目的の幅でレイアウトが切り替わらなくなるので注意が必要です。   3. コンテナクエリで使える単位 コンテナクエリと合わせて活用したいのが、コンテナベースの単位です。ビューポートでは「vw」や「vh」といった単位がありましたが、コンテナを基準にした相対的な単位を使うことでよりフレキシブルな対応がスマートに実現できます。  

cqw	クエリの対象となるコンテナ要素の幅の100分の1、つまり100cqwでコンテナ要素の幅と同じになります。
cqh	クエリの対象となるコンテナ要素の高さの100分の1、つまり100cqhでコンテナ要素の高さと同じになります。
cqi	クエリの対象となるコンテナ要素のインラインサイズの100分の1
cqb	クエリの対象となるコンテナ要素のブロックサイズの100分の1
cqmin	cqiとcqbを比較して小さい方の値
cqmax	cqiとcqbを比較して大きい方の値

  まだ慣れない単位ばかりですが、、cqwなどは幅指定の際にpxや%よりも直感的に扱えそうですね。   4. コンテナクエリの対象となるコンテナ要素は親要素 コンテナクエリを使い慣れないうちは混乱しそうですが、コンテナクエリで要素の幅に合わせて分岐させることができる対象は親要素になります。祖先要素や自要素の場合には機能しないので間違えないように注意します。特にGridとFlexboxの場合ではカラム幅などレイアウトに影響する指定が自要素か子要素かの違いもあるので重要ですね。  

---

  今回はメディアクエリの代わりにコンテナクエリを使ったレスポンシブコーディングについてまとめてみました。フロントエンド開発や複数人での制作フローではコンポーネント単位でのコーディングが増えてきており、そんな時のスタイル指定方法としてはとても相性が良さそうですね。また肥大化するCSSコードの要因としてメディアクエリの影響も大きいので、そういった問題の解消にもつながるのかなと期待したいですね！   （参考にさせていただいたサイト） CSS Container Queries