ウェブサイトの見づらい横揺れをきっちり修正

スマホタブレット表示時に横揺れするときの対処法-レスポンシブデザイン-

Planet20xxPC用バナー Planet20xxモバイル用バナー

スマホやタブレットでウェブサイトを縦スクロールした時、画面の横幅が固定されず横揺れしてしまうサイトの修正方法を解説します。

来訪者の閲覧意欲を低下させ、ウェブサイト運営者のクオリティダウンにつながる横揺れは、早急に対処が必要です。

横揺れの原因

ススクロールしたらグラグラ、揺れたり横に少しスクロールしちゃう…。そんなウェブサイトの横揺れの原因は、画面をはみ出して表示される要素があるために起こります。

何もはみ出してるようには見えないけれど、目に見えない部分がはみ出しているのが厄介なところ。それらを突き止める必要がありますが、凝ったウェブサイトほど発見するのは手強いものです。

はみ出している要素はなかなか見つからないことが多い
なかなか見つからない…

そこでまずはみ出している要素を見つけるために、横幅の設定について再確認してみます。

横幅とは

サンプル
要素の実際の横幅を図解した画像
図1:スマホに表示されたcontent areaは一見はみ出していないように見えるが、paddingに色をつけてみるとはみ出して表示が切れていることがわかります

例えばレスポンシブデザインで、デバイス画面横幅いっぱいに表示したいとします。

yokohaba.html
<!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>
sample.css
.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%に設定したのにも関わらず画面サイズを超え、はみ出してしまっていることがわかります。図1だとcontent areaはデバイス画面横幅に収まっているので、サンプルのようにpaddingに色がついていない場合はハミ出してしまっていることに気づかない可能性もあります。

デフォルトではwidthは、paddingとborderを含まないことに注意が必要です。さらにborderについては、線幅を%(パーセント)で指定できないためメディアサイズごとに計算する必要が出てしまいます。

はみ出している要素はなかなか見つからないことが多い
でもこれって全メディアサイズで考慮するのはたいへんじゃない?…

∴要素の横幅=content area+padding+border

box-sizingとは

要素の実際の横幅を図解した画像
図2:コンテンツ領域にpaddingとボーダーが含まれています。

レスポンシブデザインが当たり前となり、全メディアサイズでpaddingやborderの値をその都度考慮するのは大変なことです。そこでCSS3で追加されたbox-sizingプロパティを使用します。box-sizingプロパティは、値をborder-boxとすることでそれらの値を含めてレンダリングします。

box-sizingプロパティ

content-box初期値。paddingとborderをwidth(幅)とheight(高さ)に含めない
border-boxコンテンツ領域にpaddingとborderをwidth(幅)とheight(高さ)に含める
yokohaba.html
<!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>
sample.css
.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}
※box-sizingはIE8未満はベンダープレフィックスが必要です。

サンプルでは余白をみましたが、個人的に左右のマージンやパディングは0にし、親要素のパディングで調整するのがオススメの設定です。

枠線(border)使用時はbox-sizingプロパティにborder-boxを指定しておき、横揺れをきっちり予防する。とにかくborder-boxしとけばOKですね。

ソースコードがハイライト表示されたことで、見やすくなったと喜ぶキーン
デザインを細かくいじってると崩れちゃうんだよね

それでもダメな時の対処法

横幅の設定を見直しても「横揺れ」が直らない場合、overflowの設定で強制的に隠し、横スクロールさせないことで強制的に修正できます。

CSS
html {
 overflow-x: hidden;
 overflow-y: scroll; -webkit-overflow-scrolling: touch
 }
 

bodyに指定した場合、横スクロールバーが出たままで横揺れしたので、htmlに指定します。

ひとまず横揺れは修正できたかと思いますが、将来的にはみ出している要素はきっちり修正したいものです。以上、スマホタブレット画面の横揺れ修正レポをお送りしました( ´ ▽ ` )ノ。

【関連記事】

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html)
アフィリエイトの後ろになぜかある1ピクセル画像を究明するイメージ画像

謎の1ピクセル画像を究明

Amazonアソシエイトコードにあるimgタグの1ピクセル画像をご存知ですか?

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP