こもりまさあき著「レスポンシブ・ウェブデザイン標準ガイド」

  • 投稿日:
  • カテゴリ:
ひとつのコンテンツを、CSS3のスタイルシートだけで、PC用、タブレット用、スマートフォン用と自動的にデザインを切替えて出力するのが、レスポンシブWebデザインという手法で、WordPressの標準テンプレートなども、この仕様になっています。

そこで、実際に作ってみようとする時、参考になるのが、ストレートなタイトルの、こもりまさあき著「レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法」(MdN社刊) です。

HTMLとスタイルシートでWebページを作成している方なら、すぐに理解でき、参考になるかと思います。画像や動画、Mapの扱い、ツールなど実例多数。

ただ、サンプルのソースのフォントサイズは、老眼にはちと厳しいです。が、出版社サイトでダウンロードが可能です。


CSS3の仕様の中に、JavaScriptのように、ブウラザのサイズに合わせて、適用させるスタイルを切替える機能(Media Queries)がつき、最近のブラウザが、それに対応してる事で実現できた技法ですが、例によってIE8以下では、対応していないところもあり、その対策についても書かれています。

一番、参考になったのは、まずシンプルなスマホ用のレイアウトから始め、徐々に大きいサイズのデザインを考えていく、という基本線。

他の例では、逆の順番でやっているケースも多いようですが、実際試してみると、その理由が納得できます。ただ、コンテンツ・テンコ盛りを要求しがちなクライアントの理解を得るのは、大変かもしれません。


尚、「あらゆるデバイスに対応する」とはいっても、当然、デバイス側のブラウザがCSS3に対応していないといけません。PCのIEについては、ある程度対応できるので大枠は、いけそうです。

しかし、古いフューチャーフォンの場合は、PHPやPerlなどサーバー側で対応する、従来の手法が必要になります。旧ケータイ用のページが必要な場合は、この本だけでは十分ではありませんので、念のため。

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法