国際Webデザイナーズ協会
Webデベロッパー
夏本健司
Bootstrap集中講座
※記載しているソフトウェアやサービス、コーディング技術等は2015年6⽉18⽇現在のものであり、以降、仕様変更により機能や名称、画⾯
上の位置等が変更されている場合があります。
超・実践1
2
今回マスターする15個
1.⾒出し
2.セカンダリテキスト
3.⾏揃え
4.テキスト⾊
5.背景⾊
6.画像埋め込み
7.動画埋め込み
8.リスト
9.リストのインライン化
10.テーブル
11.フォーム 基本
12.フォーム サイズ指定
13.ジャンボトロン
14.囲み記事
15.サムネール
書式指定系 ブロック系
Bootstrap利⽤のポイント1
4
ポイント1.
Bootstrapのコーディング精度はかなり⾼いです。「あれっ?これ、どう
なっているの?」と思うことの原因の⼤半は、Bootstrapが推奨していない
コーディング⽅法だったり、タグの書き間違いだったりします。
正確にコーディングすれば、ならず正常に表⽰・動作します。
これは、私が仕事の現場で実際に体験してきていることです。
ですので、「あれっ?」と思ったら、まずは公式サイトのガイドラインや
ネット上の信頼できそうなTIPSを参考にコードを⾒直してみましょう。
Bootstrapにバグはない(コードの精度が⾼い)。
5
ポイント2.
Bootstrapは、HTMLへの記名ルールとしてID名は、使いません。
もともと、OOCSSやSMACSSの考え⽅をベースにCSS設計をして
いるからです。
Bootstrapは、ID名を使わない。
6
ポイント3.
よく「マルチクラスにすると、ブラウザのレンダリングの負担や処理速度の
遅延につながるのでは?」という質問を受けますが、私が現在、仕事をして
いる上で問題になったことは1度もありません。ブラウザのレンダリング時
間のネックになっている、という数値的根拠もありません。
もちろん、マルチクラスよりシングルクラスの⽅がシンプルだし、⼀般的に
考えて処理の時間は短いでしょう。でも変わるのは、おそらくコンマ00数
秒の時間の差でしょうし、そのくらいの時間であればブラウザのレンダリン
グ処理としては全く気にならない(差にならない)程度のわずかな時間で
しょう。
マルチクラスでも処理速度は遅くならない。
7
ポイント4.
Bootstrapでは、「container」「row」のように画⾯の構造を受け持つブ
ロックに付ける名前や、「btn」「form-group」などのようにモジュールの
構造を受け持つための名前など、他のCSSフレームワークやシステムでも
使われそうな名前が多くあります。
CSSで、同じ名前で複数のスタイルが設定されている場合で、それが意図
的でない場合は、「CSS汚染」となって、意図したようにブラウザで表⽰
できない、いわゆる「表⽰崩れ」の⼤きな原因になります。
ですので、Bootsrapを使う場合は、他のCSSフレームワークは使わない、
逆に他のCSSフレームを使う場合は、Bootstrapは使わないようにしま
しょう。
まぜるな、危険!
8
ポイント5.
Bootstrapには、現在、⼤きく分けて「バージョン2系」と「バージョン3
系」があります。メジャーバージョン名である整数部分の数字で区別します。
「バージョン2系」と「バージョン3系」では、同じ機能でもクラス名が
違ったり、使い⽅が違ったり、あるいは「バージョン2系」ではある機能が
「バージョン3系」では廃⽌になっているものもあります。
もしもネット上で情報検索する場合は、このバージョンをちゃんと識別する
必要があります。当然、「バージョン3系」でサイト構築をしていて、ネッ
ト上にある「バージョン2系」のTIPSで実装をしても、正常に表⽰・操
作しない場合があるからです。
私が「Bootstra3」と銘打っているのはそのためで、 「バージョン2系」と
区別するためです。
バージョン違えば別の顔
9
ポイント6.
Bootstrapでサイト構築をする場合、あるいは表⽰テスト等する場合は、ぜ
ひ「スタイルガイド」を作って公開をしてください。
「スタイルガイド」にコンポーネントを書き溜めていくと、「汎⽤的な部品
のパーツ集」になり、次にサイト構築する時のライブラリになりますし、ク
ライントやプロジェクトメンバー内での情報共有・ガイドラインになります。
スタイルガイド作りに集中すること。
スタイルガイドを作る2
書式指定系
スタイルガイドを作る2
12
準備:HTMLを準備する
実際にBootstrapを使ってHTMLを書き出す時は、あちこち散乱させずに1
つのファイル・サイトとしてまとめておいた⽅が良いです。あとで書き⾜し
たりすれば、あなた⾃⾝の「百科事典」になりますし、実際に仕事でも使え
るライブラリにするためです。
勉強のための「短なる演習」にせず、実際に「使えるツール」にしてくださ
い。
前々回のHTMLテンプレートや、⾃分でレイアウト・デザインの雛形を持っ
ている⼈は、それに書き⾜していくようにしましょう。
スタイルガイドにするHTMLを準備する。
13
1.⾒出し
<h1 class=“h1”>ページの⾒出し、英名は「heading」。</h1>
<h1 class=“h2”>ページの⾒出し、英名は「heading」。</h2>
<h1 class=“h3”>ページの⾒出し、英名は「heading」。</h3>
<h1 class=“h4”>ページの⾒出し、英名は「heading」。</h4>
<h1 class=“h5”>ページの⾒出し、英名は「heading」。</h5>
<h1 class=“h6”>ページの⾒出し、英名は「heading」。</h6>
h1 h2 h3 h4 h5 h6
ク
ラ
ス名
コード
14
1.⾒出し
ブロック図
h1 .h1
ページの⾒出し、英名は「heading」。
h1 .h2
ページの⾒出し、英名は「heading」。
h1 .h3
ページの⾒出し、英名は「heading」。
h1 .h3
ページの⾒出し、英名は「heading」。
15
1.⾒出し
ブラウザの画⾯
16
2.セカンダリテキスト
<h1 class=“h1”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<h1 class=“h2”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<h1 class=“h3”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<h1 class=“h4”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<h1 class=“h5”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<h1 class=“h6”>ページの⾒出し、<small>英名は「heading」。
</small></h1>
<small></small>
タ
グ名
コード
17
2.セカンダリテキスト
ブロック図
h1 .h1
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h2
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h3
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h3
ページの⾒出し、<small>英名は「heading」。</small>
18
2.セカンダリテキスト
ブラウザの画⾯
19
3.⾏揃え
<p class="text‐left">左揃えにしたい時/クラス名:text‐left</p>
<p class="text‐center">中央揃えにしたい時/クラス名:text‐center</p>
<p class="text‐right">右揃えにしたい時/クラス名:text‐right</p>
text-left text-center text-right
ク
ラ
ス名
コード
20
3.⾏揃え
ブロック図
p .text-left
左揃えにしたい時/クラス名:text‐left
p .text-center
中央揃えにしたい時/クラス名:text‐center
p .text-right
右揃えにしたい時/クラス名:text‐right
21
3.⾏揃え
ブラウザの画⾯
22
4.テキスト⾊
<p>◆ノーマルテキスト⾊ <a href="*">ノーマルなテキストリンク⾊
</a></p>
<p class="text-muted">◆テキストバリエーション⾊[muted]/クラス名:
text-muted(リンク⾊指定なし)</p>
<p class="text-primary">◆重要⾊[primary]/クラス名:<a href="*"
class="text-primary">text-primary</a></p>
<p class="text-success">◆成功⾊[success]/クラス名:<a href="*"
class="text-success">text-success</a></p>
<p class="text-info">◆情報⾊[info]/クラス名:<a href="*" class="text-
info">text-info</a></p>
<p class="text-warning">◆警告⾊[warning]/クラス名:<a href="*"
class="text-warning">text-warning</a></p>
<p class="text-danger">◆危険⾊[danger]/クラス名:<a href="*"
class="text-danger">text-danger</a></p>
text-muted text-primary text-success
text-info text-warning text-danger
ク
ラ
ス名
コード
23
ブロック図
4.テキスト⾊
p . text-muted
◆テキストバリエーション⾊・・・< a href=“”></a>
p . text-primary
◆重要⾊[primary]/クラス名・・・< a href=“”></a>
p . text-success
◆成功⾊[success]/クラス名・・・< a href=“”></a>
・
・
・
24
ブラウザの画⾯
4.テキスト⾊
25
5.背景⾊
<p class="bg‐primary">◆重要⾊[primary]/クラス名:<a href="*" class="bg‐
primary">bg‐primary</a></p>
<p class="bg‐success">◆成功⾊[success]/クラス名:<a href="*" class="bg‐
success">bg‐success</a></p>
<p class="bg‐info">◆情報⾊[info]/クラス名:<a href="*" class="bg‐info">bg‐
info</a></p>
<p class="bg‐warning">◆警告⾊[warning]/クラス名:<a href="*" class="bg‐
warning">bg‐warning</a></p>
<p class="bg‐danger">◆危険⾊[danger・・]/クラス名:<a href="*" 
class="bg‐danger">bg‐danger</a></p>
bg-primary bg-success bg-info bg-warning
bg-danger
ク
ラ
ス名
コード
26
ブロック図
5.背景⾊
p . bg-primary
◆重要⾊[primary]/クラス名・・・< a href=“”></a>
p . text-success
◆成功⾊[success]/クラス名・・・< a href=“”></a>
p . text-info
◆情報⾊[info]/クラス名・・・< a href=“”></a>
・
・
・
27
ブラウザの画⾯
5.背景⾊
28
6.画像埋め込み
<img src=“../img/img01.jpg” class=“img‐responsive” alt=“画像"/>
img-responsive
ク
ラ
ス名
コード
29
ブロック図
6.画像埋め込み
<img src=“” class=“img-responsive” alt=“画像"/>
30
ブラウザの画⾯
6.画像埋め込み
親ブロックの横幅100%になる
31
<div class="embed-responsive embed-responsive-16by9">
<iframe class=“embed-responsive-item”
src=“//www.youtube.com/embed/xxxxx"></iframe>
</div>
embed-responsive embed-responsive-item
ク
ラ
ス名
コード
7.動画埋め込み
説明:
画⾯のアスペクト⽐を必ず⼊れる
例 16by9 4by3 など
32
ブロック図
7.動画埋め込み
div .embed-responsive
<iframe class=“embed-responsive-item”
src=“//www.youtube.com/embed/xxxxx
"></iframe>
33
ブラウザの画⾯
7.動画埋め込み
親ブロックの横幅100%になる
34
8.リスト
<ul class="list‐unstyled">
<li>リスト項⽬</li>
<li>
リスト項⽬
<ul>
<li>リスト項⽬</li>
<li>リスト項⽬</li>
<li>リスト項⽬</li>
<li>リスト項⽬</li>
<li>リスト項⽬</li>
</ul>
</li>
list-unstyled
ク
ラ
ス名
コード
<li>リスト項⽬</li>
<li>リスト項⽬</li>
<li>リスト項⽬</li>
</ul>
35
ブロック図
8.リスト
ul .list-unstyled
リスト項⽬li
リスト項⽬li
リスト項⽬li
ul
リスト項⽬li
36
ブラウザの画⾯
8.リスト
インデントがなくなる
37
9.リストのインライン化
<ul class="list‐inline">
<li>東京本店</li>
<li>札幌⽀店</li>
<li>神奈川⽀店</li>
<li>名古屋⽀店</li>
<li>⼤阪⽀店</li>
<li>福岡⽀店</li>
</ul>
list-inline
ク
ラ
ス名
コード
38
ブロック図
9.リストのインライン化
ul .list-inline
東京本店li
札幌⽀店li
神奈川⽀店li
・
・
・
39
ブラウザの画⾯
9.リストのインライン化
40
10.テーブル
<table class="table table‐striped table‐bordered table‐hover table‐condensed 
table‐responsive">
<thead>
<tr><th>部屋No.</th><th>部屋タイプ</th><th>定員</th><th>喫煙</th><th>
料⾦
</th> 
</tr>
</thead>
<tbody>
<tr><td>501</td><td>ツイン</td><td>2</td><td class="info">可</td><td 
class="text‐right">12,800円</td>
table table-striped table-bordered
table-hover table-condensed table-responsive
ク
ラ
ス名
コード
10.テーブル
</tr>
<tr><td>502</td><td>ツイン</td><td>2</td><td>不可</td><td class="text‐
right">10,800円</td>
</tr>
<tr><td>601</td><td>ツイン</td><td>2</td><td class="info">可</td><td 
class="text‐right">12,800円</td>
</tr>
<tr class="warning"><td>701</td><td>ツイン</td><td>2</td><td>不可
</td><td class="text‐right">20,800円</td>
</tr>
</tr>
<tr class="danger"><td>702</td><td>ツイン</td><td>2</td><td>不可</td><td 
class="text‐right">20,800円</td>
</tr
</tbody></table>
table table-striped table-bordered
table-hover table-condensed table-responsive
ク
ラ
ス名
コード
41
42
ブロック図
10.テーブル
省略
(テーブルのセルの構造をイメージしてください)
43
ブラウザの画⾯
10.テーブル
44
11.フォーム 基本
<div class="form‐group">
<label for="exampleInputEmail1">メールアドレス</label>
<input type="email" class="form‐control" id="exampleInputEmail1" 
placeholder="メールアドレス">
</div>
<div class="form‐group">
<label for="exampleInputPassword1">パスワード</label>
<input type="password" class="form‐control" 
id="exampleInputPassword1" placeholder="パスワード">
</div>
<div class="checkbox">
<label>
form-group form-control checkbox
input-XX col-nn-XX
ク
ラ
ス名
コード
※ XXにはサイズ、グリッド数が使えます
45
11.フォーム 基本
<input type="checkbox"> ログイン状態を維持する
</label>
</div>
<button type="submit" class="btn btn‐default">ログイン</button>
</form>
form-group form-control checkbox
input-XX col-nn-XX
ク
ラ
ス名
コード
※ XXにはサイズ、グリッド数が使えます
46
ブロック図
11.フォーム 基本
省略
(フォームの構造をイメージしてください)
47
ブラウザの画⾯
11.フォーム 基本
48
12.フォーム サイズ指定
<input class="form‐control input‐lg" type="text" placeholder=".input‐lg">
<input class="form‐control" type="text" placeholder="Default input">
<input class="form‐control input‐sm" type="text" placeholder=".input‐sm">
<div class="col‐xs‐2">
<input type="text" class="form‐control" placeholder=".col‐xs‐2">
</div>
<div class="col‐xs‐4">
<input type="text" class="form‐control" placeholder=".col‐xs‐4">
</div>
input-XX(⾼さの調整)
col-nn-XX(横幅の調整)
ク
ラ
ス名
コード
49
ブロック図
12.フォーム サイズ指定
省略
(フォームの構造をイメージしてください)
50
ブラウザの画⾯
12.フォーム サイズ指定
ブロック系
スタイルガイドを作る2
52
13.ジャンボトロン
<div class="jumbotron">
<div class="container">
<h1>Bootstrapgeek.biz</h1>
<p>Bootstrapgeek.bizはWebデザイナー、Webディレクターのための
Tips&学習サイトです。</p>
<p><a href=“” class=“btn btn‐danger btn‐lg”>3分でわかる
<br />bootstrapマスター講座</a></p>
</div>
</div>
jumbotron
ク
ラ
ス名
コード
53
ブロック図(例)
13.ジャンボトロン
div .jumbotron
⾒出し
.container
h1
div
⽂章、本⽂。
p
.btnbutton
54
ブラウザの画⾯
13.ジャンボトロン
この部分(画⾯のキービジュアル部分)
55
14.囲み記事
<div class="well">
<h4>wellの使⽤法</h4>
<p>特に注⽬させたいコンテンツやコラムなどに使⽤します。なお、HTML
要素ではなく、“well”は、bootstrap⽤語です。</p>
</div>
<div class="well well‐lg">
<h4>wellの使⽤法</h4>
<p>これはクラス名well‐lgを追加した場合。<br />特に注⽬させたいコンテ
ンツやコラムなどに使⽤します。なお、HTML要素ではなく、“well”は、
bootstrap⽤語です。</p>
</div>
well well-lg well-sm
ク
ラ
ス名
コード
※ <p>にも使えます。
56
ブロック図
14.囲み記事
省略
(ブロック構造をイメージしてください)
57
ブラウザの画⾯
14.囲み記事
58
15.サムネール
<div class="col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="../img/02.jpg" class="img-responsive" alt="⻄洋の城"/>
<div class="caption">
<h3>⻄洋の城</h3>
<p>軍事的な要塞もしくは貴族の住家として、中世に建てられた城が今でも数多
く現存しています。その中にはホテルとして利⽤されている城もあり、場内を⾒学
するだけでなく、宿泊や⾷事を楽しめる場合もあります。</p>
</div>
</div>
</div>
thumbnail
ク
ラ
ス名
コード
59
15.サムネール
<div class="col-xs-12 col-sm-6">
<div class="thumbnail">
<img src="../img/03.jpg" class="img-responsive" alt="⽇本の城"/>
<div class="caption">
<h3>⽇本の城</h3>
<p>⼤名や藩主の住居であり、政治的、軍事的な拠点としての役割を果たしてき
た⽇本の城は、その多くが戦争、⽕災、天災により失われています。天守閣が当時
のまま現存している城は数えるほどしかありません。</p>
</div>
</div>
</div>
thumbnail
ク
ラ
ス名
コード
60
ブラウザの画⾯
15.サムネール
61
ブロック図(例)
15.サムネール
div .col-XX-6
<img src=“”
class=“img-responsive”>
div .thumbnail
div .caption
h4
p
div .col-XX-6
<img src=“”
class=“img-responsive”>
div .thumbnail
div .caption
h4
p
62
Bootstrap3+WordPressセミナー
開催⽇時:
2015年7⽉11⽇(⼟)、18⽇(⼟)
17:30〜21:30
場所:
都内某所(新宿区)参加希望の⽅にご連絡します。
興味のある⽅は、na2ken.com の「専⽤フォーム
よりエントリーください。
WordPressの既存テーマで⾃由にデザ
イン出来なくて困っている⽅、オリジ
ナルテーマでレイアウトできたらどん
なに幸せか、と思ったことはありませ
んか?
WordPressのオリジナルテーマにBootstrap3を
ビルトインしました!

2479