IT・システム開発

【CSS】スマホ向けに要素の横幅をwidth:100%;にしても、はみ出る場合の対処法

  /

最近の世の中の流れは、モバイルファースト。
ということで、スマートフォン向けに表示を最適化しようと対応したのですが、何度やっても、なんか右側に微妙に余白があって、画面がガタガタしてしまいました。
長時間ハマった末に解決したので、私のやり方を共有したいと思います。

スマホ対応時の要素の幅は、基本width:100%;にする

めっちゃ疲れました。sawasawa（@sawasawa0）です。

tumblrは何もしなくても、自動でモバイル向けに整形したページを出力してくれます。
ただ、それだとサイドバーやフッターの情報等は表示してくれないので、この辺りをなんとかするには、モバイル対応したテーマを使用するか、テーマを自作するべきでしょう。

まずは、スマホ対応をする際ですが、
“内には、下記のメタタグを記載しておきましょう。

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

これで、表示する端末の幅に合わせて、画面の表示サイズを適切な形で表示してくれます。

一口にスマートフォンと言ってもサイズは様々なので、固定幅を指定するよりは、割合で指定したほうが良いです。ページのレイアウト上でベースとなる要素や、画面いっぱいに出したい画像などは、横幅を100%に指定しましょう。

#wrapper{
    width: 100%;
}

box-sizingをborder-boxにする

ただその際に注意が必要なのが、そのままでは間違いなく横幅は100％を越えてはみ出すということです。
下記の記事が参考になります。

ざっくり言うと、横幅をwidth:100%;にしても、marginやpaddingを指定していると、その分横にはみ出してしまいます。

box-sizing: boder-box;を指定しておくと、width:100%;で指定した範囲の中に、margin以外の要素が入るようになり、marginさえ指定しなければ、はみ出さなくなります。

どの要素に指定すれば良いのかが、分かりづらかったら全要素に適用しちゃって良いんじゃないでしょうか。

* {
    box-sizing: border-box;
}

ちなみに、bootstrapを適用している場合は、bootstrap側であらかじめbox-sizingが適用されています。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Chromeデベロッパーツールではみ出した要素を探す

ここまでは、他のwebサイトにも同様の記述があったので、すぐにやってみたのですが、

一向にはみ出しが収まらない。。。（イラっ）

しょうがないので、chrome付属のデベロッパーツールで地道に探していきました。

img

右クリック→検証で、chrome付属のデベロッパーツールを立ち上げたあとは、
（win：Ctrl+Shift+IかF12・Mac：Command＋Option＋Iでも可）

  1. デバイスモード・アイコン（スマホみたいな絵のボタン）を押す
  2. 表示対応する画面サイズが一番小さいデバイスのサイズを選択する
    （このサイトの場合、iphone4を一番小さい画面サイズの基準にしています。）
  3. 要素を一つずつ開く
  4. マウスオーバーした要素のサイズが表示される
  5. 画面の横幅よりも大きい値（この例だと320pxより大きい）要素がはみ出しの原因

ちなみに、子要素がサイズオーバーしてても、親要素側には表示されない場合もあるので、

各要素をひとつひとつ見ていくと良いと思います。（もっと楽なやり方があれば教えてください）

その結果2箇所320pxを超えた横幅の要素が見つかりました。

  • ロゴ画像
  • グリッド指定用のdiv

width: calc（）

まずは、ロゴ画像から直していきます。

修正前

.ly_logo img{
    max-height: 80px;
    width: auto;
}

ロゴの高さの最大値だけを指定して、横幅は最大値をとってほしかったんですね。

まあここは、width:100%;でも良いところですが、ハンバーガーボタンと重ならないようにしたかったので、下記のような指定にしました。

修正後

.ly_logo img{
    width: calc(100% - 70px);
}

この指定の仕方だと、表示されたデバイスの画面幅よりも70px小さいwidthになります。

必ず画面内に収まるので、下手にmarginの指定をするよりも良い場合がありそう。

bootstrapで指定されたmarginとpaddingを解除する

盲点だったのがこれ。

自分が記述したCSSが干渉しているのかよくわからなかったけど、

はみ出しがあるdiv要素に対してこの指定を解除したら収まった・・・。

修正後

div#body.row {
  margin-left: 0;
  margin-right: 0;
}

まとめと反省点

最初からモバイル向けに余計なmarginを入れないように、CSSコーディングしてれば、こんなにめんどくさいことにはならなかったかも。
同じようにハマった方いたら、こんな解決方法もあるよということでお役立てください。

あなたにおすすめの記事