Asial Blog

Recruit! Asialで一緒に働きませんか?

超便利!Twitter BootstrapでさくさくWeb開発

カテゴリ :
デザイン・UI
タグ :
Tech
CSS
デザイン
新年度です!
新入学、新入社を迎えるみなさん、おめでとうございます。

エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか?
カッコよくって統一的なデザインがほしい!でもデザインセンスないし…実は私もそうでした。
ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます!

Twitter Bootstrapとはなにか



Twitter Bootstrap
CSSのフレームワークです。
Web上に使ってみた!スゲー!等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい(クラス名など結構ガラっと変わっています)。
今回ご説明しているのは、Twitter Bootstrap 2についてです。


サイトにTwitter Bootstrapを導入しよう!



一番簡単な導入方法は、CSSをダウンロードして設置するだけです!
公式サイトのデカ白ボタン「Download Bootstrap」をクリックし、zipファイルをダウンロードしましょう。
解凍してできたcss、img、jsのディレクトリごと設置します。

  1. <link href="css/bootstrap.css" rel="stylesheet">
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3. <script src="js/bootstrap.js"></script>

bootstrap.jsは、BootstrapのJavascriptプラグインを含んでいるjsファイルです。
プラグインを読み込むと、モーダルウィンドウやドロップダウン、タブといった動きのあるコンポーネントを簡単に表現することができます。
jqueryに依存しているので、jquery→bootstrap.jsの順で読み込みましょう。
bootstrap.jsのように、すべてのコンポーネントをまとめたものではなく、個別のコンポーネントで良い!という場合は、
一覧ページ(http://twitter.github.com/bootstrap/javascript.html)から好きなコンポーネントのjsファイルをダウンロードしてください。


レイアウト



Twitter Bootstrapが提供しているレイアウトは、大きくわけて二つです。
固定幅レイアウト:940pxからなる固定幅レイアウトです。
流動幅レイアウト:画面のサイズに併せて流動的なサイズになるレイアウトです。

これらをコンテナと呼びましょう。
コンテナの中に、ボックスを置くようにコンテンツを置きたい場合があります。そこで使うのがgridです。
グリッドは横幅を12個に分割しており、span1〜span12で表します。



上記の例だと、span4とspan8、4:8のグリッド領域がわかると思います。
Hello, world!のグリッド領域がspan12なので、どのように分かれているかわかりやすいですね。

それぞれのレイアウトでグリッドを使うと、下記のようになります。
・固定幅レイアウト
  1. <div class="container">
  2.   <div class="row">
  3.     <div class="span4">
  4.       Span4の中身
  5.     </div>
  6.     <div class="span8">
  7.       Span8の中身
  8.     </div>
  9.   </div>
  10. </div>

・流動幅レイアウト
  1. <div class="container-fluid">
  2.   <div class="row-fluid">
  3.     <div class="span4">
  4.       Span4の中身
  5.     </div>
  6.     <div class="span8">
  7.       Span8の中身
  8.     </div>
  9.   </div>
  10. </div>


Preタグで囲むコード



エンジニアの皆さんなら、ブログにコードを書きたいですよね。
Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。

codeタグで囲む
赤くなります。
preタグで囲む
囲み枠がつき、灰色になります。
Preタグ+Google Prettifyを使う
preタグのclassに、prettyprint linenums を入れましょう。
これが超かっこいい!!コードを見せるならこれがよさそうですね!



さて、かっこいいGoogle Prettifyですが、こちら、ちょっと頑張らないとかっこ良くならないようです。
ここからGoogle Code Prettifyのjsファイルをダウンロードします。
http://code.google.com/p/google-code-prettify/
そして、このCSSを保存し、JSと共に読み込んで下さい。

  1. .com {
  2.       color: #93A1A1;
  3. }
  4. .lit {
  5.       color: #195F91;
  6. }
  7. .pun, .opn, .clo {
  8.       color: #93A1A1;
  9. }
  10. .fun {
  11.       color: #DC322F;
  12. }
  13. .str, .atv {
  14.       color: #DD1144;
  15. }
  16. .kwd, .linenums .tag {
  17.       color: #1E347B;
  18. }
  19. .typ, .atn, .dec, .var {
  20.       color: teal;
  21. }
  22. .pln {
  23.       color: #48484C;
  24. }
  25. .prettyprint {
  26.       background-color: #F7F7F9;
  27.       border: 1px solid #E1E1E8;
  28.       padding: 8px;
  29. }
  30. .prettyprint.linenums {
  31.       box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
  32. }
  33. ol.linenums {
  34.       margin: 0 0 0 33px;
  35. }
  36. ol.linenums li {
  37.   color: #BEBEC5;
  38.   line-height: 18px;
  39.   padding-left: 12px;
  40.   text-shadow: 0 1px 0 #FFFFFF;
  41. }

どうやら、Google Codeのバージョンが上がったか何かで、Twitter Bootstrapの思う通りに表示されないようです。
(上記のCSSは、Twitter Bootstrapの公式サイトがローカルから読み込んでいるものと同じ内容です。)



テーブル



クラスを付けない状態だと罫線が表示されませんが、クラスをつけることによって、5種類のスタイルを利用できます。
1: table
行ごとに下線が引かれます。
2: table table-striped
行ごとに下線が引かれたうえに、偶数行に背景色がつきます。
3: table table-bordered
テーブルのセルに全て線が入ります。テーブル自体は角丸になります。
4: table table-condensed
tableよりも、無駄な余白が少なくなります。
5: table table-striped table-bordered table-condensed
上記の全部入り!




フォーム



フォームはさまざまなプロパティがあるので、ここで説明するよりも公式サイトを見たほうが早いかと思います。
spanでinputタグの幅を指定できたり、フォーカスが当たると青い影がついたり、とても便利です。




ボタン、ラベル



inputタグとaタグは、btnというクラスを付加するだけで簡単にきれいなボタンになります。
画像を使わずにこのボタンが表現できるのは嬉しいですね!
大きさも3種類、色も場面によって使い分けられます。
ラベルはボタンクラスの「btn」を「label」と読み替えるだけで作成できます。親戚のようなかんじです。




アイコン



iタグにアイコン名を指定するだけで、かわいいアイコンを全部使うことができます!
解答したbootstrapの画像ディレクトリに、2つの画像が入っていたと思います。これは、黒いアイコンの画像集と白抜きアイコンの画像集です。
これらのアイコンは、ボタンなどと組み合わせて使うことができます。
背景が暗めのボタンでは白抜きのアイコンを使うよう、CSSで指定できます。

  1. <a class="btn"><i class="icon-pencil"></i> 黒いアイコンを使うとき</a>
  2. <a class="btn btn-primary"><i class="icon-pencil icon-white"></a> 白抜きアイコンを使うとき</a>




アラートボックス



divタグにクラスalertをつけると、アラートメッセージが出せるようになります。
色は4種類あり、黄色以外のボックスにするには、alertとalert-successなど、色に対応したクラスを一緒に付与します。




ひな形がほしい!



公式サイトに、ベーシックな3種類の型が置いてあります。
http://twitter.github.com/bootstrap/examples.html


色を変えたい!



このサイトから、好きな色を探してみては?
http://bootswatch.com/

Twitter BootstrapではLESSを採用しており、自分で好きな色を決めてコンパイルすることも可能ですが、ちょっと面倒ですよね。
このサイトで、細かく色を決めるのはどうでしょうか?
http://stylebootstrap.info/
公式でも、カスタマイズしたcssをダウンロードすることができます。
http://twitter.github.com/bootstrap/download.html


はじめは少々戸惑うかもしれませんが、慣れれば心強いCSSフレームワーク。
Twitter bootstrapを使ってどんどんWebアプリケーションを作って下さい!

コメント

  • h19e

    Twitter Bootstrapを実際にサービスに使ってみたらこんな感じになります。
    参考まで。

    アンケートフォーム作成サイト CustomForm
    http://customform.jp/

    技術ブログっぽいの
    http://h19e.bex.jp/article/yolp/1/

    地図系サービス
    http://support-map.geo.jp/

  • twitterの歴史ブログ

    いつも楽しく拝見させていただいてます。
    記事の独特な世界観などすごく勉強になっています。
    また遊びに来ますね。これからもよろしくお願いします。

  • KB

    ブートストラップ使ってみたらデフォルトでレスポンシブデザインになってて感動!
    何処までカスタマイズ出来るかちょっといじってみたいと思います。

  • tmc

    今までbootstrap使ったことがなかったので、記事を拝見して使ってみようと思い、
    早速ダウンロードしてあれこれ試してみました!

    参考になりました。ありがとうございます。

コメントフォーム



captcha_key

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

最近の記事