ウェブサイトの見づらい横揺れをきっちり修正
スマホやタブレットでウェブサイトを縦スクロールした時、画面の横幅が固定されず左右にグラグラしたり、横にずれるといった横揺れしてしまうサイトの修正方法を解説します。
来訪者の閲覧意欲を低下させ、ウェブサイト運営者のクオリティダウンにつながる横揺れは、早急に対処が必要です。
スクロールしたらグラグラ、揺れたり横に少しスクロールしちゃう…。そんなウェブサイトの横揺れの原因は、画面をはみ出して表示される要素があるために起こります。
何もはみ出してるようには見えないけれど、目に見えない部分がはみ出しているのが厄介なところ。それらを突き止める必要がありますが、凝ったウェブサイトほど発見するのは手強いものです。
そこでまずはみ出している要素を見つけるために、横幅の設定について再確認してみます。
例えばレスポンシブデザインで、デバイス画面横幅いっぱいに表示したいとします。
<!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%に設定したのにも関わらず画面サイズを超え、はみ出してしまっています。
図1だとcontent areaはデバイス画面横幅に収まっているので、paddingに色がついていない場合はハミ出してしまっていることに気づかない可能性があります。
デフォルトでwidthは、paddingとborderを含まないことに注意が必要です。さらにborderについては、線幅を%(パーセント)で指定できないためメディアサイズごとに計算する必要が出てしまいます。
∴要素の横幅=content area+padding+border
レスポンシブデザインが当たり前となり、全メディアサイズで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}
サンプルでは余白をみましたが、個人的に左右のマージンやパディングは0にし、親要素のパディングで調整するのがオススメの設定です。
枠線(border)使用時はbox-sizingプロパティにborder-boxを指定しておき、横揺れをきっちり予防する。とにかくborder-boxしとけばOKですね。
つまり全称セレクタ(*)への指定で解決です。
*{box-sizing:border-box}
横幅の設定を見直しても「横揺れ」が直らない場合、overflowの設定で強制的に隠し、横スクロールさせないことで強制的に修正できます。
html {
overflow-x: hidden;
overflow-y: scroll; -webkit-overflow-scrolling: touch
}
bodyに指定した場合、横スクロールバーが出たままで横揺れしたので、htmlに指定します。
ひとまず横揺れは修正できたかと思いますが、将来的にはみ出している要素はきっちり修正したいものです。以上、スマホタブレット画面の横揺れ修正レポをお送りしました( ´ ▽ ` )ノ。
ブログやサイトを運営しているなら、やらなきゃ損!会員登録無料、年会費もなし、やった人だけが得をするアフィリエイトに今すぐ参加しよう。
A8.netは会員数、広告主数ともに最大規模を誇るアフィリエイトサービス。
会員登録無料・審査もなし、これを機に思い切ってアフィリエイターデビュー。これから何か新しく始めたい人や副業を考えているならぜひ!
お申し込みはコチラ↓
A8.net公式サイト大手ECサイトから大手企業案件多数あり。
1,000円から振込みOK、手数料0円ですぐに結果が出る可能性も。セルフバックも充実しているので、普段購入しているものもおトクにゲットできちゃうものもあります。
お申し込みはコチラ↓
VCアフィリエイト公式サイトアフィリエイトの基礎知識から、継続して稼ぐための考え方、手法など、アフィリエイト運営に役立つ「ステップアップガイド」「ステップメール」などご用意。会員登録無料だから初心者の方でも、安心してアフィリエイトが始められます。
お申し込みはコチラ↓
もしもアフィリエイト公式サイト