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

自分でやるをバックアップするソクラテツチップスのバナー画像

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

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

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

横揺れの原因

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

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

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

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

横幅とは

サンプル
要素の実際の横幅を図解した画像
図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ですね。

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

つまり全称セレクタ(*)への指定で解決です。

*{box-sizing:border-box}
                    
                    

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

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

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

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

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

PROFILE
SOCRATETSU featuring Medjed

職業:サラリーマン

生活に必要なサービスを消費者目線で精査。節制と何でも自分でやるのがライフスタイル。

ビジネスではない本音ブログで、プラスワンの生活を提案しています。
※本ページはプロモーションが含まれています。

納得いくまで学ぶ。まずは無料説明会に参加

アフィリエイトサイト

ブログやサイトを運営しているなら、やらなきゃ損!会員登録無料、年会費もなし、やった人だけが得をするアフィリエイトに今すぐ参加しよう。

A8.net

A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。

会員登録無料・審査もなし、これを機に思い切ってアフィリエイターデビュー。これから何か新しく始めたい人や副業を考えているならぜひ!

  • 有名ブランドから高額報酬がもらえる広告が掲載できる!
  • PCはもちろん、スマホからも広告作成・発行が可能!
  • もちろん会員登録は無料!その後も費用は一切かかりません!

お申し込みはコチラ↓

A8.net公式サイト
バリューコマースアフィリエイト

大手ECサイトから大手企業案件多数あり。

1,000円から振込みOK、手数料0円ですぐに結果が出る可能性も。セルフバックも充実しているので、普段購入しているものもおトクにゲットできちゃうものもあります。

  • スマホで簡単!「SNS掲載用の広告作成方法」をご紹介
  • Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
  • 成果が出やすい、稼ぎやすい広告や稼げる広告が多数

お申し込みはコチラ↓

VCアフィリエイト公式サイト
もしもアフィリエイト

アフィリエイトの基礎知識から、継続して稼ぐための考え方、手法など、アフィリエイト運営に役立つ「ステップアップガイド」「ステップメール」などご用意。会員登録無料だから初心者の方でも、安心してアフィリエイトが始められます。

  • スマホで簡単!「SNS掲載用の広告作成方法」をご紹介
  • Yahoo!ショッピング、楽天市場、Amazonなど大手企業も
  • 成果が出やすい、稼ぎやすい広告や稼げる広告が多い

お申し込みはコチラ↓

もしもアフィリエイト公式サイト
関連記事
PC(CSS)
preによるソースコードがはみ出す時の修正方法

preタグをきちんと整形をする方法

レスポンシブデザインのpre要素(Hilight.js)が折り返されない、改行されない場合の対処法を解説します。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(HP)
Googleアドセンスを中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

GoogleAdSense
googleアドセンス作業をイメージした画像

Googleアドセンスは稼げる?稼げない?どっち

キャリア10年以上でわかったこと、それは…

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

GoogleAdsense広告を速く表示する

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

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

画像の遅延読み込み実装でサイト表示高速化

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

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

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

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

TOP