Webデザインができないエンジニアでも、見た目をすばやく整えられるフロントエンドツール「Twitter Bootstrap」。前回は、Twitter Bootstrapの概要と特徴、利用事例を紹介し、実際の設置方法までを説明しました。今回は、簡単なサンプルサイトを作りながら、Twitter Bootstrapの基本的なルールと使い方を説明します。 簡単なサンプルサイトで使い方を学ぼう サンプルとして、以下のようなブックカタログのサイトを作ります。書籍の一覧とお問い合せフォームで構成されるシンプルなサイトです。 HTMLの準備 TwitterBootstrapを利用したサイト制作では、いちからからすべてを記述するのではなく、TwitterBootstrapのサイトにあるサンプルをベースに書き換えていくのが簡単です。 index.htmlの作成 まず、テキストエディターなどで空の「index.
![サンプルで学ぶTwitter Bootstrapの使い方:前編 (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/5cc80ee7228c0c7fcd5fb924d94d8fe3da9c9399/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2013%2F12%2F27%2F385010%2Fl%2F52aea10838c5c884.jpg)