CSSメディアクエリーによるレスポンシブWebデザインの基本

プログラミング

2016.02.25

この記事は約5分で読めます。

最近のホームページなどのWebデザインは、HTMLは切り替えず、画面サイズの条件に応じて適用するCSSだけを切り替えることで、端末に適したレイアウトを実現する手法の「レスポンシブWebデザイン」が主流です。

そのやり方をメモして忘れないように。

レスポンシブWebデザインで必要な2つの作業
ビューポート（viewport）のメタタグを設定する
メディアクエリーを使用してCSSを切り替える
メディアクエリーのサンプルと閾値
最後に

レスポンシブWebデザインで必要な2つの作業

レスポンシブWebデザインを実現するためには、以下の2つの作業を行う必要があります。
それぞれの詳細な内容は、次項で見ていきます。

ビューポート（viewport）のメタタグを設定する
メディアクエリーを使用してCSSを切り替える

ビューポート（viewport）のメタタグを設定する

まずは、ビューポート（viewport）のメタタグの設定から。

スマートフォンやタブレットのブラウザがWebページを表示する際に、パソコン向けに作られたページがかなり小さく表示されることがあります。
これは、ブラウザによって、そのページがパソコン向けの固定幅（iOSの場合は980px）で作られていると仮定して一度描画した後、端末の画面サイズに合わせて縮小表示するようになっているからです。

ビューポート（viewport）のメタタグを設定すると、この横幅を仮定して描画し、それを縮小表示するという処理をキャンセルし、デバイスの幅に合わせて描画させることができます。

その書式はこちら。


<!-- ビューポートの設定 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">

ここで設定している項目の「width」はビューポートの横幅で、「device-width」を指定することで、ブラウザによるパソコン向けの固定幅ではなく、デバイスの幅に合わせて描画できます。
そして、「initial-scale」は、拡大縮小のスケールの指定で、「1.0」を指定することでデフォルトの拡大縮小をなしにしています。

メディアクエリーを使用してCSSを切り替える

続いて、メディアクエリーを使用したCSSの切り替え。

CSS内でメディアクエリー「@media…{}」を記述することで、画面幅によって条件分岐させて、適用するスタイルを切り替えることができます。

その書式はこちら。

/* 画面幅が480px以下の場合 */
@media screen and (max-width:480px) {
p{
color: red;
}
}

「max-width」で「480px」が指定されており、画面幅の最大値が480px、つまり、画面幅が480px以下の場合に、その中のスタイルが適用されます。

「max-width」以外にも、以下のような値が設定できますが、基本的によく使用するのは画面幅の「max-width」、「min-width」になります。

「max-width」…画面幅が指定サイズ以下のとき
「min-width」…画面幅が指定サイズ以上のとき
「max-height」…画面高さが指定サイズ以下のとき
「min-height」…画面高さが指定サイズ以上のとき
「orientation:portrait」…画面幅が高さ以下の場合（端末を縦に持っている場合）
「orientation:landscape」…画面幅が高さ以上の場合（端末を横に持っている場合）

また、条件は複数指定することもできます。

/* 画面幅が480px以上、780px以下の場合 */
@media screen and (min-width:480px) and (max-width:780px) {
p{
color: red;
}
}

そして、HTMLのlinkタグで指定し、画面幅によって読み込むCSSを変更することもできます。
しかし、1つのスタイルシート内で分岐させて記述する方が分かりやすいと思います。

 	<link rel="stylesheet" href="css/style.css">
 	<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width:480px)">

メディアクエリーのサンプルと閾値

続いて、メディアクエリーのサンプル。

CSSは、基本的に後ろにあるスタイルが前のスタイルを上書きすることになり、優先されます。
そして、スタイルはPC用の表示を基本として共通のスタイルとして定義し、その後スマートフォン用に条件分岐させてスタイルを定義し、必要であればタブレット用も条件分岐させます。
そうすることで、無駄な記述を少なくできます。

/* 共通（PC用） */
p{
color: black;
}

/* 画面幅が480px以下の場合（スマートフォン用） */
@media screen and (max-width:480px) {
p{
color: red;
}
}

/* 画面幅が780px以下の場合（タブレット用） */
@media screen and (max-width:780px) {
p{
color: blue;
}
}

レスポンシブWebデザインでよく使用するスタイルに「display」があります。
「div」タグにクラス名をつけておき、「display: none;」、「display: block;」を使用し、スマートフォンの場合は非表示にするといったことができます。

/* 共通（PC用） */
p{
display: block; /* 表示 */
}

/* 画面幅が480px以下の場合（スマートフォン用） */
@media screen and (max-width:480px) {
p{
display: none; /* 非表示 */
}
}

/* 画面幅が780px以下の場合（タブレット用） */
@media screen and (max-width:780px) {
p{
display: none; /* 非表示 */
}
}

なお、スマートフォン、タブレットを条件分岐させる閾値ですが、スマートフォンは「480px」あたり、タブレットは「780～900px」あたりとしているところが多いです。