コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま
最短2行。上下左右中央揃えにはCSS Gridが一番ラク
