レスポンシブwebデザインについて

Media Queriesを利用する

• CSS3「Media Queries」ex.スクリーンサイズ、デバイスの解像度に応じて、CSSを使い分ける。
• 今まではMedia Type→ media="screen"や media="print" の拡張として利用されている。
• 但しユーザーエージェントによって振り分け（.htaccess や Javascriptを使って）するわけではない。
• ブラウザサイズによって相対的に幅が可変するリキッドレイアウトで構築。
  コンテナなどのボックス、マージンやパディング、画像の幅、ポジションの値など、基本的には %で指定して可変する必要あり
  ※可変にしないとボックスからはみ出してしまう。

Media Queriesの書き方

• 【link要素のmedia属性】
  
• 【@import】
  @import url("tablet.css") screen and (min-width:480px) and (max-width: 768px)
• ウインドウサイズが480px?768pxの場合にtablet.cssを読み込む
• 【@media】
  @media screen and (min-width:480px) and (max-width: 768px){/* style */}

スマートフォン対策

• viewportの設定がかけられている ex.iPhoneのviewportのデフォルト値は980px
  以下の記述で等倍表示に設定しなおす
  
• viewportの設定変更でiPhone などのスマートフォンの width をコントロールできる（しないと擬似的な横幅になってしまう）
• 縦表示から横にすると拡大されて表示される（拡大したくない場合はmaximum-scale=1.0指定）

対応ブラウザ

• Safari 3 系
• Opera 9 系
• Firefox 3 系以降

IE対策

• IEでMediaQueryを使用できるようにするcss3-mediaqueries.js or respond.jsの追加
• IE 7以下で縮小された画像が粗く見える問題を解決するimgSizer.jsを追加
• IEでもCSS3を使う場合 IE-CSS3.htc or ie-css3.jsを追加

結論

• 同じHTMLで実現できる→制作工数が減る。更新や運用が楽。
• 非表示部分の読み込んでしまうため表示が遅くなる可能性（画像をサーバに読みにいってしまう）
• モバイルの通信速度を考えて情報量（ファイル容量）を出来るだけ小さくしてやる必要あり → 大規模サイトには不向き?

参考：
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
http://line25.com/articles/showcase-of-outstanding-responsive-web-designs

レスポンシブWebデザインで使えそうなテーブル実装例(2012.06追記)

ドロップダウンでカラムの表示・非表示を選択

ドロップダウンメニューを実装して、カラムの表示・非表示をチェックボックスでコントロールできるようになっています。
幅の広いスクリーンではすべてのカラムを表示。スクリーンが狭くなるとJavaScriptで段階的にカラムが隠されます。

• カラムの優先順位を決める必要あり
• ドロップダウンでカラムの表示・非表示がコントロール出来ることを、いかに分かりやすくユーザに明示するか

テーブルの隠れた部分を横スクロール

右側のカラムが横スクロールできます

• 横にスクロールできることをユーザにいかに分かりやすく示せるか
• Android 2.3は動かない

要素ごとにテーブルを分ける

• 横スクロールのは無くなるが、縦スクロールが手間になってしまう。
• データの比較が難しい

一定幅以下はリンクを設け、テーブルのみ表示させる

親コンテンツの横スクロール発生を避けることができる

背景色で振り分ける

親コンテンツの横スクロール発生を避けることができる

• 格子構造から急にレイアウトが変わるため混乱する可能性あり

参考：
http://parashuto.com/rriver/responsive-web/two-examples-of-responsive-tables