筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定

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

CSSで要素を上下左右中央揃え（以下、中央揃え）する機会は多いです。要素は1つだけの場合もありますし、複数の要素の場合もあります。 ▼ 中央揃えの4つの事例 昔は多くのコードを書いていましたが、CSS Gridを使えば最短2行のコードだけで実現できます。2020年から全ブラウザ（Chrome・Firefox・Safari・Edge）で対応済みです。 本記事では、単一・複数要素の中央揃えの方法、キーとなるplace-contentとplace-itemsの使い方、従来のコードとの比較についてデモを交えて解説します。 結論 1つの要素の中央揃えは、次の2行のコードを使います。