【Frontend CSS – パート14】Style Query・Container Naming・実践パターンまで徹底解説

ウェブサイトのデザインって、スマホで見るとちょうどいいのに、パソコンで見るとちょっと間延びしちゃったり、逆にパソコンでは綺麗なのにスマホだと文字が小さすぎたり…なんて経験、ありませんか？

これまで、ウェブサイトのデザインを画面の大きさに合わせて調整する「メディアクエリ」という技術が主流でした。これは、画面全体の幅がどれくらいかを見て、デザインを変える方法です。例えば、「画面が600ピクセルより広かったら、このボタンの色を変えよう」とか、「1024ピクセルより広かったら、文字を大きくしよう」といった具合です。

でも、これだと困ることが出てきます。例えば、ウェブサイトの中に「カード」のような、独立した部品があるとします。このカードが、画面全体の幅ではなく、そのカードが置かれている「場所」の幅に合わせてデザインを変えたい、という場面が出てくるんです。たとえるなら、本棚に置かれた本が、本棚の幅に合わせて表紙のデザインを変えられるようなイメージでしょうか。

この「場所の幅」に合わせてデザインを調整する新しい技術が「コンテナクエリ」なんです。これまでのメディアクエリが「家全体の広さ」を見ていたのに対し、コンテナクエリは「部屋の中の家具の配置」のような、もっと細かい部分に注目できるようになりました。

この記事では、このコンテナクエリの基本的な考え方から、さらに進んだ「スタイルクエリ」や「コンテナ命名」といった、より柔軟なデザインを実現するためのテクニックまで、分かりやすく解説しています。CSSの世界が、もっと賢く、もっと便利になるヒントが満載ですよ。