メディアクエリの基本的な書き方
Webサイトをスマホ・タブレット・パソコンなど、画面サイズごとに最適な表示に切り替える仕組みが「メディアクエリ」です。レスポンシブデザインを実装する上で、避けて通れない基本要素になります。この記事では、メディアクエリの考え方と、よく使われる指定方法を初心者向けに整理します。メディアクエリとは何かメディアクエリとは、**「画面の条件に応じてCSSを切り替える仕組み」**です。例えば、画面が小さいときはレイアウトを縦並びにするスマホでは文字を大きくするパソコンでは余白を広く取るといった制御を、画面サイズに応じて行えます。HTMLはそのままで、CSSだけを条件分岐できるのが大きな特徴です。基本的な考え方メディアクエリは次のような流れで考えると理解しやすくなります。まずは共通のCSSを書く特定の画面サイズのときだけ上書きするつまり、「全部に効くスタイル」＋「条件付きのスタイル」という構造です。この考え方を押さえるだけで、レスポンシブ対応がかなり楽になります。画面サイズ指定の基本メディアクエリでは、主に画面の横幅を条件に指定します。よく使われる考え方は次の2つです。① 〜px以下のときに切り替えるスマホやタブレット向けに使われることが多い指定です。「画面が小さくなったらレイアウトを変える」という発想になります。例としては、タブレット以下で2カラムを1カラムにするスマホサイズでメニューをハンバーガーにするなどが該当します。② 〜px以上のときに切り替えるこちらはPC向けに使われることが多い指定です。「画面が広い場合だけ、装飾や余白を増やす」といった使い方になります。よく使われるブレイクポイ
0
