[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル

Post on:2012年2月9日

Step 1: METAタグ

スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。
まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。

HTML

<head>～</head>に下記を記述します。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

また、IE8をはじめとする古いブラウザはMedia Queriesをサポートしないため、「css3-mediaqueries-js」や「Respond」などのスクリプトでMedia Queriesが機能するようにします。

HTML

<!--&#91;if lt IE 9&#93;>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!&#91;endif&#93;-->

Step 2: HTMLの構造

HTMLの構造はヘッダとフッタ、コンテンツ、サイドバーで、基本的なレイアウトです。
ヘッダは高さが固定180px、コンテンツの幅は600px、サイドバーの幅は300pxです。

デモページ：1200pxで表示

[ad#ad-2]

HTML

<div id="pagewrap">

	<div id="header">
		<h1>Header</h1>
		<p>text</p>
	</div>

	<div id="content">
		<h2>Content</h2>
		<p>text</p>
	</div>

	<div id="sidebar">
		<h3>Sidebar</h3>
		<p>text</p>
	</div>
	
	<div id="footer">
		<h4>Footer</h4>
	</div>

</div>

Step 3: Media Queries

Responsive Web Designのためのテクニック「CSS3 Media Queries」を使ってみましょう。

Media Queriesはユーザーの環境ごとに最適なスタイルシートを設定するもので、ここでは表示サイズごとに異なる最適なレイアウトを提供するようにしてみます。

このチュートリアルでは、3つの表示サイズで設定してみます。

デスクトップ用

980px
タブレット・ノートブック用

700px
スマートフォン用

480px

まずは、ビューポートが980px以下のスタイルシートです。

CSS

幅の単位に「%」を使用し、可変対応にしました。

/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 65%;
	}
	#sidebar {
		width: 30%;
	}
}

980pxで表示すると、下記のようになります。

デモページ：980pxで表示

次に、ビューポートが700px以下のスタイルシートです。

CSS

コンテンツとサイドバーのフロートをなくし、サイズを「auto;」にします。

/* for 700px or less */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	#sidebar {
		width: auto;
		float: none;
	}
}

780pxで表示すると、下記のようになります。

デモページ：700pxで表示

最後に、スマートフォンなど用に480px以下のスタイルシートです。

CSS

ここでは、ヘッダの高さを「auto;」にし、h1要素のフォントサイズを小さくし、サイドバーを非表示にしました。

/* for 480px or less */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
		display: none;
	}
}

480pxで表示すると、下記のようになります。