プログラミング基礎中級
メディアクエリ
メディアクエリ
一言で言うと
画面幅などの条件で CSS を切り替える仕組み。
もう少し詳しく
一言で言うと
画面幅などの条件で CSS を切り替える仕組み。
もう少し詳しく
画面幅などの条件で CSS を切り替える仕組み。IT エンジニアリングの現場で頻繁に登場する概念のひとつで、関連する仕組みやベストプラクティスと合わせて理解しておくと応用が利きます。
プログラミングを学び始めると最初に触れる基本概念のひとつです。CSS の @media ルール内に条件を書くことで、画面幅・デバイス種別・印刷など、表示環境に応じてスタイルを切り替えられます。
実務でどう使うか
@media print を使うことで、印刷時だけ適用されるスタイルを定義できますprefers-color-scheme: dark を条件に指定し、OS のカラーテーマに合わせた配色を自動で切り替えられます関連する章
Ch144 で詳しく学べます。