2013年8月3日土曜日

レスポンシブ・ウェブデザイン：一つのHTMLで複数のデバイス画面に対応させよう

PCやスマホ、タブレットといった画面サイズの違うデバイスごとに最適なWebページを作るのは非常に骨の折れるものです。さらにそれをメンテナンスするとなると労力は何倍にもなります。なるべく労力を減らすためにはどうすれば良いでしょうか。
その答えの一つとして、レスポンシブ・ウェブデザインを意識したWebデザインが考えられます。

レスポンシブ・ウェブデザインとは、Webページを表示する際に従来のようにデバイス毎にCSSなどを使い分けるのではなくて、CSS3のメディアクエリ(Media Queries)を使い、ブラウザの横幅サイズに応じてレイアウトを調整する手法のことです。
リキッドデザインにも似ていますが、レスポンシブ・ウェブデザインは画面サイズに応じてレイアウトも含めて可変します。リキッドデザインで可変なのは配置だけでレイアウトは同一ですね。

では、レスポンシブ・ウェブデザインの簡単なサンプルを見てみましょう、、、
と、その前に現在の主なデバイスの標準的な画面サイズを知らなければ始められませんね。
  • PC： 横幅1024px以上
  • タブレット（iPad）： 768px × 1024px
  • スマートフォン（iPhone）： 320px × 480px
現在はだいたいこんな感じです。モバイルデバイスの進化は早いので今後どうなるかわかりませんが、今回はとりあえずこれに合わせて話を進めます。

まずレスポンシブ・ウェブデザインの基本は以下の4ステップになります。


1. viewport設定


index.html
...
<meta name="viewport" 
 content="width=device-width,user-scalable=no,maximum-scale=1" />
...


2. メディアクエリのIE対応


index.html
...
<!-- IE対応 -->
<!--[if It IE 9]>
<script src="respond.js"></script>
<![endif]-->
...
respond.jsはここから入手してください。


3. CSSにメディアクエリ設定


index.css
...
/*  PC画面専用: >=1024px */
@media screen and (min-width: 1024px){
...
}

/*  タブレット画面専用スタイル: <=1024px */
@media screen and (max-width: 1024px){
...
}

/* スマホ画面専用: <=768px */
@media screen and (max-width: 768px){
...
}
...


4. CSSでスマホ、タブレット用画面のサイズ指定を％指定に


index.css
...
/* PC用レイアウト */
#contents{
  width: 920px;
  margin: 0 auto;
}
...

...
/* タブレット、スマホ兼用レイアウト */
#contents{
  width: 100%;
}
...


この基本を踏まえて、実際に作ってみたHTML, CSSファイルは以下のようになります。

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <link rel="stylesheet" href="index.css" />
  <!-- IE対応 -->
  <!--[if It IE 9]>
  <script src="js/respond.js"></script>
  <![endif]-->
</head>
<body>
  <div id="contents">
    <div id="header">
      ここはヘッダー部分です。
    </div>
    <div id="main_contents">
      ここはメインコンテンツ部分です。<br/>
      <div id="content_l">大型のコンテンツ（PCの画面でのみ表示します）</div>
      <div id="content_m">中型のコンテンツ（PCとタブレット画面で表示）</div>
      <div id="content_s">小型のコンテンツ（全デバイス画面で表示します）</div>
    </div>
    <div id="menu">
      ここはメニュー部分です。
      <ul>
        <li>メニュー0</li>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
        <li>メニュー6</li>
        <li>メニュー7</li>
        <li>メニュー8</li>
        <li>メニュー9</li>
      </ul>
    </div>
    <div id="footer">
      ここはフッター部分です。
    </div>
  </div>
</body>
</html>

index.css
/*  PC画面専用スタイル: >=1024px */
@media screen and (min-width: 1024px){
  /* PC画面用レイアウト */
  #contents{
    width: 920px;
    margin: 0 auto;
  }
  #header{
    float: left;
    width: 920px;
  }
  #menu{
    float: right;
    width: 200px;
  }
  #main_contents{
    float: left;
    width: 720px;
    min-height: 400px;
  }
  #footer{
    float: left;
    width: 920px;
  }
}

/*  タブレット画面専用スタイル: <=1024px */
@media screen and (max-width: 1024px){
  /* タブレット、スマホ画面兼用レイアウト */
  #contents{
    width: 100%;
    margin: 0 auto;
  }
  #header{
    width: 100%;
  }
  #menu{
    width: 100%;
  }
  #main_contents{
    width: 100%;
    min-height: auto;
  }
  #footer{
    width: 100%;
  }
  /* 大型コンテンツ非表示 */
  #content_l{
    display: none;
  }
}

/* スマホ画面専用スタイル: <=768px */
@media screen and (max-width: 768px){
  /* 大型コンテンツ非表示 */
  #content_l{
    display: none;
  }
  /* 中型コンテンツ非表示 */
  #content_m{
    display: none;
  }
}

では、これをブラウザで開いて画面サイズを適当にリサイズさせてみてください。
ブラウザを画面いっぱい(横幅1024px以上)に広げると、PC画面と認識されて、全てのコンテンツ(#content_l, #content_m, #content_s)が2カラムレイアウトで表示されます。
次に画面サイズを横幅1024px以下にリサイズすれば、タブレット画面と認識されて、中型・小型コンテンツ(#content_m, #content_s)のコンテンツが1カラムレイアウトで表示されます。
最後に画面サイズを横幅768px以下にリサイズすれば、スマホ画面と認識されて、小型コンテンツのみ(#content_s)1カラムレイアウトで表示されます。


参考にしたサイト

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～ | HTML5でサイトを作ろう
レスポンシブwebデザインとは？｜Tips*Blog｜株式会社コプロシステム
投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)