簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～
- カテゴリー CSS3/スマホサイト制作
スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。
そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。
今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、スマートフォンの3種類のデバイスに対応させる場合のデモソースを用意しましたのでHTML5の新要素の使い方がわからなくてもやりやすいと思います。
CSS3のメディアクエリとは、デバイスのウインドウサイズによってCSSを切り替えることで、1ソースでマルチデバイス対応のサイトを実現します。
HTMLとCSSのみで実現できることからも、フロントエンドのコーディングだけでできる手軽なサイトのスマートフォン対応でもあります。
しかし、スマートフォンに最適化のようなスマートフォンで表示するためだけのサイト制作とは違うため、企画・構成・デザインの上でもそれを考慮した進め方が必要となります。
以前紹介した記事「ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました」と合わせて勉強の参考になればと思います。
CSS3のメディアクエリ（Media Queries）とは？
レスポンシブWebデザインを実装する際に使用するメディアクエリ（Media Queries）は以前のCSS2からある、CSSのデバイスごとの読み込みを割り振るMedia Typeの拡張版です。
CSS2ではmedia=”screen”やmedia=”print”という用にブラウザ上と印刷用のCSSを切り替えていたのと同様の記述方法で、CSS3からはさらにデバイスのウインドウサイズなどによって読み込むCSSを分岐させることが可能になりました。
このCSS3のメディアクエリを使用して、PCのウインドウサイズの場合にはPC用のサイズのCSS、スマートフォンのウインドウサイズの場合にはスマートフォン用のCSSを読み込むように振り分けることで、HTMLはそのままでCSSの分岐させるレスポンシブWebデザインが実装できます。
メディアクエリ（Media Queries）の記述方法
基本的にはブラウザ用のCSSを設定するmedia=”screen”にウインドウの横幅の最大・最小サイズを追加して、media=”screen and (max-width:○○○px)”、media=”screen and (min-width:○○○px)”というような書き方をします。
それぞれ通常のCSSの読み込みと同様に
内のlink要素、CSSの@import、CSSソース内に書くことができます。<head>内のlink要素のCSSに記述する場合
ウインドウサイズが1024px以下の場合にtablet.cssを読み込む
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="tablet.css" />
CSSの@importに記述する場合
@importでウインドウサイズが1024px以下の場合にtablet.cssを読み込む
@import url("tablet.css") screen and (max-width: 1024px)
CSSソース内に記述する場合
CSSのソース内でウインドウサイズが1024px以下の場合にタブレット用のスタイル記述を読み込む
@media screen and (max-width: 1024px){
/* タブレット用のスタイル記述 */
}
メディアクエリ（Media Queries）を使用するためのViewport指定
スマートフォンのブラウザにはViewportという機能があります。
例えばiPhoneでPC用のサイトもスマートフォン用に最適化されたサイトもどちらも同じブラウザで見ることができるのは、このViewport機能によって、デフォルトのウインドウサイズを980pxに設定されているからです。
指定をしていないPCサイトの場合は横幅320pxのiPhoneのウインドウサイズでも980pxのサイズで表示されます。
これにViewport指定を加えることでコンテンツの横幅に合わせた表示をさせることができます。
メディアクエリを使用してレスポンシブWebデザインを制作する際には、デバイスのウインドウサイズの横幅に合わせてCSSを切り替える必要があるため、このViewportをデバイスの横幅であるdevice-widthに指定しておきます。
また、デバイスのウインドウサイズに最適化した表示をするため、ユーザーが表示の拡大・縮小をする必要がないため、user-scalable=noにし、倍率の最大値はデフォルトの1.6ではなくmaximum-scale=1に設定しておきます。
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
サイズの切り替えとレイアウトを考える
メディアクエリとViewportの設定でレスポンシブWebデザインの実装は可能ですが、一番重要となるのはウインドウサイズの分岐です。
どこからどこまでのデバイスのサイズでどのようなレイアウトの見せ方をして、それを切り替えるのか？これはレスポンシブWebデザインを企画～デザイン、制作する上で重要となるポイントです。
しかしこれは、案件や対象端末、サイトのコンセプト、ユーザーのターゲット層などによって、変わると思いますので、今回ここで紹介するサイズの分岐はあくまで一つの提案に過ぎません。
分岐方法の参考として考えていただければと思います。
今回はPC、タブレット、スマートフォンの3つのデバイスのサイズを想定したレスポンシブWebサイト制作の場合で、通常ならば以下のようなウインドウサイズが基準となります。
- PC：横幅1024px以上
- タブレット（iPad）：768px×1024px
- スマートフォン（iPhone）：320px×480px
※ウインドウサイズの基準であって、RetinaディスプレイのiPhone4や新しいiPadでは画像の解像度は倍になります。
しかし、大き目のサイズのAndroid端末や、小さめのタブレットなど、もっと様々なデバイスのサイズを考慮する場合もあります。
今回はタブレットを縦にした場合と横にした場合の768px～1024pxを基準として、それ以上をPC用の表示、それ以下をスマートフォン用の表示として分岐させました。
これは、今回モデルとしたサイトのレイアウトやコンテンツの見せ方から、「PC用の２カラムでサイト情報がひと目で伝わるレイアウト」、「タブレット用にゆったりとした1カラムでタップしやすいレイアウト」、「スマートフォン用に1カラムでスクロールで見やすくタップしやすいレイアウト」という大きな三種類のレイアウトの違いを考え、768px以下のサイズではゆったりとした1カラムのレイアウトよりもスクロールで見やすくタップしやすいレイアウトのほうがコンテンツの収まりがよいと考えたからです。
これは、制作するサイトやクライアントの要望によって様々だと思うので、企画・構成の時点でじっくり考えてみる点だと思います。
実際にレスポンシブWebデザインでサイトを制作してみる
実際に制作した手順に合わせてソースの記述方法を紹介して行きます。
1. viewport設定
ウィンドウサイズをデバイスの幅に揃え、スマートフォンで見た際に縮小拡大はできないようにする。表示倍率の最大値を設定します。
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
2. メディアクエリ（Media Queries）設定
メディアクエリの設定でウインドウサイズに応じて読み込むCSSを切り替える記述を書きます。
PC用のデフォルトのlayout.cssを読み込み、その後からサイズに応じてtablet.css、sp.cssを読み込みます。
<!-- ※デフォルトのスタイル（layout.css）を1024px以上のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" media="screen and (min-width: 1024px)" href="styles/layout.css" /> <!-- ※タブレット用のスタイル（tablet.css）を1024px以下のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="styles/tablet.css" /> <!-- ※スマートフォン用のスタイル（sp.css）を768px以下のウインドウサイズの場合に読み込ませる。 --> <link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="styles/sp.css" />
3．IE6～8に対応するためのjsの設定
メディアクエリをIE6～8に対応させるためIE8以下の場合にrespond.jsを読み込ませます。
<!-- ※3．IE6～8に対応するrespond.jsを入れる。 --> <!--[if It IE 9]> <script src="js/respond.js"></script> <![endif]-->
4．CSSで調整できない部分はHTML上でクラスを使ってCSSで表示・非表示を切り替える
スマートフォン端末での読み込みの要領などを考慮するとあまり多様はしない方が良いですが、今回グローバルナビの画像をPCでのクリックとタブレット・スマートフォンでのタップを考えてどうしても変えたかったので、HTMLで別々のclassを付けてそれぞれのCSSで表示・非表示を切り替えました。
他にも対象端末以外で読み込む画像や解像度を変える方法や便利なjsがあると思いますので、今後勉強して紹介していければと思います。
<!-- ※4．PCの際に表示するグローバルナビに表示・非表示を切り替えるclassをつける。 --> <li class="pc"><a href="#"><img src="images/nav_home.gif" width="159" height="32" alt="HOME" /></a></li> <!-- ※4．タブレットとスマートフォンの際に表示するグローバルナビに表示・非表示を切り替えるclassをつける。 --> <li class="nonpc"><a href="#"><img src="images/nav_home2.gif" width="128" height="38" alt="HOME" /></a></li>
5．タブレットやスマートフォンサイトのCSSの場合ではサイズを％指定にして可変にする
CSSの記述でPCでは固定にしていた部分を、タブレットやスマートフォンサイトの場合には画面の縦と横で切り替わることを考慮し、サイズpxではなくを％指定にして可変にします。
これはレスポンシブWebデザインに限らず、スマートフォンの最適化サイトのコーディングと同様です。
PC用のデフォルトCSSの場合
#contents{
width:920px;
margin:0 auto;
}
スマートフォン用のCSSの場合
@media screen and (max-width: 768px){
#contents{
width:100%;
}
}
実際に制作したサイトのデバイスごとの違いはこちらです。
実際に制作したサイトのソースとデモページは以下になります。
※今回はナビゲーション部分を画像にしておりますのでHTMLにPC用とタブレット/スマートフォン用のナビゲーションを画像としておりますが、テキストで作成して背景画像の設定で設定すればこのようなことをする必要もありません。
■今回のサンプル01：link要素にメディアクエリを指定したレスポンシブWebサイト
しかし、これでは重複した記述があるCSSを3つ読み込んでいるため、最後にCSSのソース内にメディアクエリを指定したスタイルシートを1つ用意し、それだけを読み込むようにしました。
■今回のサンプル02：link要素にメディアクエリを指定したレスポンシブWebサイト
まだ勉強中ですが参考にデータ一式をこちらにアップします。
ここがおかしいなどありましたらコメントいただけますとうれしいです。
●レスポンシブWebサイト初級編サンプルデータ一式ダウンロード
まとめ
レスポンシブWebデザインを使用したサイト制作をする上で重要となるのは、デバイスごとのサイズの分岐とそれによるレイアウトの見せ方です。
今回はまずはメディアクエリを使ったCSSの分岐に焦点を当てたチュートリアルでしたが、デバイスによってスタイルに打ち消しの記述が重複する場合などがあったので、そういった部分をいかに減らしてマルチデバイスでいかにそれぞれ良い見せ方ができるかが、構成・デザインも含めた課題になると思います。
また、今回は紹介できませんでしたが、レスポンシブWebデザインのサイトとしての最適化や、デバイスによって読み込む画像や解像度を切り替えたり、ソースの管理をしやすくするのがコーディング上での課題になると思いますので、今後そういった部分を含めたチュートリアルもご紹介できればと思います。
レスポンシブWEBサイトについては以前の記事もあります。
以前レスポンシブWEBサイトについてのとりあげた記事
ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました
ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました
PCサイトとスマートフォンサイトをどのように扱うか？国内のレスポンシブウェブサイトをまとめました
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法
画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう