レスポンシブWebデザイン – HTML5Experts.jp https://html5experts.jp 日本に、もっとエキスパートを。 Sat, 07 Jul 2018 03:14:05 +0000 ja hourly 1 https://wordpress.org/?v=4.7.19 Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ /shumpei-shiraishi/1538/ Tue, 20 Aug 2013 12:30:00 +0000 /?p=1538 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。

フラットデザイン採用、フルレスポンシブ！

Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。

フラットデザインの採用

現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。

例えば以下は、Bootstrap3のボタングループです。

Bootstrap3でのボタングループ

Bootstrap3でのボタングループ

Bootstrap2のボタングループと比較すると、確かにフラットデザインを採用していることがわかりますね。

Bootstrap2でのボタングループ

Bootstrap2でのボタングループ

レスポンシブWebデザインの全面採用

以前までのBootstrapは、レスポンシブWebデザインへの対応はオプショナルな扱いでした。ですが、Bootstrap3はレスポンシブがデフォルトになり、グリッドシステムや入力フォーム、モーダルダイアログなどの各種コンポーネントが、全てスクリーン幅に応じて最適な見た目に調整されます。

また、モバイルファーストの流儀に従ってCSSが記述されています。すなわち、幅768px以下の小さなスクリーン向けのCSSがデフォルトで、それ以上のスクリーンサイズについてメディアクエリが定義されています。

IE7とFirefox3.6のサポートが打ち切られた

Bootstrap3からは、IE7以前とFirefox3.6のサポートが打ち切られました。またIE8では、Respond.jsを用いてメディアクエリを有効にしない限り、デスクトップ向けのスタイルが正しく動作しません。

Bootstrap3のインストール

では実際に、Bootstrap3を試してみましょう。

Bootstrapを利用するには、まずGitHubリポジトリから、zipファイルをダウンロードします。

zipファイルを展開すると以下の様なファイル構造になっています。この中のCSSとJSを参照するよう、HTMLファイルを記述するだけで、Bootstrapのインストールは完了です。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

例えば、以下の様なHTMLテンプレートから始めると良いでしょう（公式ドキュメント内のテンプレートを多少改変）。このテンプレートでは、IE8以前でもHTML5要素とメディアクエリをサポートするために、HTML5 ShimとRespond.jsを使用しています。

:html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap3テンプレート</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- IE8以前でもHTML5要素とメディアクエリをサポートするために、HTML5 shimとRespond.jsを読み込む -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world</h1>

    <!-- jQuery (BootstrapのJavaScriptプラグインのために必要) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

新しいグリッドシステムを理解しよう

Bootstrap3を軽く試してみたところ、以前のバージョンから最も変化していて、少しわかりにくかったのがグリッドシステムでした。ということで本稿の残りの部分では、そのグリッドシステムにフォーカスを当てて説明していきたいと思います。

まず基本的なこととして、グリッドレイアウトとは、画面を論理的にグリッド状（格子状）に分割してレイアウトする手法です。

Bootstrap3の場合、グリッドの列数は12に固定されています。そして、col-xs-1, col-xs-2のように「横に占める列数」を名前に含むクラスがBootstrapによって提供されています。これらのクラスをブロック要素に付与していき、要素が占める列数の合計がちょうど12になるようにレイアウトしていきます（12以上になると、次の行に折り返されます）。

文章だけではわかりにくいと思いますので、簡単な例で説明します。グリッドの行を表すrowというクラスを持つブロック要素をまず配置し、その中に、列数の合計が12になるようにブロックを配置していきます（列数はクラス名で判別します）。

:html:
<div class="container">
  <!-- グリッドの一行。列数は合計12 -->
  <div class="row">
    <!-- この要素が占める列数は8 -->
    <div class="col-md-8">.col-md-8</div>
    <!-- この要素が占める列数は4 -->
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

上記のマークアップをブラウザ上でレンダリングすると、以下の様な表示になります（それぞれのブロックが占める範囲がわかりやすいように枠線を表示しています）。col-md-8が画面の3分の2を、col-md-4が画面の3分の1を占めているのがおわかりでしょう。

Bootstrap3のグリッドを使用した結果

Bootstrap3のグリッドを使用した結果

そして、Bootstrap3のグリッドシステムの面白い点は、スクリーンの幅に応じてこのグリッドが自動的に縦方向にスタックされるという点です。上のマークアップを、幅992pxより小さいブラウザウィンドウで見ると、以下のように見えます。

Bootstrap3のグリッドを使用した結果（スクリーン幅が768px以下）

Bootstrap3のグリッドを使用した結果（スクリーン幅が768px以下）

このように、スクリーンの幅に応じて自動的にレイアウトが変化するのが、Bootstrap3のグリッドシステムにおける強力な特徴です。

Bootstrap3のグリッドシステムを理解する上で重要なのは、以下の表です。（ドキュメント内の表から引用、改変）

モバイル（768px以下） タブレット（768px以上、992px未満） デスクトップ（992px以上、1200px未満） デスクトップ（1200px以上）
クラスの接頭辞 .col-xs- .col-sm- .col-md- .col-lg-
グリッドの動作 常に横並び 基本は縦積み、ブレークポイントを超えると横並び
コンテナの最大幅 なし（auto） 750px 970px 1170px
列の最大幅 auto 60px 78px 95px

この表を見ておわかりの通り、スクリーンの幅に応じて、異なる接頭辞を持つクラスが用意されています。例えばcol-sm-という接頭辞を持つクラスは、幅768px未満では縦積み、それ以上の場合は横方向に配置されます。上のサンプルではcol-md-というクラスを使用していたため、幅992px前後でレイアウトが変わったというわけです。

そしてこれらのクラスは、複数同時に使うこともできるというのもポイントです。 例えば、「モバイルでは2列ずつ縦積み、タブレットでは3列ずつ縦積み、デスクトップでは横並び」というレイアウトを実現するには、以下の様なマークアップを行います。

:html:
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-2">あ</div>
  <div class="col-xs-6 col-sm-4 col-md-2">い</div>
  <div class="col-xs-6 col-sm-4 col-md-2">う</div>
  <div class="col-xs-6 col-sm-4 col-md-2">え</div>
  <div class="col-xs-6 col-sm-4 col-md-2">お</div>
  <div class="col-xs-6 col-sm-4 col-md-2">か</div>
</div>
スクリーン幅に応じて列数が変わるサンプル。モバイルでは2列。

スクリーン幅に応じて列数が変わるサンプル。モバイルでは2列。

スクリーン幅に応じて列数が変わるサンプル。タブレットでは3列。

スクリーン幅に応じて列数が変わるサンプル。タブレットでは3列。

スクリーン幅に応じて列数が変わるサンプル。デスクトップでは6列。

スクリーン幅に応じて列数が変わるサンプル。デスクトップでは6列。

このように、Bootstrap3のグリッドシステムにより、スクリーン幅に応じて動的に変化する柔軟なレイアウトを、とても手軽に実現することができます。

以上が、Bootstrap3のグリッドシステムの基本です。他にもいくつか機能がありますので、詳しく知りたい方は公式ドキュメントを参照してください。

まとめ

レスポンシブWebデザインを前提として生まれ変わったBootstrap3は、洗練されたデザインのWebサイトを手軽に実現できるというだけではなく、その強力なレイアウト機能や利便性の高いコンポーネント、そしてテーマ機能のおかげで、「汎用的で強力な、Webサイト構築フレームワーク」になったという印象を受けました。

完全にレスポンシブなWebサイトを構築するつもりがなくとも、また、Bootstrapのデザインを最終的に採用する予定がなくとも、まずはサイト構築の基盤としてBootstrapを使う…というのも、開発のやり方としてアリなのではないでしょうか。

]]>