読者です 読者をやめる 読者になる 読者になる

さまよえる、Android

Androidのプログラミングで便利なことや残しておきたいことを残しておく。もしオススメのライブラリがあったら教えてくださいね。

Bootstrapを試してみた。

たまたま新しいサイトを作成するのにCSSを書いていたのだが、年に数回触るぐらいなもので、思い出しながら作業をしていたが、調べながら作業するのが結構面倒くさい。どうしても自分でやると保守しづらい、やりたいことを調べるのに時間がかかる。解決方法としてBootstrapというのを試してみた。

Bootstrapを使うと、CSSを自分で組まなくてもBootstrapで定義されたクラスを使えば、素早くそれっぽい感じになってくれる。レイアウトもあるのでBootstrapだけでサイトを作成できる。あまりWebにはまとまった情報がなかったので、Bootstrapファーストガイドという本を試しに購入してみた。

サンプルファイルをダウンロードするパスワードが袋とじになってる。会員登録してさっそくサンプルファイルをダウンロード。

/Downloads/web/index.htmlを開くとサンプルが見れる。Bootstrapを使うと自分でCSS組まなくても、Twitterみたいな感じのデザインに仕上がる感じがわかる。ブラウザの幅を狭くするとiOSAndroidなどもサポートされている。

 

公式のサイトからBootstrapをダウンロードして開くと、css,fonts,jsフォルダが入っている。今回デモで利用するhtmlファイル「rensyu.html」を作成する。

Download Bootstrap 

f:id:araiyusukej:20150113210310j:plain

↓テンプレートをコピーしてrensyu.htmlに貼り付ける。

 

このテンプレートの中身だとインストール出来ているのかわかりづらいので、こいつを少し編集して、自分のTwitterのアイコンを丸く表示してみた。Gistの20行目、h1タグのHello, world!の下に、imgタグを追加してクラス名を「img-circle」にする。 

f:id:araiyusukej:20150113211626j:plain

レイアウトを組む

Bootstrapでは、レイアウトを12列のグリッドで管理する。例えばよくある2列のブログ形式の場合、年月などのサイドメニューを左に、記事の内容を右に配置する場合には、左4列、右8列の合計12列になるようdivのクラス名を設定する。

f:id:araiyusukej:20150113233704j:plain 

 タイトル(ジャンボトロン)

Webサイトのタイトルなどに活用出来る見出しで、ジャンボトロンが用意されている。

ジャンボトロンを追加する前に、全体を囲むdivタグを追加する。<div class ="container"> ~ </div>。色がついてるとそれっぽく見えないのでカラー情報を消して文字(サイドバーと記事)で埋めてみた。ジャンボトロンを追加するのは、divのクラスにjumbotronを指定すれば反映される。

f:id:araiyusukej:20150113235249j:plain

 リスト作成

サイドバーにBootstrapを使ってメニューを作るには、ulタグのクラス名にlist-unstyledを指定する。

f:id:araiyusukej:20150114001305j:plain

ページネーション

Bootstrapでページネーションを使う場合は、ページネーションを中央寄りに配置したいのでdivで囲んで、クラス名にtext-centerを指定する。その中にulタグを配置してクラス名にpaginationを指定する。liのクラスにはdisableとactiveがあり、リンクの有効/無効を設定できる。

f:id:araiyusukej:20150114002458j:plain

パンくずリスト

Bootstrapでパンくずリストを追加するのに、olのクラスにbreadcrumbを指定。 だんだん形になってきた。

 

f:id:araiyusukej:20150114003432j:plain

コメントフォーム

Bootstrapは、もちろんフォームの書式も用意されている。フォームの部品(入力ボックス、テキストエリア)は、<div class="form-group">で囲むルールがある。また部品のクラスにform-controlを指定する。

f:id:araiyusukej:20150114004713j:plain

まとめ

Bootstrapで用意されているクラス名を組み込めば20分ぐらいで結構本格的なサイトが出来る。やはりネットでやりたいことを調べながらより、サンプル豊富なBootstrapファーストガイドを辞書代わりにBootstrapでCSSを書くとサクサク進んで、オススメです。