自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。
最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため、ここでまとめておきます。
Contents
bootstrapとは?
改めて説明の必要もないですが、レスポンシブデザインに対応したHTML/CSS/JavaScriptのフレームワークです。
読み込ませ方
本家(http://getbootstrap.com/)からダウンロードし、CSSとJavaScriptに下記ソースを追加してあげればＯＫです。
|
1 2 |
<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.min.js"></script> |
.minがついているものはサイズが小さいですが、中を修正したりができないので自分はcssに関してはminではないものを使っています。
bootstrapの内部の解説
container
bootstrapはコンテンツ全体をcontainerでくくるという使い方を想定しています。これによりデバイスに応じた、幅やマージン設定などが可能になります。
|
1 2 3 |
<div class="container"> //この中に全体のソースを書く </div> |
グリッドシステム
bootstrapでは横幅を12個の幅に等分し、その比によってコンテナを分割しています。このようなシステムをグリッドシステムといいます。
|
1 2 3 4 5 6 |
//1行をrowという単位で囲います <div class="row"> //xs-*の*にあたる数字が12分のいくつを表しています。 //ちなみにデバイスにより等分をかえることもできます。 <div class="col-xs-2"></div> </div> |
またグリッドシステムの応用として複数の入れ子(複数段の縦をそろえる)にしたり、一定の間隔(オフセット)をあけることもできます。
入れ子
|
1 2 3 4 5 6 7 8 9 |
<div class="row"> <div class="col-xs-6">段落A <div class="row"> <div class="col-xs-6">段落Aの1段下</div> <div class="col-xs-6">段落Aの1段下</div> </div> </div> <div class="col-xs-6">段落B</div> </div> |
オフセット
|
1 2 3 4 5 |
<div class="row"> <div class="col-xs-6">ブロックA:6グリッド</div> <div class="col-xs-offset-1 col-xs-3">幅を1幅分あけてブロックB:3グリッド</div> <div class="col-xs-2">ブロックC:2グリッド</div> </div> |
左寄せ、中央寄せ、右寄せ
グリッドレイアウト以前にもっと単純な文字よせ、段落よせがあります。
文字よせ
text-right,text-center,text-leftなど
|
1 |
<div class="text-right"><a href="#">hoge</a></div> |
段落よせ
段落のブロック全体を左や右にフロートしたり、中央揃えにします。
pull-left,pull-right,center-block(このプロパティを使うときはwidthを指定しておく必要があります。)
|
1 |
<div class="pull-left">中央ブロック</div> |
参考
