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