Posted by & filed under web, コンピュータ関連.


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

そもそもTwitter Bootstrapって何?

 Twitter Bootstrapとは・・・私のイメージだとTwitterが提供している「webサイト作成キット」です。
Twitter Bootstrap
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というサイトがお勧めです。
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を設定

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

3 Responses to “Twitter Bootstrapを使ってWebサイトデザイン変更中”

  1. kazutan

    最近のTwitter Bootstrapに関連する記事やサービスを自分用にまとめた記事です → ブログ更新| Twitter Bootstrapを使ってWebサイトデザイン変更中 – http://t.co/AYxzLI7H

Leave a Reply

  • (will not be published)