レスポンシブデザインのための準備

今更ながら、レスポンシブデザインを行うために必要なことをまとめる。

レスポンシブデザインを行うために

レスポンシブデザインを行うためには、大きく分けて以下の 3 点で準備をする必要がある。

viewport: Web ページの表示領域を設定する
ブレイクポイント: 表示が切り替わる地点
メディアクエリ: 画面の大きさによる CSS の切り替え

Viewport

viewport は表示領域を設定するために必要な記述。

HTML の head 要素内に meta 要素を利用して記述する。

viewport を使うことで、は仮想的な表示領域を指定することができる。

<meta name="viewport" content="width=360">

上記の場合は、幅が 360 の仮想的な表示領域が作られ、これが viewport と呼ばれる。

ブラウザなどは、この表示領域に合わせて描画を行う。

以下は、レスポンシブデザインを行う際の viewport の設定例。

<meta name="viewport" content="width=device-width, initial-scale=1">

width を device-width としていることで、デバイスの横幅と同じ幅を持つ viewport を作成している。

initial-scale はデフォルトのズーム倍率のため、1 としておけば拡大も縮小もしていないことになる。

width: viewport の幅
initial-scale: 初期のズーム倍率の値

ブレイクポイント

レスポンシブデザインでは、基本的に画面の横幅を基準に CSS を切り替える。

例えば、横幅が 1000px 以下の端末ではこの CSS を使用すると言ったような感じ。

そして、この切り替え地点(例で言うなら 1000px)がブレイクポイントと呼ばれる。

ブレイクポイントの設定値は、様々な要因を考慮して設定する必要がある。

そのため、絶対にこの値にすべきと言ったような値はない

メディアクエリ

ブレイクポイントを決めたら、それを CSS に反映させるための記述を行う。

このブレイクポイントの指定には、メディアクエリを用いる。

メディアクエリは link に指定する方法と、CSS ファイルに直接記述する方法がある。

ブレイクポイントごとに別々の CSS ファイルを読み込ませる場合は link 要素に記述する。

link 要素への記述例

以下は、画面の幅が 600px 以下の場合、smartphone.css が適用されるという記述。

<link href="css/smartphone.css" rel="stylesheet" media="screen and (max-width: 600px">

css への記述例

@media screen and (max-width: 600px) {
  /* 画面の幅が 600px 以下の場合のスタイルを記述する */
}