ウェブサイトの見づらい横揺れをきっちり修正
スマホタブレット表示時に横揺れする場合の対処法-レスポンシブデザイン-
CSSを見直してはみ出すサイトを修正
スマホやタブレットでウェブサイトを縦スクロールした時、画面の横幅が固定されず左右にグラグラしたり、横にずれるといった横揺れしてしまうサイトの修正方法を解説します。
来訪者の閲覧意欲を低下させ、ウェブサイト運営者のクオリティダウンにつながる横揺れは、早急に対処が必要です。
横揺れの原因
スクロールしたらグラグラ、揺れたり横に少しスクロールしちゃう…。そんなウェブサイトの横揺れの原因は、画面をはみ出して表示される要素があるために起こります。
何もはみ出してるようには見えないけれど、目に見えない部分がはみ出しているのが厄介なところ。それらを突き止める必要がありますが、凝ったウェブサイトほど発見するのは手強いものです。
そこでまずはみ出している要素を見つけるために、横幅の設定について再確認してみます。
はみ出しの原因として一番多いのは、横幅の設定がされていないことです。横幅が設定されていない場合、自動広告などが勝手に拡張してしまいます。
.flexbox{max-width:100%}横幅とは
例えばレスポンシブデザインで、デバイス画面横幅いっぱいに表示したいとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="box">
<p>box-sizing:content-boxを使った場合<br>または設定なし</p>
</div>
.box{width:100%;max-width:100%;
height:auto;
margin:0;margin-bottom:20px;
padding:1%;
border:solid 10px #546EB4;
background:#66CC33}
p{margin:2%;padding:1%;line-height:2;background:#fff}するとmax-width100%に設定したのにも関わらず、画面サイズを超え、はみ出してしまっています。
図１だとcontent areaはデバイス画面横幅に収まっているので、paddingに色がついていない場合はハミ出してしまっていることに気づかない可能性があります。
デフォルトでwidthは、paddingとborderを含まないことに注意が必要です。さらにborderについては、線幅を％（パーセント）で指定できないためメディアサイズごとに計算する必要が出てしまいます。
∴要素の横幅＝content area＋padding＋border
対処法 box-sizing
レスポンシブデザインが当たり前となり、全メディアサイズでpaddingやborderの値をその都度考慮するのは大変なことです。
そこでCSS3で追加されたbox-sizingプロパティを使用します。box-sizingプロパティは、値をborder-boxとすることでそれらの値を含めてレンダリングします。
| content-box | 初期値。paddingとborderをwidth（幅）とheight（高さ）に含めない |
| border-box | コンテンツ領域にpaddingとborderをwidth（幅）とheight（高さ）に含める |
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="box">
<p>box-sizing:content-boxを使った場合<br>または設定なし</p>
</div>
<div class="box2">
<p>box-sizing:border-boxを使った場合</p>
</div>
</body>
</html>.box{width:100%;max-width:100%;
height:auto;
margin:0;margin-bottom:20px;
padding:1%;
border:solid 10px #546EB4;
background:#66CC33}
.box2{width:100%;max-width:100%;
height:auto;
margin:0;margin-bottom:20px;
padding:1%;
border:solid 10px #546EB4;
background:#66CC33;
box-sizing:border-box}
p{margin:2%;padding:1%;line-height:2;background:#fff}枠線（border）使用時は、box-sizingプロパティにborder-boxを指定しておき、横揺れをきっちり予防する。とにかくborder-boxしとけばOKですね。
つまり全称セレクタ（*）への指定で解決です。
*{box-sizing:border-box}
サンプルでは余白を付与しましたが、個人的に子要素の左右のマージンは0にし、親要素のパディングで調整するのが、おすすめの設定です。
それでもダメな時の対処法
横幅の設定を見直しても「横揺れ」が直らない場合、overflowの設定で強制的に隠し、横スクロールさせないことで強制的に修正できます。
html {
overflow-x: hidden;
overflow-y: scroll; -webkit-overflow-scrolling: touch
}
bodyに指定した場合、横スクロールバーが出たままで横揺れしたので、htmlに指定します。
ひとまず横揺れは修正できたかと思いますが、将来的にはみ出している要素はきっちり修正したいものです。以上、スマホタブレット画面の横揺れ修正レポをお送りしました( ´ ▽ ` )ﾉ。
職業：サラリーマン
生活に必要なサービスを消費者目線で精査。節制と何でも自分でやるのがライフスタイル。
ビジネスではない本音ブログで、プラスワンの生活を提案しています。
※本ページはプロモーションが含まれています。
preタグをきちんと整形をする方法
レスポンシブデザインのpre要素（Hilight.js）が折り返されない、改行されない場合の対処法を解説します。
ソースコードのハイライト表示のやり方
負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。
グーグルアドセンス広告がはみ出す時の修正方法
レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消！
Googleアドセンスが中央に寄らない場合のやり方
デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。
Googleアドセンスは稼げる？稼げない？どっち
キャリア10年以上でわかったこと、それは…
GoogleAdsense広告を速く表示する
DNSプリフェッチで５つの参照先を事前リレーションするだけで、すばやく表示されます
画像の遅延読み込み実装でサイト表示高速化
PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します
画像を軽くする最適化はお済みですか？
画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。