2017年11月18日更新

Bootstrapで作る簡単レイアウト

これまで、サイドバーをつける場合はfloatをどうこうして…と様々な方法を巡らせてきたのではないでしょうか。既にサイドバーの設置等を簡単に行えるクラス名が用意されています。

  • 追加

Floatの調整に悩まなくなるBootstrapの勧め

今更Bootstrap?と思われるかもしれません。
書くネタが無かったのでお許しください。

BootstrapはTwitter社が開発したCSSのフレームワークで、デザインをある程度用意されたクラス名を使うことが出来るCSSです。
Twitter社が開発した…と書きましたが、Twitterが使っている所は見たことがありません。

Bootstrapの特徴

一番大きな特徴は、画面幅ごとにレイアウトを変えられるGridシステムでは無いでしょうか。
このページをパソコンで見ている人は、画面幅を小さくしてみてください。

大きい画面ではサイドバーがついていたページが、小さくするとサイドバーを隠すことができるようになります。

画面を12分割にして、○割を左側に、と言った配置することができます。
一つのコーディングで、パソコン版もスマホ版も両方用意できるのが最大の特徴です。

位置を指定するためのCSSが必要なくなるため、CSSを記述する機会がほとんどなくなります。

Gridシステムのサンプル

3/12幅と画面中くらい以上の時はフル
9/12幅と画面中くらい以上の時はフル

上記は以下のようなタグから生成されています。
CSSを全く触らずに、画面の配置を決めることが出来ます。

<div class="row">
<div class="col-xs-3 col-md-12 bg-primary">
3/12幅と画面中くらい以上の時はフル
</div>
<div class="col-xs-9 col-md-12 bg-info">
9/12幅と画面中くらい以上の時はフル
</div>
</div>

出典:tag

なお、本サイトではbootstrap3を使用しています。
Bootstrap4の場合はcol-3,col-9を使う必要があります。

ここで、col-xs-と言う部分があります。
これは、
xsは最小画面、スマホ画面時、
smはタブレット
mdはパソコン小幅
lgはパソコン画面
(xlはパソコン大画面:Bootstrap4より追加)
の幅によって変更できるよう、予め指定された画面幅です。

-3や-9の数字は、画面を12分割したうちのどの割合を占めるようにするか、を示しています。

さらに、hidden-md-down(md以下では隠す)等、画面幅によってアクションを変える方法が充実しています。
(bootstrap3ではhidden-md hidden-sm hidden-xsと、画面幅ごとに指定する必要があります)

簡単にですが、上記のような形で(反対ですが)、サイドバーを最初は25%幅、途中から全画面かにすることが出来ます。
最近はサイドバーは画面が小さい時は隠してしまう事が多いです。

Bootstrapの使い方

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

出典:v4-alpha.getbootstrap.com

上記をまずはヘッダーにコピーしましょう。
それだけで使用することができるようになります。

色味を変更したい場合などは、SASS等で変更する必要が有るため、また別のテクニックが必要です。

詳しくは以下からドキュメントを参照ください。

バージョンによって多少変わってきますが、もうしばらくはBootstrap4のでよろしいかと存じます。
(毎回Hidden関係が変わっていたりバージョンを途中で変えるとテンプレートが一気に使えなくなったりします。)

オススメの記事Gmatom注目まとめ

シェアする気になったらシェアする

ツイート

ユーザー情報ユーザーの紹介

Gmatom 浜田貴朗

2008年よりコミュニティサイトを運営しつつ、効果の高い広告はバナー広告では無く誘導的コンテンツ広告と気付き、コンテンツ作成を手掛ける。 ポイントサイト・キュレーションサイト・動画自動投稿サイトや自動記事作成ツール、自動フォローツール等ツールの開発等、主にウェブ系の業界にて開発・運営を行っています。 V系バーの立ち上げ・ウェブ戦略・立地戦略等飲食店の立ち上げ・運営も携わっていました。

関連するキーワードキーワードからまとめを探す