div等のwidthを修正

viewportタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)を使用時、スマートフォン用の一般的な画面幅(320px)を超える要素があると、スマホで表示できる画面幅を超えてしまい、ピンチイン(スマホの画面を縮小して表示する為の指の操作)しないと見にくい表示になってしまいます。また、「モバイルフレンドリーテスト」でも、「コンテンツの幅が画面の幅を超えています」と警告されます。

その原因は、「width:960px」のように「px」単位で幅を指定してあるdivなどの要素。これらは、全て「%」単位に変更しましょう。

スマホの画面幅をはみだした表示

【HTML】

<div id="contents">メインコンテンツ</div>

【CSS】

#contents {
	width:960px;
}

#contents {
	width:100%;
}

また、div要素は、floatで寄せて使っていることが多いと思いますが、画面の幅が狭いスマートフォン用のページでは扱いにくい為、floatタグは削除して、下記のような縦に表示する方法に切り替えましょう。

floatを使ったレイアウト

【HTML】

<div id="contents">
	<div id="cont_left">メインコンテンツ</div>
	<div id="cont_right">サイドメニュー</div>
</div>

【CSS】

#contents {
	width:960px;
}
#cont_left {
	width:600px;
	float:left;
}
#cont_right {
	width:360px;
	float:right;
}

#contents {
	width:100%;
}
#cont_left {
	width:100%;
}
#cont_right {
	width:100%;
}
スポンサードリンク