「State of CSS 2026」(回答者4,902人)を見ていて、これまでの2本(Anchor Positioning・selectのカスタマイズ)とは逆のパターンの数字を見つけました。コンテナクエリです。
コンテナクエリは、Chrome・Safari・Firefoxの主要ブラウザに2023年末までに全部揃っていました。もう2年以上前の話です。なのに調査では、一度でも使ったことがある人は41%。もっと進んだ機能(style queries)になると7%、scroll-state queriesは1%未満でした。
ブラウザ対応の壁で止まっていた前の2本と違って、今回は「使える状態はとっくに整っているのに、現場がついていっていない」というパターンです。同じ「新しい機能」の話でも、足踏みの原因が毎回違うのが、このシリーズを続けていて面白いところです。
💡 Tips: コンテナクエリって何?
今までの@media(メディアクエリ)は、画面全体の幅を見てスタイルを切り替える仕組みでした。コンテナクエリ(@container)は、画面全体ではなく親要素(コンテナ)自身の幅を基準にスタイルを切り替えられます。同じカードコンポーネントでも、置かれる場所の幅次第で見た目を自動的に変えられる、という違いです。
.card-wrapper {
container-type: inline-size;
}
.card {
display: block;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}書き方自体はメディアクエリとほとんど変わりません。親要素にcontainer-typeを指定しておくだけで、その内側の@containerは画面幅ではなくその親要素の実際の幅を見て判定してくれます。サイドバーに置いたら1カラム、メインエリアの広い場所に置いたら横並び、といった出し分けが、同じマークアップ・同じクラスのままで済むわけです。
自分のサイトも、実は使ったことがなかった
他人事ではありませんでした。気になって自分のSCSSをgrepで検索してみたら、@containerは1件もヒットせず、@mediaは15箇所。しっかりその59%側でした。カード型のコンポーネントをいくつか使い回してはいるものの、置き場所ごとに見た目を変える必要がある箇所は全部、画面幅を基準にしたメディアクエリで対応していました。
レスポンシブ対応が必要な箇所は今までどおり全部メディアクエリで組んでいて、特に困ったことがなかったので、コンテナクエリに乗り換える動機自体が生まれていなかったんだと思います。「対応してないから使えない」ではなく「対応してるのに使う理由がなかった」という、これまでとは違う種類の足踏みでした。
採用が遅れている理由を考えてみた
いくつか思い当たる理由がありました。1つ目は発想の転換が要ること。メディアクエリは「画面の幅で判断する」という前提が長年染みついていて、「置かれた場所の幅で判断する」という考え方に頭を切り替えるのに、ちょっとした慣れが要ります。長年の癖は、対応ブラウザが揃った程度では簡単に抜けないんだなと感じました。
2つ目は動機の問題。既存のコードが動いているのに、わざわざ書き換える強い理由がないこと。うちのサイトも今のレスポンシブ実装で表示崩れは起きていないので、わざわざ書き直すコストに見合う理由が見つかりませんでした。
3つ目は単純に知られていないこと。対応ブラウザが揃った2023年末というタイミング自体、そこまで大きく話題になった記憶がなく、気づいたときには誰も騒がないまま静かに使える状態になっていました。調査結果の内訳を見ても、基本の「幅で切り替える」機能だけで41%、その先の「親要素のスタイル状態を見て切り替える」style queriesは7%、「スクロール位置の状態を見る」scroll-state queriesは1%未満と、段階が進むごとに数字がきれいに落ちていきます。基本機能を触ったことがある人ですら半分に届かないので、応用機能まで手が伸びる人がごく一部になるのは、自然な結果なのかもしれません。
今度こそ、次の実装で試してみる
ブラウザ対応済みという事実だけでは、現場は動かないんだなと実感しました。前の2本は「対応が追いついていないから、今は見送る」という結論でしたが、今回に限っては逆で、「使える状態はもう整っているのに、自分から動いていなかった」側だったのが正直なところです。見送る理由は無かった。それでも気づいたら2年以上、手をつけないまま過ぎていました。
次にカード型のコンポーネントをサイドバーとメインエリアの両方で使い回す機会があったら、今度こそコンテナクエリで組んでみようと思います。同じカードが幅400px未満のサイドバーでは1カラム、幅の広いメインエリアでは横並びになる、というだけの単純な出し分けなら、いきなり全面書き換えしなくても部分的に試せそうです。ブラウザの対応状況を追いかけるだけでなく、対応済みの機能を実際に手を動かして試す方も、意識してサボらないようにしないといけないなと思った回でした。
この記事が参考になったら、応援クリックをお願いします
