PCサイトのレスポンシブ化で横揺れさせない6つのポイント

2018年1月12日2021年11月26日

PCサイトのレスポンシブ化で横揺れ（水平スクロール）させないポイントを3つ紹介します。

幅をガチガチに指定するPC脳は捨てて、レスポンシブ脳に切り替えましょう！

はにわまん

スマホ画面風のフレームにはめて、分かりやすく比較してみました！

レスポンシブ化で横揺れさせない6つのポイント

要素の最大幅は100%に

最大幅を100％にしないと、画面からはみ出ても表示され続けてしまいます。指定の方法は、max-width: 100%;。画像はアスペクト比を保つために、height: auto;とセットで覚えるようにしましょう。

img {
  width: 700px;
  max-width: none; /* 初期値 */
  height: auto;
}

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

固定幅には最大幅100%を設定してあげる

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

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

要素の幅に`padding`と`border`を含める

width： 100%;にしてもはみ出すことがあります。これは、padding、border、marginのいずれかが影響している可能性が高いです。

レスポンシブデザインでは、基本的に左右のmarginは指定しないこと（親要素のpaddingで調整する）

そして、widthの大きさをpaddingとborderを含んだ値にすることが大切です。box-sizing: borderーbox;を指定することではみ出す確率を下げることができます。

box-sizingを指定しないパターン

box-sizing: content-box; /* 初期値 */
width: 100%;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);

左右のpaddingの20pxと、左右のborderの4px分、はみ出す。

box-sizingを指定するパターン

box-sizing: border-box;
width: 100%;
padding: 10px;
border: 2px solid rgba(0,0,0,.2);

width: 100%;の中にpaddingとborderが内包されるので、はみ出さない。

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

width → 黄色
padding → 青
border → 赤

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

区切れない英字は折り返す

HTMLは単語の途中では折り返さない仕様となっています。

単語の区切りが明確でないような長い文字列がある場合は、CSSで無理やり折り返す処理を行いましょう！

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

word-break: normal; /* 初期値 */

単語を折り返さないまま画面を突き抜ける。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

word-break: break-all;

単語の途中でも折り返してくれる。

横並びの解除

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

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

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

768px（iPad）以下なら横並びを解除する場合は以下のように対応します。

@media (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を囲うdiv要素を用意します。

.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; }などに変えることで、横幅の指定も可能です。

レスポンシブ対応するための準備

レスポンシブ対応するためには準備が必要です。準備と言っても次の2つのことを覚えておけば大丈夫ですのでご安心ください。

ビューポート

ビューポートは各デバイスでの幅の振る舞いを指定するものです。<head>タグ内に以下を追記します。

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

参考： https://web.dev/viewport/

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

メディアクエリー

ブラウザのウインドウ幅に応じて挙動を変えたい時の書き方です。「ウインドウ幅○○px以上であれば、このスタイルを利用する」といった感じのイメージとなります。

@media (min-width: 768px) {
  /* ほにゃらら */
}

おわり

レスポンシブ対応で横揺れするパターンはおおむね決まっています。幅を100%にすることであったり、改行されない文字があることを理解するだけでも対応スピードは変わってくると思いますので、ぜひ今回紹介したパターンだけでも覚えてもらえたらと思います！

この記事が気に入ったら
いいねまたはフォローしてね！

Follow @haniwa008

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人