rcmdnk's blog
  1. Top
  2. › Computer
  3. › Bootstrap

はじめてのBootstrap (I・O BOOKS)

なんとなくBootstrap をいじってみようと思い立って遊んでみたので、 メモがてらその時にやったことについて。

ここではBootstrap 3を使っています。

インストール

今回はRailsとか使わずに素のBootstrapを使ってみます。

Rubyとかはインストールしてあるとして、

$ cd /path/to/directory
$ sudo gem install compass bootstrap-sass
$ compass create bootstrap_test -r bootstrap-sass --using bootstrap
$ cd bootstrap_test
$ ls
config.rb   fonts       javascripts sass        stylesheets

としてcompassを使って最初のbootstrap_test(好きな名前でOK)というディレクトリを作ります。 -r bootstrap-sass --using bootstrapを与えると Bootstrapを使う体制で初期化してくれます。

オプションでJavaScriptや画像置き場等を変更できたりしますが、 基本的にはすべて後からconfig.rbをいじることで設定変更が出来ます。

取り敢えずこれで

$ compass compile

とすることで、sass/内にあるSassファイルをコンパイルして stylesheets/styles.cssを作成し、ひとまず準備完成です。

テンプレートでテスト

取り敢えずBootstrapのページからBasic template 1 をコピーしてindex.htmlと名前を付けてトップディレクトリに作成します。

CSSファイルとJavaScriptファイルのパスがテンプレートのものとは違うので、 それぞれ下の様に変更。

1
2
3
4
5
6
7
8

     <!-- Bootstrap -->
-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="stylesheets/styles.css" rel="stylesheet">
...
     <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="js/bootstrap.min.js"></script>
+    <script src="javascripts/bootstrap.js"></script>
   </body>

コレで出来上がったファイルをダブルクリックするなりしてブラウザで開けば フラットな感じのHello, world!が見えるはずです。

helloworld

要素の追加

Bootstrapではタブを作ったりナビゲーションバーを作ったり 入力フォームを作ったりが簡単に出来るようになっています。

また、特徴的なのが、横幅を12個の長さに分けて、 それをコラム毎に分配することで複数の要素を綺麗に並べる、ということ。 これを使って、ブラウザの幅が狭い時は一部の要素を消したり、 また、縦に並べたりするレスポンシブなデザインが簡単に出来ます。

その辺の基本的なことは公式の所が非常に詳しいので、 取り敢えず適当にコピペして行くだけでも色々出来てしまいます。

Components · Bootstrap

Scssで見た目の変更

あとで色々とBootstrapの要素を追加していきますが、 それぞれ色や見た目を変えたいに備えて変更用のScssファイルを作っておきます。

sass/の下には

  • styles.scss: Scssファイルをまとめるためのもの。
  • _bootstrap-variables.scss: Bootstrapの中で使うデフォルト値を変更。

があります。取り敢えず、自分用設定を入れるため、styles.scssの最後に

stylesheets/styles.scss 
1
2
3
4

 @import "bootstrap-compass";
 @import "bootstrap-variables";
 @import "bootstrap";
+@import "custom";

と、customを追加します。これで、sass/_custom.sassも取り込まれる様に なるので、_custom.scssを作ってこの中に好きな設定を書き込んでいきます。

compass compileのオプション

compass compileによってsass内のファイルをまとめて stylesheets/styles.cssとして吐き出すわけですが、 デフォルトでは余り圧縮しないexpandedという状態で出力されます。

これを圧縮した状態で保存したい場合には、 config.rbの中で、

output_style = :compressed

とします。 この状態でコンパイルするとびっしり改行なしで詰められた状態になります。

この2つの間の状態としてcompactという状態もあります。

逆に、さらに親子関係などをなるべく残したままの状態にしたい場合には nestedを指定します。

一時的にだけ変更したい場合は、引数で

$ compas compile -s nested

の様にしてもOK。

JavaScriptを追加

自分設定のJavaScriptはjavascript/myscript.jsというファイルを作って この中に書いて行くことにします。

このファイルを読み込むため、index.htmlのbootstrap.jsを 読み込むところの後ろにmyscript.jsも配置しておきます。

<script src="javascripts/bootstrap.js"></script>
<script src="javascripts/myscript.js"></script>

ホントはsstephenson/sprockets とかでまとめたいところですが、 今回はそのまま読みこむようにしておきます。

相対パス、絶対パス

config.rbの中にrelative_assetsという値がありますが、 これがfalse(デフォルト)の状態だと、 Scssの中でのimage-urlを使った時、 画像パスとか、中で使うパスが絶対パスで補完されます。

config.rb 
1
2

http_path = "/"
images_dir = "images

とconfig.rbで設定されてる場合、

image-url("img.png")

は

url("/images/img.png")

と展開されます。 また、http_images_pathとう値が設定されてれば、上の2つの値は無視して

url("<http_images_path>/img.png")

の様に展開されます。

一方、relative-assets = trueの場合、 最終的に読み込むことになるstyles.cssの位置からの表示になるので、 上の場合は

url("../images/img.png")

となります。 この時はhttp_pathやhttp_images_pathは関係ありません。

また、image-width("img.png")やimage-height("img.png")と言った関数で 画像の幅とかをScssの中で取得することが可能ですが、 relative-assets=falseでかつhttp_images_pathがある場合でも これらの関数の中ではimages_dirを使ったパスを使うので きちんと正しいimages_dirを指定しておく必要があります。

今回は、1つのhtmlファイルをトップに置いておくだけなのdえ、 relative-assets = trueにして、ファイルの位置とかは相対的に 適当に配置しました。

テーマを変えてみたり

Bootstrapではテーマファイルを追加したり元のファイルを上書きすることで 簡単に見た目を変更できます。

広く使われてるものなので作られてるテーマも豊富。

Bootswatch: Free themes for Bootstrap

こことかにも色々な色の物が詰まっています。

Font-awesomeを使う

Bootstrapにもデフォルトで幾つか絵文字的な物が入っていますが、 Font Awesom を導入することで、同じような雰囲気のまま色々なアイコンを使える様になります。

導入はすごく簡単で、Bootstrap CDNを使ってWebから読み込めるので、 index.htmlのhead内に

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="stylesheets/styles.css" rel="stylesheet">

と、styles.cssの前くらいで読み込んであげれば良いだけ。

これで、

<i class="fa fa-github"></i>

とか書き込めばGitHubのアイコンが表示できます。

もしくは font-awesome-sass をgemを使って導入して、CSSを直接インクルードしてしまう方法もあります。

$ gem install font-awesome-sass

としてfont-awesome-sassをインストールして、

require 'font-awesome-sass'

をconfit.rbに追加します。 さらにsass/styles.scssへ

@import "font-awesome-compass";
@import "font-awesome";

を追加。 また、fontを

$ cp -r /Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.2.2/assets/fonts/font-awesome/ fonts/

としてコピーしておきます。

これでコンパイルするわけですが、

$ compass compile
    error sass/styles.scss (Line 1: File to import not found or unreadable: font-awesome-sprockets.
    Load paths:

と出たらconfig.rbに書き忘れてるかきちんと設定されていない状態です。

この場合、fontも全て入れなきゃいけなかったり、また パスの調整とかで簡単に行かなかったりすることもあるので 上の一発の方がずいぶん簡単なので特に何もなければ上の方で。

ただ、ここで注意点として、上のURLだと、http*を省略してるので、 最初にやったようにindex.htmlを直接ブラウザで見ようとすると file:///maxcdn...の様な補完をされてしまって、当然間違ったURLになります。

これを回避するためにはhttps://maxcdn...の様にきちんと先まで書いておくか、 もしくは pow とかを使ってサーバーを立ち上げて見る必要があります。

powの場合、通常powは~/.powに貼られたリンクの中のさらに publicというディレクトリをトップディレクトリして認識するので、

$ cd ~/.pow
$ mkdir bootstrap && cd bootstrap
$ ln -s /path/to/bootstrap_test public

の様に、.powの中にまずディレクトリを作ってしまって、 そこへBootstrap展開してるディレクトリへpublicという名前で リンクを張ります。

これでhttp://bootstrap.dev/というアドレスで /path/to/bootstrap_test/index.htmlを開くことが出来ます。

Web上の情報を見る際の注意点

Web上で情報を探る際に、注意点としてBootstrap 2の情報が たくさんあって、きちんと確認しないで導入しようとすると 全く動かなくて困ることがあります。 微妙に似たようで違うので、結構注意が必要です。

まとめ

とういことで長くなったので一度切って、 次に実際に作ってみた物を紹介してみたいと思います。

Bootstrap 3でモニタ用的なテンプレートを作ってみた 2

Sponsored Links

  1. Getting started · Bootstrap ↩

Sponsored Links

« ブログをモバイルフレンドリーに Bootstrap 3でモニタ用的なテンプレートを作ってみた 2 »

}