Webサイト制作におけるスマートフォンサイトの作り方1

Webサイト制作において、スマートフォンに対応したサイトの必要性が高まってきている。

今回からHTML5とCSS3を用いたスマートフォン対応サイトの作り方をまとめていく。

レスポンシブデザインとは?

画面の横幅に合わせてページデザインやレイアウトを変えることで、様々なデバイスに対応できるデザインのこと。

densityとviewport

densityは、設定の異なるデバイス間でも同一コンテンツが同じ大きさで見えるようにするために各デバイスに設定されている値。
viewportは、デバイスのスクリーンを何px×何pxとして使うかを指定するもの。

デスクトップPCにおいては、ブラウザの画面サイズがviewportとして扱われている(ことが多い)。

viewportの設定
  • viewportをデバイスの画面解像度に設定する ⇒ デバイスのディスプレイサイズが同じでも、画面の解像度の設定によってコンテンツを表示する大きさが変わる
  • viewportをデバイスの画面解像度とdensityに基づいた横幅に設定する ⇒ 異なるデバイス間でも同一コンテンツが同じ大きさで見えるようになる ⇒ レスポンシブデザインで用いる

viewportの横幅を各デバイスのdensityに基づいた解像度に設定する方法は下記の通り。

<meta name="viewport" content="width=device-width">
cssの設定

レスポンシブデザインでは画面(viewport)の横幅に応じて適用するcssを変えることで、
画面の横幅に合ったデザインに切り替えていく。

ここではCSS3のメディアクエリを使った方法をまとめていく。

画面サイズに応じてcssを指定する方法は下記の通り。

<link rel="stylesheet" href="○○.css" media="only メディアタイプ and (特性)">

このlinkタグのmedia属性に条件を指定して、適用するcssを変えることができる機能のことをメディアクエリと呼ぶ。

主なメディアタイプは以下の通り。

メディアタイプ 閲覧環境の種類
all すべて
screen スマホやPCなどのモニタスクリーン用
print 印刷用

主な特性は以下の通り。

主な特性 閲覧環境の特性
width 画面の横幅 数値
min-width 画面の横幅の最小値 数値
max-width 画面の横幅の最大値 数値
orientation バイスの向き(縦or横) landscape or portrait

特性は「and」で繋ぐことで複数を指定することができる。

<link rel="stylesheet" href="○○.css" media="only メディアタイプ and (特性1名:値1) and (特性2名:値2)">

メディアタイプは特性とセットで「,」で繋ぐことで複数を指定することができる。

<link rel="stylesheet" href="○○.css" media="only メディアタイプ1 and (特性1名:値1), メディアタイプ2 and (特性2名:値2)">


画面サイズに応じて、3つのcssを使い分ける方法は下記の通り。

1.PCサイズありきで考える場合

<link rel="stylesheet" href="style-all.css"> //すべての場合に適用されるベースのcss
<link rel="stylesheet" href="style-middle.css" media="only screen and (min-width: 600px) and (max-width: 960px)">
<link rel="stylesheet" href="style-small.css" media="only screen and (max-width: 599px)">

2.スマホサイズありきで考える場合

<link rel="stylesheet" href="style-small.css"> //すべての場合に適用されるベースのcss
<link rel="stylesheet" href="style-middle.css" media="only screen and (min-width: 600px) and (max-width: 979px)">
<link rel="stylesheet" href="style-large.css" media="only screen and (min-width: 980px)">

スマホサイズありきで考える場合、IE8以前ではCSS3のメディアクエリに未対応のため、style-large.cssは適用されない。
その対策として、下記の記述を加えておく。

<!--[if lt IE 9]>
<link rel="stylesheet" href="style-large.css">
<![endif]-->