今日の画面解像度の範囲は、320pxから2560px以上に及びます。ユーザーがウェブサイトを閲覧するのはデスクトップパソコンだけではありません。携帯電話や小型のノートパソコン、タブレット端末を使ってインターネットにアクセスするようになっています。そのため、従来の固定幅のデザインはもはや意味がありません。 ページのレイアウトは、すべての解像度やデバイスに自動的に適応する必要があります。このチュートリアルでは、HTML5 と CSS3 メディアクエリを使用して、クロスブラウザ対応のレスポンシブデザインを作成する方法を紹介します。
まずは例から。
始める前に、最終的なデモがどのように見えるか見てみましょう。ブラウザのサイズを変更し、ビューポートの幅に応じてページレイアウトが自動的にフロートする様子をご覧ください。
その他の例
より多くの例をご覧になりたい場合は、私がメディアクエリを使ってデザインした以下のWordPressご覧ください：tisa、Elemin、Suco、iTheme2、Funki、Minblr、Wumblr。
読み流す
1024pxより広い解像度の場合、ページコンテナの幅は980pxになります。メディアクエリは、ビューポートが980pxより狭い場合、ページレイアウトが固定幅ではなく流動幅になることをチェックするために使用されます。ビューポートが650pxより狭い場合、ページレイアウトはコンテンツコンテナとサイドバーを全幅に拡大し、シングルカラムレイアウトになります。
HTMLコード
HTMLコードの詳細には触れません。これがページレイアウトの全体的な構造です。ヘッダー、コンテンツ、サイドバー、フッターを包むページラップ・コンテナを持っています。
<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のタグを使っています。Internet Explorer 9以下では、etc.などのHTML5で導入された新しい要素をサポートしていません。HTML ドキュメントに Javscript ファイル html5.js を含めることで、IE がこれらの新しい要素を認識できるようになります。
<!--[if lt IE 9]>
<script src="http://..com/svn/trunk/.js"></script>
<![endif]-->
カスケーディングスタイルシート
HTML5 要素をブロック要素にリセット
以下のCSSは、HTML要素をブロック要素にリセットします。
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
主な構造 CSS
今回はまだ詳細は省きます。メイン・コンテナのページラップの幅は980pxで、ヘッダーの高さは160px固定です。コンテナ・コンテンツは幅600pxで左にフロートします。サイドバーは幅280pxで右にフロートします。
#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
#p#
***ステップデモ
メディアクエリはまだ実装されていないことに注意してくださいdemoブラウザのウィンドウサイズを変更してみてください。ページレイアウトがスケールしないことがわかるはずです。
CSS3メディアお照会について
さて、お楽しみのメディアの照会です。
メディアクエリを含むJavaScriptファイル
Internet Explorer 8以前は、CSS3メディアクエリをサポートしていません。css3-mediaqueries.jsというJavascriptファイルを追加することで、メディアクエリに対応させることができます。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-..com/svn/trunk/css3-.js"></script>
<![endif]-->
メディアクエリを含むCSSファイル
メディアクエリ用の新しいスタイルシートを作成します。メディアクエリ仕組みについてはチュートリアルをご覧ください。
<link href="media-queries.css" rel="stylesheet" type="text/css">
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より狭いビューポートのために、別のCSSコレクションを用意しました：
- header = 高さを自動にリセット
- searchform = searchformの位置を上から5px下げます。
- main-nav = 静的な位置にリセット
- site-logo = 静的な位置にリセット
- site-description = 静的な位置にリセット
- content = 幅を自動にリセットし、フロートなし
- 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より小さい
ビューポートの幅が480px未満の場合、以下のCSSが有効になります。
- html = テキストのサイズ変更を無効にします。デフォルトでは、iPhoneは読みやすいようにテキストサイズを拡大します。
-webkit-text-size-adjust: none文字サイズ変更を無効にするには、. - main-nav = フォントサイズを90にリセット%
media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
弾性写真
イメージをフレキシブルにするには、max-width:100%とheight:autoを追加するだけです。イメージにmax-width:100%とheight:autoを追加すると、IE7では動作しますが、IE8では動作しません。これを修正するには、IE8にwidth:auto9を追加する必要があります。
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#p#
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
初期スケーリングのメタタグ
デフォルトでは、iPhoneのSafariはiPhoneの画面に合わせてHTMLページを縮小します。以下のmetaタグは、iPhoneのSafariにデバイスの幅をビューポートの幅として使用するように指示し、最初のスケーリングを無効にします。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
最終デモ
最終的なデモをご覧いただき、ブラウザのウィンドウサイズを変更してメディアクエリの動作をご確認ください。iPhone、iPad、Blackberry、Android携帯でデモにアクセスし、モバイル版がどのように見えるかを確認することもお忘れなく。
概要
- メディアクエリ用のJavascriptの予備：
css3-mediaqueries.jsは、メディアクエリをサポートしていないブラウザでも利用できるようにするために必要です。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-..com/svn/trunk/css3-.js"></script>
<![endif]-->
- CSSメディアクエリー：
アダプティブ・デザインを作成する手段は、ビューポートの幅に基づいてCSSでページのレイアウト構造を書き換えることです。
@media screen and (max-width: 560px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
- 弾力性のある写真：
max-width:100%、height:autoで伸縮性のあるイメージになります。
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
- Webkitフォントサイズ変更：
iPhoneでは<meta name="viewport" content="width=device-width; initial-scale=1.0">
でテキストのリサイズを無効にできます。
html {
-webkit-text-size-adjust: none;
}
- iPhoneのビューポートと初期ズーム比をリセットします：
以下のmetaタグは、iPhoneのビューポートと初期ズーム比をリセットします：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
