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

Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。

サイトのキャプチャ

Responsive Design in 3 Steps

下記は各ポイントを意訳したものです。

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で表示

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で表示すると、下記のようになります。

デモのキャプチャ

デモページ:480pxで表示

このチュートリアルでは3つのMedia Queriesだけですが、サイズの設定は増やすことも減らすこともできます。
Media Queriesの目的は、指定したビューポートのサイズに合わせて最適なレイアウトを提供するため、異なるスタイルシートを設定することです。

さらに実践的な使い方を学びたい人に

このチュートリアルはResponsive Web Designの基本を理解できることを意図したものです。
もっと多くの詳細なチュートリアルが必要であれば、以前のチュートリアルもチェックしてください。

top of page

©2017 coliss