このページの本文へ

PROGRAMMING Webサービス開発者のためのTwitter Bootstrap入門 ― 第2回

サンプルで学ぶTwitter Bootstrapの使い方:前編

2013年07月25日 13時08分更新

おおくぼようすけ、まきのてつお

  • この記事をはてなブックマークに追加
本文印刷

 Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。

簡単なサンプルサイトで使い方を学ぼう

 サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。

HTMLの準備

 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。

index.htmlの作成

 まず、テキストエディターなどで空の「index.html」ファイルを作成します。前回ダウンロードしたTwitter Bootstrapの圧縮ファイルを展開すると、以下のような構造になっていました。

 このルートフォルダに「index.html」を作成します。

 次に、Twitter Bootstrapのサイトで「Get started」メニューの「5.Examples」→「Basic marketing site」を表示します。

 ブラウザーで「Basic marketing site」のソースコードを表示し、全選択してコピー、そのまま先ほど作成した「index.html」にペーストします。この「index.html」を必要に応じて修正していきます。

Twitter BootstrapのマークアップはHTML5で

 Twitter BootstrapはHTML5を採用していますので、Twitter Bootstrapを利用するWebページはHTML5で記述します。

 今までのHTML/XHTMLでは長いDOCTYPE宣言の記述が必要したが、HTML5では以下のように非常に短い宣言で済みます。

<!DOCTYPE html>

 また、文字コードの宣言もHTML5では以下のように非常にシンプルです。

<head>
  <meta charset="utf-8">
</head>

 HTML5では文字コードとしてUTF-8が推奨されていますので、特別な理由がなければUTF-8を利用しましょう。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング