HTML5でサイト構築するためのテンプレートを瞬時に作成できるInitializrというサービスがあります。
Initializrでは、まずはじめに以下の3つのテンプレートから一つを選択します。
- Classic H5BP
- HTML5 Boilerplateを使ったプレーンなHTML5テンプレート。
- Responsive
- Initializrを作ったJonathan Verrecchia氏が作成したレスポンシブなHTML5テンプレート。
- Bootstrap
- Twiiter Bootstrapを使ったHTML5テンプレート。
今回は、このうちの「Responsive」、つまり「レスポンシブなテンプレート」について制作者のJonathan Verrecchia氏が記した下記のドキュメントの一部を要約してみました。
例によってかなり意訳・超訳してます。また、大意の把握に主眼を置いたので、原文の一部を割とざっくりと省いています。正確な内容を知りたい方は、上記リンクから原文を読んでください。
Initializr：すごいレスポンシビティがすごいテンプレートとともにやってきた！
横幅をパーセント指定した流動的なレイアウト
まず必要なのは「流動的」なレイアウト。文字列がその領域幅いっぱいに展開し、ウィンドウがリサイズされてもバランスが保たれてるのが「流動的」なレイアウトです。これを実現するには、要素の幅や左右のパディング・マージンの値はパーセント指定のみを使い、ハードコードされた静的な数値排除する必要があります。
#this-is-a-fluid-container{
width:50%;
padding: 20px 10%;
margin:0 10%;
}
この方法を厳格に守れば、スマートフォンの小さな画面からデスクトップの巨大な画面までを完璧にカバーできます。それだけでも充分素晴らしいんですが、全デバイスで同じレイアウトを表示してたのではまだまだ理想的ではありません。というわけで、次はメディアクエリを使ってその部分を解決します。
モバイル対応を第一としたメディアクエリ
メディアクエリを使うと、特定の画面解像度や画面方向などを指定して、デバイスごとに異なるスタイルを適用させることができます。まずは一番解像度の低いモバイル端末にターゲットして作業を始めて、より広い画面への対応については後から拡張していきます。
「モバイル」表示
まずこれは単純にレスポンシブテンプレートをモバイル端末で表示したイメージです。メディアクエリはまだ使っていません。
オレンジ色のaside要素の領域はページの下部にあります。
- メモ：
- aside要素には「side（横）」という単語が含まれてますが、あくまで「メインのコンテンツと関係している要素」という意味なので、別に位置が他の要素の横ではなく、本文領域の下にあっても全く問題ありません。
「中間」表示
このページをこのままタブレット端末などの画面の広い端末で表示させた場合、縦に並んでいるナビゲーションメニューのボタンが横に広がりすぎて見た目が悪くなります。そこでメディアクエリを使い、横幅480ピクセル以上の画面ではメニューが横並びになるように設定します。
@media only screen and (min-width: 480px) {
nav a{
float:left;
width:27%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
}
するとこのようになります。
「ワイド」表示
これでタブレット端末での使い勝手は良くなったけど、ノートPCでアクセスした時はどうでしょう？画面はもっと広くなるので、こうなると1カラムのレイアウトは最適ではなくなります。2カラムのレイアウトにして、aside領域やナビゲーションメニューはページの右側に、コンテンツ領域は左側に配置してみます。今度は横幅768ピクセル以上の解像度用に、さらにメディアクエリを追加します。
@media only screen and (min-width: 768px) {
#title{
float:left;
}
nav{
float:right;
width:38%;
}
#main article{
float:left;
width:57%;
}
#main aside{
float:right;
width:38%;
}
}
これはおよそ横幅900ピクセルの画面で表示したイメージです。
これで2カラム構成の「デスクトップ用表示」ができました。モバイル版から手を付けるのもさほど難しくはないですよね。このやり方、初めのうちは直感的じゃなくて戸惑うかもしれないけど、すぐに慣れますよ。
- メモ：
- このバージョンではシャドウ効果の場所が増えてます。シャドウのようなCSS3効果はCPUパワーを使うので、携帯端末などの低スペックなデバイスには不向きです。本バージョンくらいの画面解像度だとノートPCかデスクトップPCのようなよりパワフルなデバイスが想定されるので、効果を増やしています。
「最大幅」表示
最後はワイド画面に適した表示について。今のままの状態のページをワイド画面のPCで表示すると、5行分くらいのテキストがひどく横長の1行のテキストとして表示されたりして、ものすごく読みづらくなります。これを防ぐためにも、横幅の最大値を設定する必要があります。この最大値については、960ピクセル、1140ピクセル、2000ピクセルなど、個々のサイトのデザインに合わせて自由に設定していいと思います。
今回は1140ピクセルに設定しています。最も一般的な横幅1280ピクセルの解像度を基準にしました。お馴染みの固定の横幅にマージンをautoに設定する方法で対応します。
@media only screen and (min-width: 1140px) {
.wrapper{
width:1026px; /* 1140px - 10% for margins */
margin:0 auto;
}
}
その他のバージョンのレイアウトで、ラッパーのマージンを10%に設定していたので、1140ピクセルから10%を引いた1026ピクセルをラッパー要素の横幅として設定しています。こうして、ブラウザをリサイズすると、シームレスにレイアウトが変更されるようになりました。最大幅状態での表示はこのようになります。
これでメディアクエリについての説明は終わり！
