PCサイトをレスポンシブ化する時の考え方と注意点

PCサイトをレスポンシブ化する際の流れと注意点を紹介します。シンプルなサイトであれば数時間で終わります。スマホ対応していないサイトは淘汰されていく時代ですので、ぜひレスポンシブ化をご検討ください！

1 ビューポートを設定する
2 画像の最大幅を100%にする
3 ボックスの定義を変更
4 固定幅に最大幅100%を設定
5 横並びの解除
6 高さ指定はNG
7 埋め込み要素をはみ出させない
8 英字に注意！
9 水平スクロールは恥ずかしいと心得る
10 おわり

ビューポートを設定する

これがないとレスポンシブが始まらないというほど重要なのが、ビューポート。
<head>タグ内に以下を追記します。

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

参考： https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag?hl=ja

これは、各デバイスでの幅の振る舞いを指定するものです。

width=device-widthとすることで、デバイスの幅に応じたpxになります。例えば、iPhone7だと横幅は375pxとして認識されるといった具合です。

画像の最大幅を100%にする

レスポンシブデザインでは、スマホサイトで画像がはみ出るケースはとても多いです。画像が絶対にはみ出ないようにimgタグに以下のような指定をしておくことをおすすめします。

img {
  max-width: 100%;
  height: auto;
}

最大幅を100%にして、アスペクト比を保つために高さをautoとしています。

ボックスの定義を変更

HTMLにはボックス要素があります。（厳密にはHTML5からその概念はないのですが、、）
簡単に言うと、divやpなどの幅と高さを持つタグですね。

ボックス要素を細かく分けると、

width → 黄色
padding → 青
border → 赤

の3つから成り立っています。

デフォルトの設定では、横幅として認識されるのは、widthのエリアのみ。エリア内に収まるようにwidthを指定しているのに画面からはみ出る場合は、borderやpaddingが考慮されていないことが非常に多いです。いちいち計算するのもめっちゃ面倒くさい。。

この問題は、border-boxを使うことで簡単に解決することができます。
以下のように指定してください。

*,
*::before,
*::after {
  box-sizing: border-box;
}

これは、「widthの値にborderとpaddingを含めますよ」という指定になります。「widthとborderとpaddingを足して100%になるように…」といった計算をしなくて済むのでとても楽になります。

なお、新規で作る場合は上記のようにサイト全体に適応されるように作りますが、PCからのレスポンシブ化の場合はpaddingに依存した幅にしていることもあります。

サイトの状態を見ながら、どこにborder-boxを適応させるかは考える必要があります。個別に適応する場合は、横幅を指定した要素やクラスはbox-sizing: border-box;といった考え方で大丈夫です。

固定幅に最大幅100%を設定

PCサイトでは横幅を指定してあることがほとんどです。よく見るのは、以下のような指定の仕方。

.container {
  width: 1024px;
  margin: 0 auto;
}

widthが固定値のままだとスマホで確実にはみ出してしまいます。レスポンシブデザインでは、固定値のwidthを設定するなら一緒に最大幅も100%に設定します。具体的には以下のとおり。

.container {
  width: 1024px;
	max-width: 100%;
  margin: 0 auto;
}

これで、デバイスの横幅が狭くなっても最大幅は100%として表示させるため、はみ出すことはなくなります。

横並びの解除

PCデザインでは、横に広いために横並びのデザインが採用されているケースが多いです。一方のスマホの画面は、横に狭いために縦並びに直してあげる配慮が必要になります。

例えば以下のようなデザインは、幅が狭くなってきたら横並びを解除してあげて縦並びになるようにしてあげましょう。

PC.right {
  float: right;
  width: 300px;
}
.left {
  float: left;
  width: 300px;
}

768px（iPad）以下なら横並びを解除する処理。

レスポンシブ@media screen and (max-width:768px) {
	.right {
		float: none;
		width: 100%;
		max-width: 100%;
	}
	.left {
		float: none;
		width: 100%;
		max-width: 100%;
	}
}

高さ指定はNG

PCサイトでは改行が考慮されていない、高さを固定値で指定してあるケースが多々あります。レスポンシブデザインにおいては、高さを固定させる考えは基本的にダメです（もちろんダメじゃないケースもあったりするのですが…）

height
line-height

の2つの要素が固定値の場合は注意しましょう。
例えば、以下のような指定がされている場合。

h1 {
  height: 32px;
  line-height: 32px;
}

高さはautoで自動調整されるようにして、行間は固定値ではなく倍率で指定します。1.6の場合は文字サイズの1.6倍という解釈です。

h1 {
  height: auto;
  line-height: 1.6;
}

埋め込み要素をはみ出させない

YoutubeやGoogle Mapなどの埋め込み要素は幅や高さをガッツリ記載するので、スマホ化した際に画面からはみ出しがちです。

一手間必要ですが、レスポンシブ対応する方法がありますのでコードを紹介します。

<div class="liquid">
	<iframe src="" width="560" height="315"></iframe>
</div>

まずは、iframeを囲う要素を用意します。

.liquid {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 高さ ÷ 横幅 × 100 */
}
.liquid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上記の例では、iframeの高さが315px、幅が560pxですので、315px ÷ 560px × 100 = 56.25%という計算になります。

ちなみに、横幅が100%ですが、.liquid { width: 100%; }の値を.liquid { width: 300px; }などに変えることで、横幅の指定も可能です。

英字に注意！

ブラウザは一応文字の解釈をしていて、意味のまとまりを考慮した改行を行うようになっています。ここで生じる問題は、単語で区切れない文字列の場合は改行されずにどこまでも横に記載されてしまうという点です。

よくある例としては、「URL」。単語の区切りがないので、改行されずに水平スクロールが発生することが多いです。

こういった改行できない文字列については、強制的に改行させるCSSを適応させてあげてください。

* {
  word-break: break-word;
}

賛否ありますが、わたしは全体的に当ててもいいかなと思っています。（もちろん改行されない要素に部分的に当ててもOK）

水平スクロールは恥ずかしいと心得る

レスポンシブデザインはどのデバイスでも「いい感じに表示できますよ！」といったデザインです。最も恥ずかしいのは水平スクロールが生じてしまうこと…。

レスポンシブデザインにしたら、水平スクロールが発生していないか、確認するようにしましょう！
（コーダーでもできない人がいたりするのですが…）

横揺れする要因は以下で詳しくまとめています。
→ PCサイトのレスポンシブ化で横揺れさせない3つのポイント

おわり

Follow @haniwa008

難しく考えられがちですが、レスポンシブ化はとても単純です。

1行で説明すると、
ビューポートでデバイスの幅を横幅に指定して、各要素の横幅を100%にしてはみ出さないようにする、だけ。

HTMLとCSSの知識がある人なら少し勉強するだけでできちゃいます。ぜひチャレンジしてみてください！