Container Queriesという考え方の紹介と今から利用するには

従来のmedia queryの問題点 CSSでWindow幅に応じて適応するスタイルを変えるためにmedia queryがある。スマートフォンやタブレットの普及によって、レスポンシブ対応が必須になった現代においてはmedia queryは必須の機能である。 ただ、この media query だけでは、限界がでてくる。それは使っているブラウザのwindow幅でしかCSSの切り替えができないということである。時にそれは実装者にとって非常に厄介な問題となりうる。 上の図のようなブログのレイアウトを考えてみよう。 window幅が960pxの時はメインカラムとサブカラムが横並びで表示されているとする。 959px幅の際にメインカラムの下にサブカラムが回りこむ。 window幅が960pxの際にはメインカラムとサブカラムが横並びでレイアウトされているので、メインカラムの幅はwindow幅が959p