レスポンシブ・ウェブデザインとは

現在、ホームページを見る環境はiPadのようなタブレットやスマートフォンなど様々なサイズの端末が誕生し、パソコンのモニターだけを対象とするホームページでは見る側に不都合を生じる場面が多くなってきました。

タブレットやスマートフォンは画面を拡大することが出来るので、見えないわけではないですが、それぞれに最適化された画面のほうが便利なのは確かです。

そこで、アクセス者の閲覧環境(=画面サイズを基準にする)によって同じファイルのレイアウトを自動的に変更するデザインが考案され、そのようなホームページを「レスポンシブ・ウェブデザイン」(Responsive Web Design)と呼んでいます。

  • 利点と問題点
    レスポンシブ・ウェブデザインは検索サイトのGoogleにも推奨されています。サイト運営者にとってもメンテナンス性がよいのですが、古いブラウザが新しいCSSの仕様に対応していないという問題もあります。
  • 作成方法
    CSS3から新しく追加されたMedia Queriesを使って条件分岐を記述し、モニターの横幅に応じて読み込むcssを変えて、画面の見え方を変化させます。1枚のHTMLファイルで複数の表示を可能にします。
  • HTML5とCSS3の関係
    HTML5とCSS3はセットではなく別物です。また、CSSはファイル内にバージョンを宣言することはないので、従来のxHTMLで作成したファイルにCSS3のセレクタやプロパティを使用することが可能です。