1. 国際Webデザイナーズ協会
Webデベロッパー
夏本健司
Bootstrap集中講座
※記載しているソフトウェアやサービス、コーディング技術等は2015年6⽉18⽇現在のものであり、以降、仕様変更により機能や名称、画⾯
上の位置等が変更されている場合があります。
超・実践１

2. 2
今回マスターする１５個
1.⾒出し
2.セカンダリテキスト
3.⾏揃え
4.テキスト⾊
5.背景⾊
6.画像埋め込み
7.動画埋め込み
8.リスト
9.リストのインライン化
10.テーブル
11.フォーム 基本
12.フォーム サイズ指定
13.ジャンボトロン
14.囲み記事
15.サムネール
書式指定系 ブロック系

3. Bootstrap利⽤のポイント１

4. 4
ポイント１.
Bootstrapのコーディング精度はかなり⾼いです。「あれっ？これ、どう
なっているの？」と思うことの原因の⼤半は、Bootstrapが推奨していない
コーディング⽅法だったり、タグの書き間違いだったりします。
正確にコーディングすれば、ならず正常に表⽰・動作します。
これは、私が仕事の現場で実際に体験してきていることです。
ですので、「あれっ？」と思ったら、まずは公式サイトのガイドラインや
ネット上の信頼できそうなＴＩＰＳを参考にコードを⾒直してみましょう。
Bootstrapにバグはない（コードの精度が⾼い）。

5. 5
ポイント２.
Bootstrapは、HTMLへの記名ルールとしてＩＤ名は、使いません。
もともと、ＯＯＣＳＳやＳＭＡＣＳＳの考え⽅をベースにＣＳＳ設計をして
いるからです。
Bootstrapは、ＩＤ名を使わない。

6. 6
ポイント３.
よく「マルチクラスにすると、ブラウザのレンダリングの負担や処理速度の
遅延につながるのでは？」という質問を受けますが、私が現在、仕事をして
いる上で問題になったことは１度もありません。ブラウザのレンダリング時
間のネックになっている、という数値的根拠もありません。
もちろん、マルチクラスよりシングルクラスの⽅がシンプルだし、⼀般的に
考えて処理の時間は短いでしょう。でも変わるのは、おそらくコンマ００数
秒の時間の差でしょうし、そのくらいの時間であればブラウザのレンダリン
グ処理としては全く気にならない（差にならない）程度のわずかな時間で
しょう。
マルチクラスでも処理速度は遅くならない。

7. 7
ポイント４.
Bootstrapでは、「container」「row」のように画⾯の構造を受け持つブ
ロックに付ける名前や、「btn」「form-group」などのようにモジュールの
構造を受け持つための名前など、他のＣＳＳフレームワークやシステムでも
使われそうな名前が多くあります。
ＣＳＳで、同じ名前で複数のスタイルが設定されている場合で、それが意図
的でない場合は、「ＣＳＳ汚染」となって、意図したようにブラウザで表⽰
できない、いわゆる「表⽰崩れ」の⼤きな原因になります。
ですので、Bootsrapを使う場合は、他のＣＳＳフレームワークは使わない、
逆に他のＣＳＳフレームを使う場合は、Bootstrapは使わないようにしま
しょう。
まぜるな、危険！

8. 8
ポイント５.
Bootstrapには、現在、⼤きく分けて「バージョン２系」と「バージョン３
系」があります。メジャーバージョン名である整数部分の数字で区別します。
「バージョン２系」と「バージョン３系」では、同じ機能でもクラス名が
違ったり、使い⽅が違ったり、あるいは「バージョン２系」ではある機能が
「バージョン３系」では廃⽌になっているものもあります。
もしもネット上で情報検索する場合は、このバージョンをちゃんと識別する
必要があります。当然、「バージョン３系」でサイト構築をしていて、ネッ
ト上にある「バージョン２系」のＴＩＰＳで実装をしても、正常に表⽰・操
作しない場合があるからです。
私が「Bootstra3」と銘打っているのはそのためで、 「バージョン２系」と
区別するためです。
バージョン違えば別の顔

9. 9
ポイント６.
Bootstrapでサイト構築をする場合、あるいは表⽰テスト等する場合は、ぜ
ひ「スタイルガイド」を作って公開をしてください。
「スタイルガイド」にコンポーネントを書き溜めていくと、「汎⽤的な部品
のパーツ集」になり、次にサイト構築する時のライブラリになりますし、ク
ライントやプロジェクトメンバー内での情報共有・ガイドラインになります。
スタイルガイド作りに集中すること。

10. スタイルガイドを作る２

11. 書式指定系
スタイルガイドを作る２

12. 12
準備：HTMLを準備する
実際にBootstrapを使ってHTMLを書き出す時は、あちこち散乱させずに１
つのファイル・サイトとしてまとめておいた⽅が良いです。あとで書き⾜し
たりすれば、あなた⾃⾝の「百科事典」になりますし、実際に仕事でも使え
るライブラリにするためです。
勉強のための「短なる演習」にせず、実際に「使えるツール」にしてくださ
い。
前々回のHTMLテンプレートや、⾃分でレイアウト・デザインの雛形を持っ
ている⼈は、それに書き⾜していくようにしましょう。
スタイルガイドにするHTMLを準備する。

13. 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. 14
1.⾒出し
ブロック図
h1 .h1
ページの⾒出し、英名は「heading」。
h1 .h2
ページの⾒出し、英名は「heading」。
h1 .h3
ページの⾒出し、英名は「heading」。
h1 .h3
ページの⾒出し、英名は「heading」。

15. 15
1.⾒出し
ブラウザの画⾯

16. 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. 17
2.セカンダリテキスト
ブロック図
h1 .h1
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h2
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h3
ページの⾒出し、<small>英名は「heading」。</small>
h1 .h3
ページの⾒出し、<small>英名は「heading」。</small>

18. 18
2.セカンダリテキスト
ブラウザの画⾯

19. 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. 20
3.⾏揃え
ブロック図
ｐ .text-left
左揃えにしたい時／クラス名：text‐left
ｐ .text-center
中央揃えにしたい時／クラス名：text‐center
ｐ .text-right
右揃えにしたい時／クラス名：text‐right

21. 21
3.⾏揃え
ブラウザの画⾯

22. 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. 23
ブロック図
4.テキスト⾊
ｐ . text-muted
◆テキストバリエーション⾊・・・< a href=“”></a>
ｐ . text-primary
◆重要⾊[primary]／クラス名・・・< a href=“”></a>
ｐ . text-success
◆成功⾊[success]／クラス名・・・< a href=“”></a>
・
・
・

24. 24
ブラウザの画⾯
4.テキスト⾊

25. 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. 26
ブロック図
5.背景⾊
ｐ . bg-primary
◆重要⾊[primary]／クラス名・・・< a href=“”></a>
ｐ . text-success
◆成功⾊[success]／クラス名・・・< a href=“”></a>
ｐ . text-info
◆情報⾊[info]／クラス名・・・< a href=“”></a>
・
・
・

27. 27
ブラウザの画⾯
5.背景⾊

28. 28
6.画像埋め込み
<img src=“../img/img01.jpg” class=“img‐responsive” alt=“画像"/>
img-responsive
ク
ラ
ス名
コード

29. 29
ブロック図
6.画像埋め込み
<img src=“” class=“img-responsive” alt=“画像"/>

30. 30
ブラウザの画⾯
6.画像埋め込み
親ブロックの横幅１００％になる

31. 31
<div class="embed-responsive embed-responsive-16by9">
<iframe class=“embed-responsive-item”
src=“//www.youtube.com/embed/ｘｘｘｘｘ"></iframe>
</div>
embed-responsive embed-responsive-item
ク
ラ
ス名
コード
7.動画埋め込み
説明：
画⾯のアスペクト⽐を必ず⼊れる
例 16by9 4by3 など

32. 32
ブロック図
7.動画埋め込み
div .embed-responsive
<iframe class=“embed-responsive-item”
src=“//www.youtube.com/embed/ｘｘｘｘｘ
"></iframe>

33. 33
ブラウザの画⾯
7.動画埋め込み
親ブロックの横幅１００％になる

34. 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. 35
ブロック図
8.リスト
ul .list-unstyled
リスト項⽬li
リスト項⽬li
リスト項⽬li
ul
リスト項⽬li

36. 36
ブラウザの画⾯
8.リスト
インデントがなくなる

37. 37
9.リストのインライン化
<ul class="list‐inline">
<li>東京本店</li>
<li>札幌⽀店</li>
<li>神奈川⽀店</li>
<li>名古屋⽀店</li>
<li>⼤阪⽀店</li>
<li>福岡⽀店</li>
</ul>
list-inline
ク
ラ
ス名
コード

38. 38
ブロック図
9.リストのインライン化
ul .list-inline
東京本店li
札幌⽀店li
神奈川⽀店li
・
・
・

39. 39
ブラウザの画⾯
9.リストのインライン化

40. 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
ク
ラ
ス名
コード

41. 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. 42
ブロック図
10.テーブル
省略
（テーブルのセルの構造をイメージしてください）

43. 43
ブラウザの画⾯
10.テーブル

44. 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. 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. 46
ブロック図
11.フォーム 基本
省略
（フォームの構造をイメージしてください）

47. 47
ブラウザの画⾯
11.フォーム 基本

48. 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. 49
ブロック図
12.フォーム サイズ指定
省略
（フォームの構造をイメージしてください）

50. 50
ブラウザの画⾯
12.フォーム サイズ指定

51. ブロック系
スタイルガイドを作る２

52. 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. 53
ブロック図（例）
13.ジャンボトロン
div .jumbotron
⾒出し
.container
h1
div
⽂章、本⽂。
ｐ
.btnbutton

54. 54
ブラウザの画⾯
13.ジャンボトロン
この部分（画⾯のキービジュアル部分）

55. 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. 56
ブロック図
14.囲み記事
省略
（ブロック構造をイメージしてください）

57. 57
ブラウザの画⾯
14.囲み記事

58. 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. 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. 60
ブラウザの画⾯
15.サムネール

61. 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. 62
Bootstrap3+WordPressセミナー
開催⽇時：
２０１５年７⽉11⽇（⼟）、18⽇（⼟）
１７：３０〜２１：３０
場所：
都内某所（新宿区）参加希望の⽅にご連絡します。
興味のある⽅は、na2ken.com の「専⽤フォーム
よりエントリーください。
WordPressの既存テーマで⾃由にデザ
イン出来なくて困っている⽅、オリジ
ナルテーマでレイアウトできたらどん
なに幸せか、と思ったことはありませ
んか？
WordPressのオリジナルテーマにBootstrap3を
ビルトインしました！