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