1. まとめトップ

レスポンシブが簡単に!CSSフレームワーク「Bootstrap」とは??

CSSフレームワークを使ってマルチデバイス対応サイト制作を効率よくやろう‼

更新日: 2014年09月08日

11 お気に入り 9814 view
お気に入り追加

この記事は私がまとめました

mooooon888さん

Bootstrapって何!?

BootstrapはCSSの「フレームワーク」といわれるもの。
CSSの「フレームワーク」とはCSSの「枠組み・スタイルなど」をある程度最初から定義している、ライブラリファイルのようなもの。

HTMLファイルにCSSフレームワーク(CSSファイル)を読み込むだけで、程良いスタイルが適用されたデザインを表示可能になる。

Bootstrapは,次の最新テクノロジ・デザインをまとめて導入できる。
HTML5
CSS3
12カラムグリッドシステム
フラットデザイン
タッチパネル操作への配慮
カルーセルスライダー等
UIパーツライブラリー
jQuery
LESS
JavaScriptライブラリ
便利なLESSのMixinライブラリ
clearfixなど

レスポンシブサイト対応
Bootstrapは12カラムのグリッドシステムを採用しており、マルチデバイスに対応した次のブレイクポイントが設定されている。

大画面PC用 1200px以上
一般PC用 992px~1199px
タブレット用 768px~991px
スマホ用 768px未満

Boostrapで作られたサイト

実際にBootstrapを使ってみる!

HTML5でドキュメントを作りhead要素内に,次のコードを記述します。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!--ローカル上でのテストの場合は"http:"を足さないと上手く読み込めない-->

※Downloadする場合は下記の方法で!

ダウンロードしたzipファイルの中身
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff

最初はHTMLコードのテンプレートがあるので、まるっとコピーしindex.htmlを作る。
それを、ダウンロードしたファイル内に保存して使おう!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

ここでいったんBootstrapで用意されているデザインテンプレートを確認!デザインのイメージに合わせて必要に応じて使いましょう

Bootstrapのもっとも重要な特徴「グリッドシステム」について理解する

グリッドシステムは、以下ルール内で使用しましょう。
ルール1:class="container"の中に
ルール2:class="row"の中に
ルール3:class="col-{prefix}-{columns}"
ルール4:{columns}は合計値が12になるように数値を指定

※{prefix}とグリッドシステムの画面サイズ(Default設定)
■モバイル(768px以下)・・・・エクストラスモール=xs 【col-xs-*】
■タブレット(768px以上、992px未満)・・・・スモール=sm 【col-sm-*】
■デスクトップ(992px以上、1200px未満)・・・・ミディアム=md 【col-md-*】
■デスクトップ(1200px以上)・・・・ラージ=lg 【col-lg-*】

例01-デスクトップサイズ(Large devices)のみカラム指定を行う場合

<div class="container">
 <div class="row">
 <div class="col-lg-4">col-04</div>
 <div class="col-lg-8">col-08</div>
 </div>
</div>

☆ レイアウト説明
デスクトップサイズ(Large devices)のみカラム指定(4カラムと8カラム)を行っています
ここでウィンドウサイズをドラッグして幅を変更すると以下のように表示されます
 ・デスクトップサイズ以上(1200px~)のウィンドウサイズで表示している場合は、横に並んでカラム指定通り(4カラムと8カラム)の表示が行われます
 ・デスクトップサイズ未満(~1199px)のウィンドウサイズになった場合には、縦に積まれて表示されカラム指定も無視されて表示されます

また、col-{prefix}-{columns}はclassの中で複数指定できます。
これにより、例えば、スマホでは縦3×横2、タブレットでは縦2×横3、パソコンでは縦1×横6というように柔軟なレイアウトが可能です。

<section class="container">
<!-- TwitterBootstrapのグリッドシステムclass="row"で開始 -->
<div class="row">
<!-- グリッドシステムとは:合計12分割 -->
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: blue;">青色1</div>
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: red;">赤色1</div>
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: yellow;">黄1</div>
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: blue;">青色2</div>
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: red;">赤色2</div>
<div class="col-xs-6 col-sm-4 col-md-2" style="background-color: yellow;">黄色2</div>
</div>
</section>

画面サイズによって非表示/表示を制御

クラス名【.visible-xs-*】・・・・768px以下(スマフォサイズ)のみで表示
クラス名【.visible-sm-*】・・・・768px~992px(タブレットサイズ)のみで表示
クラス名【.visible-md-*】・・・・992~1200px以下(デスクトップ)のみで表示
クラス名【.visible-lg-*】・・・・992~1200px以下(デスクトップ)のみで表示

クラス名【.hidden-xs】・・・・768px以下(スマフォサイズ)のみ非表示
クラス名【.hidden-xs-*】・・・・768px以下(スマフォサイズ)のみ非表示
クラス名【.hidden-sm-*】・・・・768px~992px(タブレットサイズ)のみ非表示
クラス名【.hidden-md-*】・・・・992~1200px以下(デスクトップ)のみ非表示
クラス名【.hidden-lg-*】・・・・992~1200px以下(デスクトップ)のみ非表示

1 2