「Twitter Bootstrap」使ってみました

こんにちは!
先日、「Twitter Bootstrap」ハンズオンセミナーに参加してまいりました。
前から興味があったのですが、何となく素通りしていたこのツール、せっかくなので備忘録的に書いてみたいと思います。

1.「Twitter Bootstrap」とは?
ツイッターが無償で提供している、フロントエンドツールです。レスポンシブ対応のWebデザインを作成する際、あまり時間はかけられない、見栄えをサクッと整えたい、そんな方々に最適のツールのようです。

2.どうやって使うの?

  • ダウンロードする
    Bootstrap(http://getbootstrap.com/)よりダウンロードします。ダウンロードボタンをクリックすると、「Bootstrap」、「Source code」、「Sass」の3種類がダウンロードできるページへ遷移します。ここでは、「Bootstrap」をダウンロード、解凍します。こちらは、必要なものが全部入っているものだそうです。
  • index.htmlを作成する
    テキストエディタ等でindex.htmlを作成、「bootstrap」フォルダ直下に格納します。index.htmlの内容は、先ほどファイルをダウンロードしたページを下にスクロールし、「Basic template」と書かれている内容(「!DOCTYPE html」から「/html」まで)をコピー&ペーストすれば大丈夫。index.htmlをブラウザで開いて、「Hello, world!」と表示されたら、おめでとうございます!準備は完了です。

3.どうやってカスタマイズするの?

  • 簡単な方法
    Bootswatch(http://bootswatch.com/)には、素敵な配色のレイアウトがたくさん掲載されています。気に入ったデザインをクリック、ナビゲーションの「Download」のプルダウンから、現在使用しているCSSと同じ名前のものをクリック、出てきたものをコピーし、現在使用中のCSSにペーストします。これだけで、現在のデザインが新しいデザインに切り替わります。
  • ちょっと頑張る方法
    現在使用しているCSSを開き、自力で編集します。

4.メリットは?
あれこれ迷ってしまったとき、手っ取り早く仕上げられるのがいいのではないかと思います。

5.デメリットは?
細かい設定を変えたいとき、なかなか厄介なようでした。

セミナーを受講して、かなり便利なツールだと思いました。全体的に使うのではなく、例えば部分的に(ナビゲーションだけ、など)使うこともできるらしいため、知っておいて損はないツールだと思います。

 

 

アイアンドディー
アイアンドディー

「エキスパートコラム」は、株式会社アイアンドディーのコンサルタントが発信するブログです。マーケティングの最新情報や事例、その他役に立つ情報を発信して参りたいと思います。 株式会社アイアンドディーで実施するイベントの告知、取り扱い製品・サービスの紹介とご導入事例もご案内します。