CSSのメディアクエリ（media）の使い方

メディアクエリはユーザーの環境を調べ、環境ごとに適したスタイルシートを指定しておいて自動で反映させることができるというものです。

これを利用することで、ユーザーの環境や閲覧する時の表示サイズに影響されることなく、最適なデザインを保つことができます。

CSSのメディアクエリの使い方

ユーザーの閲覧環境によって表示を振り分ける方法は、media属性を利用することでも出来ましたが、今回ご紹介するCSSで使うメディアクエリでは、CSSで記述する為１つのスタイルシートでスタイルを振り分けることが可能です。

例を見てみましょう。

上記のように指定することで、500px以上の表示幅の時は、背景色を#B0C4DEにすることができます。

これが大体幅が480pxぐらいの時です。幅が500px以上ないので、背景色は変わりません。

500Px以上にしてみましょう。

色が変わりました。これで成功です。

これを活用することで、表示領域が広くなった時のデザインや、狭くなった時のデザインの切り替えが可能です。また、先ほどは500px以上と設定しましたが、100px〜500pxの時などの細かい設定も可能です。

その場合は以下の様に記述します。

レスポンシブデザインには必要不可欠な知識なので、しっかり基礎を覚えておきましょう。