Bootstrap を使用した迅速な Web 開発

Twitter Bootstrap を使用して Web サイトのデザインを順調にスタートさせる

Comments

ブラウザー開発者たちは、現在、待ちに待った HTML5、CSS2 (Cascading Style Sheets Level 2)、CSS3 といった標準のサポートに一斉に取り組んでいます。これらの標準では、Web が登場して以来、開発者とデザイナーを苦しめてきたブラウザーの振る舞いの不合理な違いが削減されています。残りの問題を覆い隠し、レガシー・ブラウザーに対応するために、一部の開発者は Web ページ・フレームワークを作り出しました。このようなツールのおかげで、特別なスキルを持たない人でもサイトを開発し、さまざまな環境からアクセスするユーザーのほとんどが、有効に利用できるサイトにすることが可能になりました。

最もよく使われている最近の Web ページ・フレームワークのうちの 1 つに、意外な起源を持つものがあります。かつて、Twitter の開発者たちは、Web ページの開発に使用する多種多様なコンポーネントと格闘するのにうんざりしていました。そこで彼らが作成したのが、ページ・デザインの最も一般的な要素を提供すると同時に、かなりの柔軟性を併せ持つ単一のフレームワークです。彼らはこのツールキットを Bootstrap という名のオープンソース・プロジェクトという形で世界と共有することにしました。

Bootstrap は LESS プロジェクトをベースに CSS 言語を拡張します。また、タイポグラフィー、フォーム、ボタン、表、グリッド、ナビゲーション、アラートなどのさまざまなコンポーネントに対応する基本的な CSS 要素も含まれています。Bootstrap の主な目的は、Web 開発者がプロジェクトを迅速に進められるように支援することです。Bootstrap は現在、GitHub ソフトウェア・リポジトリーで最も人気の高いプロジェクトとなっています。個人のみならず、小規模なチーム、さらには大規模な組織でも Bootstrap を使用しています。

この記事では、モバイル対応のものを含め、Web サイトや Web アプリケーションの開発を順調にスタートさせるために Bootstrap を使用する方法を説明します。この記事はデザイナーの観点ではなく、開発者の観点で書かれているため、この記事を読むことや、Bootstrap を使用することで恩恵を受けるには、HTML と CSS の実用的な知識が必要です。私が「LESS を使用して CSS でもっと多くのことを行う」で説明しているような、LESS プロジェクトの基礎知識があると、この記事の主なサンプル・コードを理解するのに役立ちます。

開始手順

コンパイル済み Bootstrap パッケージをダウンロードします (「参考文献」を参照)。この記事で使用しているのはバージョン 2.3.2 です。ダウンロードには、Bootstrap の中核となる CSS と、有用な画像および JavaScript が含まれています。Web ページの HTML は、この記事で概説するように自分で用意します (この記事のサンプル・コードを入手するには、「ダウンロード」を参照してください)。Bootstrap のドキュメントには、このフレームワークがサポートするさまざまなデザインに対応したサンプル HTML が含まれています。ドキュメントのページ自体が Bootstrap の柔軟性を例証してはいますが、それらのデザインで適用されている (デザインの) 基本原則について十分に説明しているページはありません。

通常の開発者が開始する類のプロジェクトには、レスポンシブ機能を有効にした固定レイアウトから始めることをお勧めします。固定レイアウトは編成するのがより簡単です。また、レスポンシブ機能は、作成するサイトがモバイル機器ではどのように機能するかを最初から考えるという堅実な習慣をサポートします。プロジェクトを本番に移すときにデザイナーと協力する場合には、デザイナーがより適切な他のあらゆるモデルにファイルを適応させられるようでなければなりません。

Bootstrap 対応の HTML

リスト 1 は、Bootstrap を使用する上で便利なスケルトン HTML ファイルであり、固定レイアウトとレスポンシブ機能が適用されています。

リスト 1. Bootstrap プロジェクト用の基本的なスケルトン HTML ファイル (listing1.html)
<!doctype html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello world!</h1>
    <div class="container">
    ... <!-- The main HTML will go here -->
    </div>
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

listing1.html の先頭にある DOCTYPE 宣言により、このファイルは HTML5 ファイルとして示されます。モバイル機器の小さな画面のレイアウトを制御するのは、head 要素に含まれる meta タグです (便宜上、このタグを meta/viewport タグと呼ぶことにします)。デフォルトでは、ほとんどのモバイル機器は Web ページのサイズを縮小し、Web ページがデスクトップ・ブラウザー・ウィンドウに収まっているときと同じように画面に収まるようにします。多くの Web サイトのテキストと画像が携帯電話のブラウザーでは小さく見えるのは、これが理由です。meta/viewport 宣言の initial-scale=1.0 の部分は、この振る舞いを無効にして、ページの元の大きさを維持するよう機器に指示します。この宣言が意味するのは、小さな画面用にレスポンシブ・デザインを実装する処理を Web デザイナー (この場合は Bootstrap) がすでに完了しているため、強引にページを縮小するデフォルトの手法は不要であるということです。

リスト 1head タグの後のほうにあるのは、Bootstrap CSS へのリンクです。このファイルの終わりで、jQuery および Bootstrap ユーティリティーの JavaScript が読み込まれます。これらのスクリプトは、最適なパフォーマンスを得るために最後に実行されます。

コードのセットアップ

Bootstrap (または Web サポート・ファイルの任意のセット) を使用する場合、HTML やその他のコードをセットアップするにはさまざまな方法があります。私がお薦めする方法は、独自のプロジェクト用のフォルダーを作成して、Bootstrap ファイルを完全なフォルダー構造のまま、そのプロジェクト・フォルダーにコピーする方法です。独自の HTML ファイルは最上位レベルに配置し、独自の CSS、JavaScript、および画像ファイルはそれぞれに対応する Bootstrap のサブフォルダー (それぞれ css、js、img という名前のフォルダー) に配置します。このようにした場合、全体的な構造は以下のようになります。

.
|—— index.html
|—— [Also any other site HTML]
|—— css
|   |—— bootstrap.min.css
|   |—— bootstrap-responsive.min.css
|   |—— [Also nonminimized Bootstrap files plus site-specific CSS]
|—— js
|   |—— bootstrap.min.js
|   |—— [Also nonminimized Bootstrap files plus site-specific JavaScript]
|—— img
    |—— [The PNGs that come with Bootstrap plus site-specific images]

CSS による機器への対応

機器で表示可能なブラウザーの領域にページを適応させるための現行の規約は meta/viewport タグですが、W3C (World Wide Web Consortium) では現在、このタグに代わるメカニズムを新しい種類の CSS ルールという形で準備しています (「参考文献」を参照)。リスト 1meta/viewport 宣言に相当する CSS は、以下のとおりです。

@viewport {
  width: extend-to-zoom 100%;
  zoom: 1.0;
}

今のところ、上記のコードを CSS に組み込んでおき、HTML の meta/viewport タグはそのままにしておくというので構いません。この CSS の形式が広くサポートされるようになったら、この meta/viewport 宣言を削除すればよいのです。

グリッド・システム

リスト 1 の主要なコンテナーである div は、Bootstrap の固定レイアウトが使用されることを示唆します。このコンテナーに含める HTML は、Bootstrap のグリッド・システムに統合されることになります。

これまで目にしたことがある Web ページについて考えてみると、そのほとんどが一連のブロックに分割されていることに気付くはずです。ページ最上部にまたがるブロックに、ロゴが含まれている場合もあります。おそらく、ナビゲーションは左側か右側のブロックの中にあり、コンテンツの索引もそこに収まっているはずです。また別のブロックには、フッターも含まれていることでしょう。メインのコンテンツ自体が、パネルまたはブロックに分割されている場合もあります。これまでは、Web デザイナーがこれらのすべてのブロックを、CSS のボックス・モデルを使用して手作業でセットアップしていました。

グリッド・システムとは、上述のようなボックスの配置を行と列に抽象化する方法です。Bootstrap には、そのようなグリッドのコアとなる CSS が用意されています。特殊なクラスを使用して div 要素をネストすることにより、あらゆるボックス・レイアウトにコンテンツを配置することができます。

図 1 に、Bootstrap のグリッド・システムを視覚化してコンテンツの並べ方を計画するのに役立つテンプレートを示します。これは元々 Aaron K. White 氏によって開発されたテンプレートで、この記事ではテキストを読みやすくする目的でのみ変更を加えています (「参考文献」を参照)。

図 1. Aaron K. White 氏が開発した Bootstrap のグリッド・システム・テンプレート
Aaron K. White 氏が開発した Bootstrap のグリッド・システム・テンプレートのスクリーン・ショット
Aaron K. White 氏が開発した Bootstrap のグリッド・システム・テンプレートのスクリーン・ショット

Bootstrap のグリッド・システムには 1 行あたり最大 12 個のブロックがあり、ブロックの間には間隔をあけるための溝があります。行の数に制限はなく、行の高さは任意の高さにすることができます。各ブロックの幅は 70 ピクセル、溝の幅は 30 ピクセルです。Bootstrap はページ本体の左側にも 30 ピクセルの余白をセットアップします。このグリッド・システムは、開発者がグリッドに組み込むコンテンツだけを考えられるように、ブロックの基本的な配置と間隔を自動的に処理するように設計されています。

HTML テンプレートへの入力

LESS を使用して CSS でもっと多くのことを行う」では、(developerWorks ブロガーの Bob Leah 氏のサンプルに基づく) レスポンシブ・デザインを例に、LESS ツールで CSS 構文を拡張する方法を説明しました。Bootstrap は、そのコードの重要な部分の数々を単純化するには、理想的なツールです。リスト 2 は、上述の記事で使用した HTML (コード・ダウンロードに含まれる responsive.html) を、Bootstrap の固定レイアウト・グリッド・システムで機能するように書き直し、Bootstrap のレスポンシブ機能で補完したものです (listing2.html)。

リスト 2. Bootstrap に対応したサンプル HTML ファイル (listing2.html)
<!doctype html>
<html lang="en-US">
  <head>
    <title>Responsive Bootstrap page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1>Hello world!</h1>
      <div class="row">

        <div id="banner" class="span12">
          <!-- Photo by Jake Sutton
          http://www.flickr.com/photos/44124405407@N01/510899838 -->
          <img src="img/sky-slim.jpg">
        </div>  
      </div>
      <div class="row">
        <div id="main-content" class="span8">
          <p>Humpts dumptus in muro sedet
          </p>
          <p>Veni vidi vici
          </p>
          <p>Alea iacta est
          </p>
          <hr>
        </div>
        <div class="span4">
          <div class="widget-title">One</div>
          <div class="widget-text">
            The quick brown fox jumps...
          </div>
          <div class="widget-content">
            <div class="widget-title">Two</div>
            <div class="widget-text">
              Over the lazy dog...
            </div>
          </div>  
          <div class="widget-content">
            <div class="widget-title">Three</div>
            <div class="widget-text">
              To get to the other side
            </div>
          </div>
        </div>  
      </div>
      <div class="row">
        <div id="footer" class="span12">
          &copy; Nobody! This document is placed in the public domain.
        </div>  
      </div>
    </div>
    <script src="//code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

リスト 2 では、前のレスポンシブ・デザイン・コードでは手作業で行わなければならなかった処理のほとんどが、Bootstrap によって排除されています。このページでは Bootstrap のグリッド・システムを使用することから、ボックスのサイズを操作して拡大/縮小するため専用の CSS はもう必要ありません。また、Bootstrap のグリッドが、ブロック間に適切なデフォルトの間隔を設定することから、ブロックを注意深く配置して見た目の間隔が適切となるようにするための CSS も不要です。さらに、デザイン・パラメーターの中で、メディア・クエリーを作成してレスポンスをセットアップするための CSS も必要ありません。これらのタスクは、Bootstrap のレスポンシブ機能に任せることができます。

リスト 2 では、div タグがネストされていることもわかります。これらのネストされた div では、Bootstrap のグリッド・クラスを使用しています。container クラスが指定された div は、固定グリッド・レイアウト全体のラッパーです。row クラスが指定された div のそれぞれが、グリッド内のボックスの行を定義します。span4 クラスが指定された div は、4 個のボックスにまたがるブロックを定義し、span12 が指定された div は、12 個のボックスにまたがるブロック ― つまり、ページの全幅にわたるブロック ― を定義します。Bootstrap の spanN クラスでは、1 から 12 までの N 個のボックスを指定することができます。

図 2 に、このページがモバイル・ブラウザー (Android 4.1.1 を実行する Samsung Galaxy S3 上の Google Chrome) でどのように表示されるかを示します。

図 2. リスト 2 のブラウザー出力
リスト 2 のブラウザー出力のスクリーン・ショット
リスト 2 のブラウザー出力のスクリーン・ショット

サイト固有の CSS

図 2 に示されているページの主要な要素は適切に配置されていますが、このページには、見た目に魅力的なページにするためのスタイル要素が欠けています。そこで、今からページを魅力的な外観にすることを目的とした CSS (サンプル・コードに含まれる main.css) を追加します。Bootstrap の CSS 自体は LESS で作成されているため、通常は単純な CSS ではなく LESS を使用することを強くお勧めします。ただし、この簡単な例には、リスト 3 に記載する単純な CSS で十分です。

リスト 3. サンプル HTML に基本的なデザインを追加するための CSS (main.css)
.widget-content {
  margin: 10px;
  padding: 1px;
  background-color: #DDDDDD;
}    

.widget-title {
  font-weight: bold;
  padding: 10px;
  background-color: #EEEEEE;
}    

.widget-text {
  padding: 10px;
  background-color: #FCFCFC;
}    


#footer {
  text-align: center;
  font-size: small;
}

当然のことながら、リスト 2 の HTML には、リスト 3 に記載したサイト固有の CSS へのリンクを追加する必要があります。サンプル・コードでは、main.css へのリンクを組み込んで更新された HTML は、main.html ファイルの中に含まれています。図 3 に、main.css によって少し見栄えが良くなったページを示します。

図 3. main.html のブラウザー出力
Bmain.html のブラウザー出力のスクリーン・ショット
Bmain.html のブラウザー出力のスクリーン・ショット

まとめ

私をはじめとする多くの開発者は、コードやデータを扱うのは得意ですが、視覚的なデザインやその他の感覚に訴えるデザインをするのは得意でないため、Bootstrap は貴重なツールです。このツールを使用することで、Web プロジェクトにとって基本となるコードとデータにフォーカスしてそれを基本的な形に仕上げた後、デザイナーと協力してページの外観に磨きをかけることができます。Bootstrap は、モバイル機器やその他の小さな画面設定に対応したデザインをする場合などの、デザインに特別な注意が必要な場合に役立ちます。さらに、ボタン、ナビゲーション・スタイル、そしてその他の再利用可能なツールのライブラリーも付属しています。そして何よりも、Bootstrap には Web ブラウザーおよびプラットフォーム間の煩わしい違いの多くを取り除くためのコードが大量に含まれています。

かなりの数のプロジェクトで Bootstrap が使用されていることから、今では多くの人々が Bootstrap ベースのサイトであることを瞬時に認識できるようになっています。この認識は、ときにはオリジナリティーの欠如という印象を生み出す場合もあります。優れたデザイナーであれば、Bootstrap で生成されたサイトに独特の特徴を加えることができ、さらにはサイトの基本的なレスポンシブ要素がそのコンテンツと用途に十分特化されるようにすることもできます。しかし、そのような考慮事項を踏まえてスタートを切るプロジェクトはほとんどありません。Bootstrap は、ぼんやりとした発想を素早く Web プロジェクトという形にするのに特に役立ちます。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=944360
ArticleTitle=Bootstrap を使用した迅速な Web 開発
publish-date=09122013