サンプルで学ぶTwitter Bootstrapの使い方：前編 (1/3)
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を利用しましょう。
