Twitter Bootstrapを使ってWebサイトデザイン変更中

Tweet

[`livedoor` not found]

Check

[`evernote` not found]

ここ最近、私の中でWebサイトを位置から見直したいと考えていたのだけど、
そんな時に知ったのが、”Twitter Bootstrap”
HTML5をそろそろお勉強しないと行けないタイミングではあったので、
その練習も兼ねて使ってみることにしました。

そもそもTwitter Bootstrapって何？

　Twitter Bootstrapとは・・・私のイメージだとTwitterが提供している「webサイト作成キット」です。

webサイトを1からデザインし、CSSを設定していくのはものすごく大変ですし、個人のサイトくらいでそこまでやっていると大変です。しかも今風の小洒落たデザインをしようと思ったらいろんなこと（JavaScriptとか）を求められたりします。
　「そんなのしんどい！時間がない！」と思い、断念してしまう人も多いはず。
　これは、webページで使いそうな色々な「パーツ」をすぐに入れれるように、すでにHTMLやCSSやJavaScriptがセットになっているものです。どんなものが含まれているかは、以下の記事をご覧下さい。
Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・ | IDEA*IDEA

また、現在のversionは2ですが、1.3の日本語による解説が以下にあります。
Bootstrap from Twitter を日本語解説して簡単css (web)デザイン – end0tknrのkipple

関連するwebサービスも

　これだけでもかなりWebサイト作成が楽になるのですが、他のwebサービスも利用するともっと楽になります。

◯Twitter Bootstrapを利用したテンプレートを瞬時に作成
Twitter Bootstrapのサイトでテンプレートをダウンロードできるのですが、個人的にはこのInitializrというサイトがお勧めです。

　このサイトはHTML5を利用したweb作成の開始をスムーズにしてくれるサイトで、必要事項を選択していけばあっという間に初期テンプレを吐き出してくれます。あとはindex.htmlファイルを編集したり、適宜作っていけばいいですね。
　設定項目がよくわからないという場合は、殆どデフォルトでも構わないかと思います。ただ、「Stylesheet Language」のところは気をつけて下さい。デフォルトではLESSになっていますので、わからない方はCSSに変更して下さい。

◯配色とかデザインを変更したい
　Twitter Bootstrapのサイトでは配色などをカスタマイズしたものをダウンロードすることができます。ただ、このサイトだとちょっととっつきにくいのが難点。そこで2つほど記事を紹介します。

・Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
　この記事で紹介されているBootswatchは、Twitter Bootstrap用のテーマがおいてあります。ここからテーマを選んでCSSファイルをダウンロードしたら、あとは元々あったCSSを差し替えるだけで完了です。すごく簡単。
　このBootswatchは記事公開時点で7つテーマがありましたが、今後追加・更新していくそうです。気になりますね。

・Twitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrap – かちびと. net
　この記事で紹介されているStyleBootstrapは、ページ上部のナビゲーションバーやボタンといった基本的な要素の配色やフォントなどが簡単に変更できます。特に色を簡単に設定出来るのが魅力です。
　これも設定が終わったらCSSをダウンロードすることができますので、それを差し替えれば出来上がり。便利ですね。

◯まとめると・・・
　このTwitter Bootstrapを使って、現在以下のような流れで作ってます：

1. InitializrでBootstrap2のファイルを取得
2. StyleBootstrapあるいはBootswatchで基本テーマを変更
3. 出来上がったテンプレートを使ってhtmlを作成&Stylesheetを設定

デザインは大体できあがったので、現在中身の部分の移行作業を進めています。
今度の出張の合間にある程度進めて公開できるようにしたい。
しかし本当に楽になったなぁ。