レスポンシブWEBデザインで制作する際にすべき初期設定まとめ

更新日：2016年5月27日

2016年5月12日、Googleはモバイルフレンドリーアップデートの第二弾が実施されたことを正式にアナウンスしました。これにより、モバイル対応していないサイトのモバイルの検索順位が下がることになります。
人それぞれ色々な事情があるでしょうが、可能であれば必ずモバイル対応した方が良いと断言出来る時代にいよいよ突入してきました。

ちなみに第一弾のモバイルフレンドリーアップデートは2015年4月に実施され、WEB業界に大きな波紋を呼びました。

そんなこんなでこれから更にレスポンシブWEBデザインの需要が高まってくるものかと思われます。初めての人も、そうでない人も、レスポンシブWEBデザインで制作する際にすべき初期設定をこのページにまとめましたので参考にして貰えれば嬉しいです。

Viewportの設定

メディアクエリを適用するにはviewportの設定は必須です。これをheadタグの中に入れます。

IE8以下でもメディアクエリを有効にする設定

IE8以下だとメディアクエリが効かない為、レスポンシブWEBデザインが成り立ちません。でもこの記述をするだけIE8以下でもメディアクエリを有効にしてくれます。これもheadタグの中に入れます。

画像を伸縮する設定

img {
	border: 0;
	max-width: 100%;
	height: auto;
	width /***/:auto;
}

レスポンシブWEBデザインでは画像をブラウザの幅によって伸縮させるフルードイメージという手法が使われますが、その為のCSSです。

メディアクエリの設定

@media only screen and (max-width: 480px) {
/*適用したいCSSを記述*/
}

PCから作る場合に使用します。
上記の記述の場合、横幅が480px以下の場合にCSSを適用します。

@media screen and (min-width: 480px) {
/*適用したいCSSを記述*/
}

モバイルから作る（モバイルファースト）場合に使用します。
上記の記述の場合、横幅が480px以上の場合にCSSを適用します。

@(min-width: 480px) and (max-width: 768px) {
/*適用したいCSSを記述*/
}

～pxから～pxの間といった場合に使用します。
上記の記述の場合、横幅が480px以上且つ横幅が768px以下の場合にCSSを適用します。

縦画面から横画面にした時に起こるバグの対処

body {
	-webkit-text-size-adjust: 100%;
}

AndroidやiPhone等のスマートフォンからサイトを閲覧する時、縦画面で見る時と横画面で見る時とでは文字サイズが調整されて、勝手に変更されます。具体的には、縦画面で開いたページを横画面にすると文字サイズが大きくなるバグがあります。
それを制御して、文字サイズの変更をさせない為の記述です。

スマートフォンの時のクリック時の色を設定

body a {
	-webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

スマートフォンの時のクリック時の色を設定することが出来ます。色は任意でどうぞ。

電話発信の防止の設定

連続した数字があると、スマートフォンで閲覧した場合それは電話番号だという風に認識して勝手にリンクが貼られます。そのリンクをクリックすると電話を掛けようとするので、それを防止する為の記述です。
むしろ電話番号だと認識して欲しいというのであれば
content="telephone=no"
のnoをyesにすれば良いだけです。

いかがでしたでしょうか？
こう見ると、レスポンシブWEBデザインって難しそうだし、ややこしいなぁ……辞めよって声も聞こえてきそうですが、そんなことはありません。
これらの設定はただの決まり文句みたいなものなので、深く考えずに制作に取り掛かりましょう！