WEB/システム/IT技術ブログ

レスポンシブWebのためのCSS構成

最近話題の「レスポンシブ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に対応しています。よかったらいろんなデバイスで見てみてください!

B!

Comment

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives