[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル

Post on:2011年5月30日

iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。

サイトのキャプチャ

Adaptive & Mobile Design with CSS3 Media Queries

[ad#ad-2]

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

デモページの確認

チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。
このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。

デモのキャプチャ

デモページ
左から、ノーマル、ナロウ、スマフォ時のレイアウト

ページは、1024pxより広いサイズの場合には980pxで最適化されるように設定しています。980pxより狭い場合は幅は流動的になり、さらに650pxより狭い場合は1カラムのレイアウトになります。

デモのキャプチャ

デモページ：ノーマル時のレイアウト（1024px以上）

デモのキャプチャ

デモページ：ナロウ時のレイアウト（980px未満）

デモのキャプチャ

デモページ：スマフォ時のレイアウト（650px未満）

HTML

HTML：基本構成

ページは、header, content, sidebar, footer で構成されています。

<div id="pagewrap">

	<header id="header">
		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>
		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>
		<form id="searchform">
			<input type="search">
		</form>
	</header>

	<div id="content">
		<article class="post">
			blog post
		</article>
	</div>

	<aside id="sidebar">
		<section class="widget">
			 widget
		</section>
	</aside>

	<footer id="footer">
		footer
	</footer>

</div>

HTML5.js

デモページはHTML5で実装されています。HTML5の新しい要素は、<header>, <article>, <footer>, <figure> などです。
IEの古いバージョンではサポートしていないため、「html5.js」を使用して、認識するようにします。

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

CSS

HTML5への対応

HTML5の各要素をブロック要素として、リセットします。

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

CSS：メインの構造

メインとなる「pagewrap」の幅は、980pxです。headerの高さは160pxに固定し、contentはフロートさせ幅を600pxに固定し、sidebarもフロートさせ幅を280pxに固定します。

#pagewrap {
	width: 980px;
	margin: 0 auto;
}
#header {
	height: 160px;
}
#content {
	width: 600px;
	float: left;
}
#sidebar {
	width: 280px;
	float: right;
}
#footer {
	clear: both;
}

ここまでのデモページは、下記のようになります。
これはまだビューポートのサイズを変更しても、レイアウトは変更されません。

デモのキャプチャ

デモページ：Step 1

Media Queries

いよいよ、Media Queriesを実装します。

まずは、Media Queriesをサポートしていないブラウザ（IE8以前）のために、JavaScirptファイル「css3-mediaqueries.js」を加え、利用できるようにします。

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

Media Queries用のスタイルシートファイル

Media Queries用に新しいスタイルシートファイルを作成し、外部ファイルとして指定します。
このファイルにMedia Queries用のスタイルシートを記述します。

<link href="media-queries.css" rel="stylesheet" type="text/css">

980pxより小さいビューポートの場合

ビューポートが980pxより狭い場合、下記のようにします。

  • pagewrap: 幅を95%に
  • content: 幅を60%に
  • sidebar: 幅を30%に
@media screen and (max-width: 980px) {

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

650pxより小さいビューポートの場合

ビューポートが650pxより狭い場合、下記のようにします。

  • header: 高さをautoに
  • searchform: ポジションを5px上に
  • main-nav: ポジションをスタティックに
  • site-logo: ポジションをスタティックに
  • site-description: ポジションをスタティックに
  • content: 幅をautoにし、フロートを取り除く
  • sidebar: 幅を100%にし、フロートを取り除く
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

480pxより小さいビューポートの場合

iPhoneなどビューポートが480pxより狭い場合、下記のようにします。

  • テキストサイズの自動調整をオフに
  • main-nav: フォントサイズを90%に

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

画像の最適化

画像をフレキシブルにするために、「max-width:100%;」と「height:auto;」を加えます。
これはIE7でも機能しますが、IE8ではバグがあるため機能しません。IE8用には「width: auto\9;」を使用します。

img {
	max-width: 100%;
	height: auto;
	width: auto; /* ie8 */
}

動画埋め込みの最適化

動画を埋め込む際には、画像と同様のトリックを使います。
ただし、原因は不明ですが「max-width:100%;」がSafariでは機能しません。そのため、ここでは「width:100%;」を使用します。

.video embed,
.video object,
.video iframe {
	width: 100%;
	height: auto;
}

スケールメタタグ

デフォルトで、iPhoneはHTMLページをiPhoneのスクリーンにフィットさせて表示します。これは次のメタタグを使うことで、デバイスの幅をビューポートの幅として使用し、スケールを中止する宣言です。

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

完成したデモの確認

完成したデモページを改めて確認してみてください。
また、iPhone, Androidなどのスマートフォン、iPadなどでもチェックしてみてください。

デモのキャプチャ

デモページ

[ad#ad-2]

sponsors

top of page

©2024 coliss