[6][HTML][CSS][JavaScript]Bootstrapを使ってみた
社内ツール、自分用ツールを作る時に、デフォルトだとあまりにひどいデザインになるので、最近のGoogleやらTwitter等のデザインを自前で真似することがあった。しかし、GoogleのCSSやらはバイト数を少なくする為か、難読化する為なのか非常に真似しづらい。そこで最近使い出したのがちょっと前に出たBootstrap。
感想としては非常に良い。デザイナのデザインHTMLを当てる前のデモ画面とかに適用しても工数が変わらないどころか、ベースがあるので逆に効率が上がる。ボタンやらのUIも嬉しいが、個人的にはレイアウト系が非常にありがたい。そしてGridシステムがまた良い。デザインする時に画面を12分割、16分割や24分割してそこの幅に合わせることで、整然と揃った印象を当てる事が出来るらしい。Bootstrapは16分割のGridシステムを提供してくれている。ダイアログ等の動きをある場合はCSSだけではなく別途JavaScriptを読み込むことで出来るようになる。ベースはあるので非常に助かるが、細かい調整をする場合はやはり自分で対応する必要がある。具体的には、テーブルのパディングのパターンや、右寄せ、真ん中寄せしたい場合等。
対応ブラウザも最新版のSafari、最新版Chrome、Firefox4以上、IE7以上、Opera11となっていて、現状のメジャーなブラウザは対応している。しかし、すべてのブラウザで見た目が全く一緒というわけではなく、体裁が崩れないレベルでの対応となっているようだ。
スタイルとして提供してくれているのは以下。
- Gridシステム(940pxの16分割。span1～span16のクラスを指定するだけ。)
- レイアウト(一般的な真ん中寄せのFixedと、ドキュメント系サイト向けの左にサイドバーがあるFluidがある。)
- タイトルや色々な文字情報の表現(<h1>～<h6>のデザインや引用表現等がある。)
- リスト(<ul><ol><dl>のデザイン。)
- ソースコード(<code><pre>タグで囲むことでソースコード表示デザインが適用される。)
- ラベル(new!等のちょっとしたアイコンも<span>タグで簡単に表現出来る。)
- Media grid(メディアコンテンツをフレームで囲んで表示。)
- テーブル(ゆったり目のテーブル表現。縞々も簡単に対応。)
- フォーム(テキストボックス、セレクトボックス、テキストエリアなの表現とエラー時の表現等。)
- ボタン(角丸グラデーションボタン表現。)
- ナビゲーション(グローバルナビゲーション、ドロップダウンメニュー形式も対応。)
- タブ(<ul><li>でタブを簡単に作成。)
- パンくず(パンくずリンクのデザイン。)
- ページング(次へ、前へ、1ページ、2ページ等のページング操作リンクの表現。)
- アラート(角丸のボタンが大きくなった感じのデザインのアラート。)
- ダイアログ(背景を暗転させて、モーダルダイアログ表現。)
- ツールチップ、ポップオーバータイトル(ツールチップと、ホバー時に表示されるフキダシ表現。)
とにかく簡単でリッチな感じに出来るので、今後使う人が増えてくるかもしれない。そうなるといたるところが同じようなデザインになってしまうのでGoogleのデザイン版等もGoogleが提供して、選択肢を増やして欲しい。
