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

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

モバイル対応のものを含め、Web サイトや Web アプリケーションの開発を順調にスタートさせるために Bootstrap を利用する方法を学んでください。LESS プロジェクトをベースにした Bootstrap は、Web アプリケーション UI の一貫したフレームワークを提供することを目的に、Twitter の内部エンジニアたちによって開発されました。

Uche Ogbuji, Partner, Zepheira, LLC

Uche OgbujiUche Ogbuji は、Zepheira 社で高度な Web カタログやその他のリッチなコンテキスト依存データベースの作成を監督する、同社のパートナーです。XML、セマンティック Web と Web サービス、Akara などのオープンソース・プロジェクト、そして Web データ・アプリケーション用のプラットフォームなど、先進的な Web テクノロジーの先駆者として長い歴史を積んでいます。コンピューター・エンジニア、ライターとしても活躍する彼は、ナイジェリア出身で、現在はアメリカ・コロラド州ボールダー近くに住んでいます。彼に関して詳しくは、彼のブログである「Copia」を見てください。



2013年 9月 12日

シンプルではないご時世

World Wide Web の概念は、標準トランスポート・プロトコル (HTTP) でサーバーから情報を取得してクライアントに渡し、ブラウザーが視覚的にレンダリングできるようにコンテンツを標準的な宣言型言語 (HTML) で表現するというシンプルなものです。しかし実際には、Web の成功によってこのシンプルさが失われ、Web 開発はその本来あるべき容易さが失われた状態になっています。機能をめぐるブラウザー間での競争は、標準の複雑化、そしてブラウザーの振る舞いの違いを招きました。その結果、さまざまなプラットフォーム上の各種ブラウザーでページを同じように表示し、同じように機能させるには、並外れたスキルと経験が必要とされるようになりました (また、それほど複雑ではないにしても、視覚障害者のためのアクセシビリティーや、言語とスクリプトのワールドワイドなサポートなども求められるようになりました)。Web 開発者と Web デザイナーは、これらの問題に以前よりも適切に対処できるようになってはいるものの、クロスブラウザーの HTML を扱う際の基本となる奇妙な処理は残っています。

ブラウザー開発者たちは、現在、待ちに待った 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 の柔軟性を例証してはいますが、それらのデザインで適用されている (デザインの) 基本原則について十分に説明しているページはありません。

レスポンシブ Web デザイン

Web ページを表示するための機器は、小型の携帯電話から、通常のデスクトップ・コンピューターのフォーム・ファクターよりも大きなディスプレイに至るまで多岐にわたります。レスポンシブ・デザインでは、あらゆる機器で Web ページを表示できるように、最初から Web ページに柔軟性を持たせます。レスポンシブ・デザインの中心となるのは、CSS3 メディア・クエリーです。これは、ユーザーが使用している機器のディスプレイの特性 (特にサイズ) に応じて CSS ルールを呼び出す標準的な方法です。

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

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="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

縮小化したバージョン

Bootstrap のダウンロードには、CSS ファイルと JavaScript ファイルのそれぞれに 2 つのバージョンが用意されていることに注目してください (例えば、bootstrap.js と bootstrap.min.js)。前者は、通常のファイルの形をしたものであり、後者は、圧縮つまり「縮小化」された形のものです。最も効率的にページを読み込むために、この記事と同じように縮小化したバージョンを使用してください。

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 のグリッド・システム・テンプレートのスクリーン・ショット

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="http://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 のブラウザー出力のスクリーン・ショット

サイト固有の 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 のブラウザー出力のスクリーン・ショット

まとめ

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

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


ダウンロード

内容ファイル名サイズ
サンプル・コードwa-bootstrapcode.zip41KB

参考文献

学ぶために

製品や技術を入手するために

  • Bootstrap: Bootstrap の詳細を調べて、公式プロジェクト・ページでコードを入手してください。
  • Bootstrap Illustrator Template: Aaron K. White 氏のテンプレートを利用して、独自の Bootstrap デザインのグリッドを作成してください。
  • IBM 製品の評価をご自分に最適な方法で行ってください。評価の方法としては、製品の評価版をダウンロードすることも、オンラインで製品を試してみることも、クラウド環境で製品を使用することもできます。また、SOA Sandbox では、数時間でサービス指向アーキテクチャーの実装方法を効率的に学ぶことができます。

議論するために

  • developerWorks コミュニティーに参加して、開発者によるブログ、フォーラム、グループ、Wiki を調べ、仲間やエキスパートとのつながりを持ってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


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