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

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

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

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

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

Viewport

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

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

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

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

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

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

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

1
<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 要素に記述する。

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

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

css への記述例

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

レスポンシブデザイン

レスポンシブデザインでのサイズ指定

レスポンシブデザインでのサイズ指定には、viewport に応じて変化するvwを使うと便利です。

vwは、viewport width の略で、viewport の幅に対する割合を表します。

viewport の横幅は常に100vwで表されます。

例えば、ブラウザの幅が 1000pxの時、1vw10pxになります。

%指定との違いは、%指定は親要素に対する割合ですが、vw はブラウザの幅に対する割合だということです。

まとめ

viewport と、ブレークポイント、メディアクエリを設定することで、表示するデバイスによってスタイルを切り替えることができる。

これによって、レスポンシブデザイン を行うための最低限の準備が整ったことになる。

参考資料