Twitter Bootstrap 3 の基本　レスポンシブWebデザインの話

ちょっと今回はBootstrapから少し脱線して、「レスポンシブウェブデザイン」の話から始めましょう。
皆さんは、「レスポンシブウェブデザイン」という言葉を、聞いたことがあるでしょうか。
最近ではすっかり一般的になり、Web業界の人なら知っている人が殆どかと思います。
「レスポンシブ」は「反応」「応える」といったような英語「responsive」から来ています。
どんな端末からアクセスがあってもそのデザイン崩れなく応答を返せるようなウェブデザインを、
レスポンシブウェブデザインといいます。
このような考え方が広まったのは、スマートフォンやタブレットといった様々な画面サイズのデバイスが出てきたことがきっかけです。
この「レスポンシブウェブデザイン」は、以下の３つの技術によって実現されています。

Fluid Image
ブラウザのウィンドウ幅にあわせて、画像サイズを縦横比を保持したまま拡大・縮小させる。
Fluid Grid
「グリッドデザイン」と「リキッドレイアウト」の組み合わせ。
グリッドデザインとは、グリッド（格子状の区切り）に合わせて要素を構成していくデザイン手法。
リキッドレイアウトとは、要素を可変にレイアウトするデザイン手法。
Media Queries
ブラウザ(デバイス)のサイズ(状態)を条件に、スタイルを切り替える技術。

BootstrapはレスポンシブWebデザインに対応したCSSフレームワークです。
つまり、これら３つの技術を利用しています。
Fluid Gridの実現はBootstrapでは「Grid System」という仕組みによって行われており、
Bootstrapの目玉でもあります。これは次回以降に説明をしていきたいと思います。
Media QueriesはCSS3で柔軟にデバイスに応じた表示の設定ができるようになったため、BootstrapのCSSにも多々利用されています。
今回はこの「Media Queries」について詳しく見ていきます。

BootstrapにおけるMedia Queriesの使われ方

まずは、以下ように読みこんでいるbootstrapのCSSを見てみましょう。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

minimum版だとわかりにくいので、通常版からいくつかピックアップします。
まず、分かりやすいのは以下。

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

横幅によって「container」クラスの「width」を指定しています。
「container」クラスを指定することの意味がよく分かりますよね。

次の例はウィンドウのサイズ(min-width)だけでなくウィンドウの向きも条件に含めています。

@media (max-device-width: 480px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: 200px;
  }
}

orientationに指定するのは「portrait」か「landscape」です。
画面が縦長の場合は「portrait」、横長の場合は「landscape」です。

次の例は、PC用のスタイルシートであることを意味する「screen」が付与されています。
他に「print」を指定すると、プリンタ用のスタイルシートの意味になります。

@media screen and (min-width: 768px) {
  .jumbotron {
    padding: 48px 0;
  }
  .container .jumbotron,
  .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1,
  .jumbotron .h1 {
    font-size: 63px;
  }
}

複数条件を「and」で括れることも分かりますね。
このようにBootStrapのスタイルシートにはメディアクエリが、しっかりと組み込まれていることがわかります。

さて、このメディアクエリを活用するにあたって１点、必要な情報があります。
それは何かというと、そのブラウザの幅サイズです。横幅がわかっていなければ、
どのメディアクエリ指定を有効にすればよいか判断できませんよね。
ではどうやって横幅を取得するかというと、「viewport」という設定が必要になってくるのです。

Viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

このような１行をHTMLのメタタグに指定しましょう。
これによりviewportが指定できます。

width=device-width
この記述で、デバイスの横幅をWidthにしますよ、という設定になります。
固定で「width=320px」というふうに指定することもできますが、
デバイスサイズが多様な昨今においては、「width=device-width」が一般的です。

initial-scale=1
この記述は、デフォルトズーム倍率を指定します。1というのは100%という意味です。

このほかに、
user-scalable
minimum-scale
maximum-scale
が指定できます。

user-scalable：ピンチイン・アウトのような拡大・縮小を許可するかどうかを「yes」「no」で指定します。
minimum-scale／maximum-scale：最小／最大倍率を指定します。

まとめ

今回はレスポンシブWebデザインと、それにまつわる「Media Queries」と「viewport」の話をしました。Bootstrapとは直接関係はありませんが、レスポンシブを実現しているBootstrapを理解する上で非常に大切な考え方になりますので、しっかりと理解しておいてください。
次回はレスポンシブWebデザインを実現するBootstrapの「Grid System」という仕組みにフォーカスしていきます。