レスポンシブWebデザインに挑戦

レスポンシブWebデザインを知ったのは2011年秋ごろ、WordBench埼玉での勉強会だ。それまでは通常のテーマの他に、携帯向けにはKtai Style、スマホ向けにはWPTouchというプラグインを使用して表示を切り替える手法を取っていた。WordPressとしてはスタンダードといえども、デバイス別に3種類のテーマを作成する必要がありメンテナンスがおっくうになりがちだ。プラグイン独自の仕様や相性に泣かされることもあった(英語が分からないだけだけど・・・)
レスポンシブWebの考えをWordPressに取り入れれば、ひとつのPC用テーマで複数デバイスへの対応が可能になる。WordPressでは最新テーマ「TwentyEleven」が対応しているという。表示幅をどんなに変えようとも、コンテンツは常に画面内にきれいに流し込まれ読みやすい。そういうことだったのか！とすぐに飛びついたものの、テーマとして完成させるには半年ほどかかってしまった。

Media Queries
レスポンシブWebを実現するにはCSS3でMedia Queries という手法を使う。完成形のCSSを定義した後に、画面幅が一定ピクセル以下になったらカラムを減らしたり、余白や文字を小さくしたりと、HTMLを変更しないままCSSだけで段階的に適応していく。具体的には公式テーマの「TwentyEleven」の動作やコードを観察するのがよい。

IE対応
IE8以下ではMedia Queriesが使えない。その場合でも以下のJavaScriptライブラリを使うとよい。なんとIE6まで対応できてしまう。
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>


スマホ対応
レスポンシブWebなテーマが完成したので本ブログに適用した。さっそくスマホから確認してみると、なんということかPCとあまり変わらない表示！？わざわざ幅1000px、800px、650px、450pxと4段階も対応したというのにトホホ・・・。Twenty Elevenとの違いをチェックにかかったところ、HTMLのhead内に記述忘れがあった。レスポンシブとかいう前にこれ重要！
<meta name="viewport" content="width=device-width" />

晴れて、PCから見てもスマホから見ても(たぶんiPadも？)いいかんじ！