Bootstrapを試してみた。
たまたま新しいサイトを作成するのにCSSを書いていたのだが、年に数回触るぐらいなもので、思い出しながら作業をしていたが、調べながら作業するのが結構面倒くさい。どうしても自分でやると保守しづらい、やりたいことを調べるのに時間がかかる。解決方法としてBootstrapというのを試してみた。
Bootstrapを使うと、CSSを自分で組まなくてもBootstrapで定義されたクラスを使えば、素早くそれっぽい感じになってくれる。レイアウトもあるのでBootstrapだけでサイトを作成できる。あまりWebにはまとまった情報がなかったので、Bootstrapファーストガイドという本を試しに購入してみた。
サンプルファイルをダウンロードするパスワードが袋とじになってる。会員登録してさっそくサンプルファイルをダウンロード。
/Downloads/web/index.htmlを開くとサンプルが見れる。Bootstrapを使うと自分でCSS組まなくても、Twitterみたいな感じのデザインに仕上がる感じがわかる。ブラウザの幅を狭くするとiOSやAndroidなどもサポートされている。
公式のサイトからBootstrapをダウンロードして開くと、css,fonts,jsフォルダが入っている。今回デモで利用するhtmlファイル「rensyu.html」を作成する。
↓テンプレートをコピーしてrensyu.htmlに貼り付ける。
このテンプレートの中身だとインストール出来ているのかわかりづらいので、こいつを少し編集して、自分のTwitterのアイコンを丸く表示してみた。Gistの20行目、h1タグのHello, world!の下に、imgタグを追加してクラス名を「img-circle」にする。
レイアウトを組む
Bootstrapでは、レイアウトを12列のグリッドで管理する。例えばよくある2列のブログ形式の場合、年月などのサイドメニューを左に、記事の内容を右に配置する場合には、左4列、右8列の合計12列になるようdivのクラス名を設定する。
タイトル(ジャンボトロン)
Webサイトのタイトルなどに活用出来る見出しで、ジャンボトロンが用意されている。
ジャンボトロンを追加する前に、全体を囲むdivタグを追加する。<div class ="container"> ~ </div>。色がついてるとそれっぽく見えないのでカラー情報を消して文字(サイドバーと記事)で埋めてみた。ジャンボトロンを追加するのは、divのクラスにjumbotronを指定すれば反映される。
リスト作成
サイドバーにBootstrapを使ってメニューを作るには、ulタグのクラス名にlist-unstyledを指定する。
ページネーション
Bootstrapでページネーションを使う場合は、ページネーションを中央寄りに配置したいのでdivで囲んで、クラス名にtext-centerを指定する。その中にulタグを配置してクラス名にpaginationを指定する。liのクラスにはdisableとactiveがあり、リンクの有効/無効を設定できる。
パンくずリスト
Bootstrapでパンくずリストを追加するのに、olのクラスにbreadcrumbを指定。 だんだん形になってきた。
コメントフォーム
Bootstrapは、もちろんフォームの書式も用意されている。フォームの部品(入力ボックス、テキストエリア)は、<div class="form-group">で囲むルールがある。また部品のクラスにform-controlを指定する。
まとめ
Bootstrapで用意されているクラス名を組み込めば20分ぐらいで結構本格的なサイトが出来る。やはりネットでやりたいことを調べながらより、サンプル豊富なBootstrapファーストガイドを辞書代わりにBootstrapでCSSを書くとサクサク進んで、オススメです。
