• twitter
  • Facebook
  • はてなブックマーク
2012年02月22日(水)

[CSS3] Responsive WEBデザイン

次世代端末スマートフォンに対応するべく、レスポンシブルWEBデザインについてメモしておきます。jQueryMobileやiUIなどのAjaxフレームワークと組み合わせつつ、CMSで管理されたサイトのデザインをiPhone等に最適化する時に便利だと思います。ResponsiveWebDesignは、Webサイトを閲覧しているmedia(端末)によって適用するCSSを変更しようというもので、W3CのMediaQueriesに使い方が掲載されています。PCブラウザの横幅サイズを変更しながらサイトを見てみると、レスポンシブルウェブデザインで記述されたサイトは、表示幅によってレイアウトが変化します。
PCモニターと、スマートフォン向け端末解像度メモ
モニター種別比率画面サイズ解像度
PC(フルHD)16:91920×108096dpi
PC(旧式XGA)4:31024×76898dpi
ノートPC(HD)16:91366×768100dpi
iPad(XGA)3:4768×1024132ppi
iPhone3(HalfVGA)3:2480×320163dpi
iPhone43:2960×640326dpi
携帯電話(QVGA)3:4240×32096dpi

※サイズは一般的なものを目安にしています。

デバイス単位でのスタイルシート設定

CSS3で設定可能になった、MediaQueriesを使ってスタイルシートの読み込みを設定していきます。閲覧デバイスの横幅、解像度、アスペクト比による指定など様々な方法が設定できますが、「device-width」(閲覧デバイスの横幅)による分岐が一般的のようです。

デザインを考える前に、コーディングについて考えておきます。最初からWordPressテーマに対応したコーディングやSEO対策をしようとすると、metaタグなどがゴチャゴチャしてわかり難くなるので、後から考える事にします。まずは、ベースとなるブロックの配置と、画像などのレイアウトだけを考えて、ベースデザインを作っていきます。

ポイント
  • テーブルタグは出来るだけ使わない
  • ブロックサイズの横幅が変更されても縦に配置できるように、position:’fixed’は出来るだけ指定しない
  • グリッドレイアウトと、リキッドレイアウトを組み合わせる
  • プレコーディングする

1.グリッドレイアウトで大まかなサイズを配置

responsible web design
一応こんなかんじでロゴ、バナー、画像などは240px縮小時に合わせやすいサイズ、ブロック要素はサイドバーと記事表示エリアが縦配置しやすいレイアウトにしてみました。Excelなどのセルを並べたような分割レイアウトになっています。むしろExcelでやってみてもいいと思います。適当にマージンが入ってるだけなので、表示エリア自体は240px内におさまるイメージです。(携帯電話でもマージンをとったレイアウトをする場合は、携帯電話のみの対応をした方が早いと思います)

2.リキッドレイアウトで配置するレイアウトを決める

リキッドレイアウトで配置

特に記事表示エリアなどに関してですが、中央の「サムネイルと記事」を組み合わせる箇所や、ナビゲーションに関しては、縦配置して表示できるようにイメージしておきます。コーディングの際は<ul>タグなどでリストにしておいて、横幅が100%、縦に並べるようなデザインになったらどうなるか?をイメージしておきます。

3.コーディング作業

おおまかなイメージが固まってたのでプレコーディングしてみます。ブロックサイズや表示レイアウトが決まっていると、縦に配置するか?横に配置するか?の違いだけで対応できるようになると思います。jQueryMobileは基本的に、<div><ul>タグへの「data属性値の追加」で使う事ができるため、jQueryMobile拡張なども簡単です。

ブロックからはみ出すようなデザイン(このブログでいうと「feedback」リンク用に設置した葉っぱのところ)などは、CSS Spriteなどの背景画像を利用したリンクボタンの作成方法でも対応できると思います。ベースとなるデザインは、ブロック幅におさまるようにレイアウトし、はみ出すような特殊な部分だけそれぞれの端末に合わせた形でコーディングしていくといくと、汎用化されたスタイルシートの使いまわしが出来ます。

プレコーディングは、HTML5でのブロック記述と、viewportの設定を行った後、リセット用スタイルシートとMediaQueryによるスタイルシートを読み込ませていきます。後からInternetExplorer用にHTML5/CSS3を対応させるためのjavascript等も追加しつつ、やっとWordPressなどでの作業に入ります。

ちなみに、WordPressには$is_iphoneなどのユーザーエージェントを判定してくれるグローバル変数があるため、端末単位で表示したくないコンテンツなどには、if文による分岐処理を行う事もできます。

viewportの設定
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
基本的なHTML5での記述
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <header>
  8. <div id="global-header"></div>
  9. </header>
  10. <article>
  11. <div id="main-content">
  12. <!--この中にサイドバーや記事のレイアウトを記述-->
  13. </div>
  14. </article>
  15. <footer>
  16. <div id="global-footer></div>
  17. </footer>
  18. </body>
  19. </html>
MediaQueryによるスタイルシートの読み込み
  1. <link href="mobile.css" media="screen and (max-width:480px)" />

関連投稿記事

Comment: