2018-01-08 投稿者: pocolog

2018年版ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。

右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は

@media screen and (max-width: 48em),screen and (max-device-width:480px)

でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね～。だから費用対効果のいいところでやめます。(笑)

styles.css

div#container{
	margin-left: auto;
	margin-right: auto; /* コンテンツ全体を画面中心に表示 */
	text-align: left;
	padding: 0px;
}
@media screen and (min-width: 48em),screen and (min-device-width:480px){
	div#container{
		max-width: 1000px; /* PCで見た時の最大幅 */
	}
	div#main{
		float: right; /* メインコンテンツを右に */
		width: 67%;
	}
	div#menu{
		float: left; /* サイドメニューを左に */
		width: 29%;
	}
}
@media screen and (max-width: 48em),screen and (max-device-width:480px){
	div#header{
		font-size: 2.2rem; /* 最近のスマホはフォントサイズが大きいので、PCの2.2倍のfont-sizeを設定 */
	}
	div#main{
		width: 100%; /* 横幅100%表示 */
		float: none; /* 回り込みさせない */
		font-size: 2.2rem; /* 最近のスマホはフォントサイズが小さいので、PCの2.2倍のfont-sizeを設定 */
		line-height: 1.8em;
		margin: 0px; /* 画面いっぱいに表示 */
		padding: 0px;
	}
	div#menu{
		width: 100%;
		float: none;
		font-size: 2.2rem;
		line-height: 1.8em;
		margin: 0px;
		padding: 0px;
	}

index.html

<body>
<div id = "container">
<!-- title -->
<div id = "header">
(省略)
</div>
<div id = "main">
(ここにメインコンテンツを記述)
</div>
<div id = "menu">
(ここにサイドメニューを記述)
</div>

コメントを残すコメントをキャンセル