最近話題の「レスポンシブWeb」。
近年、スマートフォンの普及が加速して、Webの世界でもスマフォ最適化の必要性が叫ばれています。
そんな中、PCサイトとは別でスマホサイトを立ち上げる話はよくありますが、それよりも一歩先を見据えた考え方がレスポンシブWebです。
レスポンシブWebでは、PCやフマフォといった各端末において、HTMLソース1つで最適なインターフェースを提供するという考えがベースとなっています。（正確にはあらゆる画面サイズに対応する考え）
具体的には、まず画面サイズを取得して、画面の横幅に応じてスタイルを切り替える事で、さまざまなな端末に対してWebサイトを最適表示します。
説明するよりも実際に画を見てみると分かりやすいでしょう。以下のサイトでレスポンシブWebのサイトがまとめられています。
Media Queries
日本国内のサイトでは、まだあまり見かけませんが、海外のサイトではその例が着実に増えているようです。
CSSで画面サイズに応じてスタイルを切り替える
例えば、h1タグのフォントサイズを、デバイスの画面横幅が500pxを境に変更する場合には、以下のように記述します。
h1{
font-size: 16px;
}
@media screen and (max-width: 500px){
h1{
font-size: 14px;
}
}
@media screen and (max-width: 300px){
h1{
font-size: 10px;
}
}
デフォルトでフォントサイズを16pxと指定していますが、画面サイズの横幅が500px以下になった場合、フォントサイズが14pxに上書きされます。さらに、300px以下になった場合に10pxに上書きされます。
この時、HTMLは書き換える必要がありません。レスポンシブWebは基本的にCSSのみで対応します。
レスポンシブWebサイト構築フローについて
レスポンシブWebサイトを構築するにあたり、まずはそれに対応したデザインが重要になります。
レスポンシブWebでは基本的に各要素の構成は変わりませんが、画面サイズに応じて見え方が変わります。そのイメージがある程度デザインで固まっている必要があります。
つまり、逆に普段通りになんでもかんでも好きにデザインしてしまうと、いざそれにレスポンシブWebを適用しようとすると無理がでてしまうということです。
ここでデザイン手法について具体的には触れませんが、デザイナに事前のその知識は備わっていた方がよいでしょう。（私にはデザインの知識はないので、あまり言えませんが。。。）
次にコーディングについてですが、ベースにPCサイト、または、スマフォサイトを構築します。
先ほどのサンプルでは、通常の手順でPCサイトを構築し、その後に、画面が小さくなるにつれて「max-width: xxxpx」としてスタイルを上書きして実装します。
逆に、小さい画面（スマフォなど）から構築する場合は、画面が大きくなるにつれて「min-width: xxxpx」を指定し、スタイルを上書きしていきます。
では、実際にはスタイルを切り替えるタイミングとなる「xxxpx」の「xxx」の部分は、最適値があるのでしょうか。
スタイルを切り替える最適な横幅
スタイルを切り替える最適な横幅についてですが、現在、決定的なものはありません。
今の世の中、スマフォ、タブレット、PCなどデバイスの画面サイズは多種多様で、その定義は困難です。逆に、構築するサイトによって、そのデザインとサイトの目的はさまざまなので、その場面に応じて議論し、柔軟に設定するべきでしょう。
ただ、一つに例として、レスポンシブWebの技術的な記事をいくつか見渡してみると、1024px、768px、480pxという仕切りの例が多いようです。
さしあたり、以下のような区分でしょうか。
| ～480px | スマートフォンなど |
|---|---|
| 480px～768px | タブレットなど |
| 768px～1024px | タブレット、モバイルPC、デスクトップPCなど |
| 1024px～ | デスクトップPC、テレビなど |
これを実際にCSSで書くと、以下のようになります。
h1{
/* オールデバイスのためのベーススタイル */
}
@media screen and (max-width: 1024px){
h1{
/* タブレットやモバイルPC用 */
}
}
@media screen and (max-width: 768px){
h1{
/* タブレット用 */
}
}
@media screen and (max-width: 480px){
h1{
/* スマフォ用 */
}
}
対応ブラウザ
今回スタイルに使用した「@media screen and」というメディアクエリの記述についてですが、対応するブラウザは限られています。
最新のFirefox、Google Chrome、Safariでは問題なく利用できます。IEでは、IE9以上で有効なようです。
つまり、IE8、IE7、IE6では対応していません。
ただ、JavaScriptのよる救済措置があるようです。
css3-mediaqueries-js
こちらで公開されているライブラリを読み込むことで、IE8でも「media queries」が有効になるようです。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
まあIE8でレスポンシブサイトを閲覧する、ということもイメージしにくいですが。。。
※練習までに、このブログも徐々にではありますがレスポンシブWebに対応しています。よかったらいろんなデバイスで見てみてください！