マサのWeb玉手箱　>>　プロフィール　気まぐれ日記

学級日誌番外 （ホームページ作成ノウハウ集）

>>> 学級日誌番外トップ

２０．レスポンシブWebデザイン（マルチスクリーン対応） （2014年11月2日）

◎環境
・特に指定なし
◎解説
スマートフォンやタブレット端末用にWebサイトを構築する方法の内、1つのソース（HTML）で複数のデバイスに対応する制作手法のことをレスポンシブWebデザインと言う。簡単に言うと、画面サイズを基準にしてCSSによりサイトの切り替えを行うテクニックである。書籍などでは、HTML5＋CSS3を例に説明しているものも多いが、この「マサのWeb玉手箱」のようにXHTML＋CSS3による実現も可能である。以下に、レスポンシブWebデザインの要点を示す。
※「マサのWeb玉手箱」がHTML5を採用しなかった理由は、2014年時点でのHTML5の普及率とXHTMLからHTML5に移行することによる作業時間の増加です。

（１） viewportの設定
viewportとはPCで言うブラウザのウインドウサイズのことである。iPhoneのviewportの初期値は980pxなので、viewportを設定をしないと980pxの画面サイズでアクセスしていると捉えられてしまい、スマートフォン用のCSSが適応されない。そこで、レスポンシブwebデザインでスマートフォンに対応させるためには、viewportをデバイスの横幅に設定する。 
          <meta name="viewport" content="width=device-width" />

（２） リセットCSSの設定
全てのブラウザで同一のデザインを表示するために、各ブラウザが持っているデフォルトスタイルを初期化する必要がある。リセットCSSは、ネット上にも多く配布されているので、そちらを利用することが望ましい。
今回利用したリセットCSS：http://meyerweb.com/eric/tools/css/reset/ 
          <link href="reset.css" rel="stylesheet" type="text/css" />

（３） IE8以下でCSS3を使用可能にする
IE8以下のブラウザはCSS3に未対応であるため、レスポンシブWebデザインで必須となるメディアクエリが使用できない。そこで、IE8以下のブラウザでCSS3を利用するためのライブラリを読み込む必要がある。
今回利用したライブラリ：https://github.com/scottjehl/Respond/ 
          <!--[if lt IE 9]>
          <script src="respond.js"></script>
          <![endif]-->

（４） メディアクエリ（Media Queries）の実装
メディアクエリは、「ウインドウの幅」「画像解像度」「デバイスの向き」などを条件として、スタイルを切り替えることができるCSS3の機能である。レスポンシブWebデザインでは、メディアクエリを利用してデバイス（画面サイズ）ごとに適用するスタイルを切り替える。 
          ここにスマホ向けのスタイルシートを記述：画面サイズ760px未満
          
          @media only screen and (min-width: 760px) {
          　ここにPC,タブレット向けのスタイルシートを記述：画面サイズ760px以上1024px未満
          }
          
          @media only screen and (min-width: 1024px) {
          　ここにPC向け固定レイアウトのスタイルシートを記述：画面サイズ1024px以上
          }

（５） フルードグリッド（Fluid Grid）の実装
フルードグリッドとは、任意のグリッド（格子状の区切り）に要素を当てはめていく「グリッドデザイン」と、要素を可変にレイアウトする「リキッドレイアウト（可変レイアウト）」を組み合わせたもので、画面の横幅が変わってもバランスを一定に保ったままレイアウトを調整する方法である。最初はグリッドデザインにより要素をpx単位で配置し、レイアウトが整ったあとに値を%に変換してフルードデザインに変更する。 
          #main {
          	width: 70%;
          }
          #side {
          	width: 30%;
          }

（６） フルードイメージ（Fluid Image）の実装
フルードイメージとは、画像を画面サイズに合わせて拡大・縮小する手法のことである。フルードイメージとフルードグリッドを組み合わせると、画像を含むページ内の全ての要素を画面サイズに合わせて調整することが出来る。 
          img {
            max-width: 100%;
            height: auto;
          }

レスポンシブWebデザインのメリット／デメリット


【メリット】
  • 1つのHTMLファイルで対応可能
  • サイトのURLは1つだけ
  • ユーザーエージェントではなく、画面サイズをもとにして切り替える
  • HTMLとCSSのみで制作可能
【デメリット】
  • デバイス別サイトよりもデザイン的に見劣りする場合がある
  • 制作に時間がかかる
  • CSS3に未対応なブラウザでは動作しない

 

>>> マサがお勧めするレスポンシブデザインの本 （by Amazon.co.jp）