Boostrap勉強会

1. BootStrap3 勉強会
1

2. はじめに
2

3. BootStrapとは
Twitter社製CSSフレームワーク
3

4. 4
CSSフレームワークって
そもそも何よ？

5. つまり
5

6. こういうのとか
6

7. こういうのとか
7

8. こういうのとか
8

9. 9
楽できる要素が
たくさん入っている
ツール郡

10. 10
素敵！

11. 11
ただし

12. 12

13. 正しく使わないと・・・
13

14. 前 提
Bootstrap3を使うことを
前提とします
14

15. 15
Bootstrapの基本
Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意点
インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能
グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA
質疑応答

16. 16
Bootstrapの基本
Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意点
インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能
グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA
質疑応答

17. BootStrapの基本
17

18. Bootstrap3の特徴
18
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン

19. モバイルファースト（カルーセル）
19

20. モバイルファースト（Form）
20

21. Bootstrap3の特徴
21
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン
・アイコンフォント採用

22. フラットデザイン
22

23. Bootstrap3の特徴
23
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン
・アイコンフォント採用

24. アイコンフォント採用
24
→Font Awesomeを使えば、更に拡張可能！

25. 対応ブラウザ
25
IE7・Firefox3.6非対応！
※IE８に対応する場合はRespond.jsとhtml5shiv. jsが必要（HTML5、CSS3 Media QueriesをIE8で有効にできる）

26. 事例紹介
26
http://online.actus-interior.com/
http://www.newsweek.com/
その他多数…

27. 27
Bootstrapの基本
Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意点
インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能
グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA
質疑応答

28. Bootstrapの始め方と注意点
28

29. インストール方法
29
http://getbootstrap.com/

30. インストール方法
30

31. インストール方法
31
Bootstrap CSS本体（非圧縮）
Bootstrap CSS本体（圧縮）
Bootstrap CSSテーマ本体（非圧縮）
Bootstrap CSSテーマ本体（圧縮）
Bootstrap JS本体（非圧縮）
Bootstrap JS本体（圧縮）
フォントアイコン集

32. インストール方法
32
Bootstrap CSS本体（非圧縮）
Bootstrap CSS本体（圧縮）
Bootstrap CSSテーマ本体（非圧縮）
Bootstrap CSSテーマ本体（圧縮）
Bootstrap JS本体（非圧縮）
Bootstrap JS本体（圧縮）
フォントアイコン集

33. インストール方法
33
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
CDN使って導入することもできます

34. Bootstrapの基本テンプレート
34
別画面にて

35. 基本的な使い方
35
・各機能単位のclassがある
・そのclassを付与することでデザインを実現する
・機能のclassは複数付与することが可能

36. Class名の命名規則について
36
・Bootstrapの命名規則は「OOCSS」が基本
・ワードの区切りは「-」で統一
・複数のclassで機能を作り上げる
→OOCSSとは「Object Oriented CSS」の略

37. CSSの基本構造
37
例）<p class=“btn btn-primary”>ボタン</p>
.btn {
～ボタンの共通CSS～
}
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
}

38. 38
Bootstrapの基本
Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意点
インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能
グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA
質疑応答

39. Bootstrapの機能
39

40. こういうのとか
40

41. こういうのとか
41

42. こういうのとか
42

43. グリッドシステム（基本）
・ページ全体を１２分割する
・１２列に足りない場合は、空白ができる
・１２列を超える場合は、下に行に落ちる
・container/container-fluid > row > col-**-*の仕組みでコーディングしないといけない
・固定幅はcontainer、可動幅はcontainer-fluidを使う
・グリッドの入れ子もできる
・containerの幅は940px
43

44. グリッドシステム（基本）
44

45. グリッドシステム（基本）
45

46. 46
とりあえずやってみよう

47. グリッドシステム（応用）
・ブロックの左右ずらしをすることも可能
・ブロックの順番を入れ替えることもできる（レスポンシブル対応）
47

48. 48
やってみよう

49. グリッドシステム（レスポンシブル）
・画面幅サイズ毎に設定を変えることができる
・画面幅に応じて表示・非表示を切り分けることができる
・col-xs～は最終的に適用されるclassなので、記載しておいた方がよい
49

50. グリッドシステムの優先度
50
画面幅
0px～768px 769px～991px 992px～1199px 1200px
class
col-lg-N - - - 1
col-md-N - - 1 2
col-sm-N - 1 2 3
col-xs-N 1 2 3 4

51. グリッドシステム（印刷）
・印刷時に要素を消すことができる（hidden-print）
・bootstrap標準では背景が消されている
・印刷時のみ、ブロック要素・インライン要素を切り替えるclassがある
51

52. アイコンフォントの使い方
・標準で入っているアイコンは以下の通り
http://getbootstrap.com/components/
・空タグにclassを設定するだけ
・スクリーンリーダー向けに「aria-hidden=“true”」を入れておく
52

53. Font-Awesomeの使い方
CSSを読み込むだけ！
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-
awesome/4.3.0/css/font-awesome.min.css">
53
書き方
<span class=“fa fa-twitter”></span>

54. 基本コンポーネント
ここ見たらだいたい分かる
http://www.wivern.com/bootstrap/components.html
54

55. 今後の展望的な話
・レスポンシブ対応が増えるのは間違いないので、グリッド
システムだけでも導入するべきではないか
・CSS設計概念としてはキレイので、bootstrapのthemeを作成
することでコーディングをするのは不可能か
・BootstrapからSassやLessなどのタスクランナー導入を進め
ることはできないか
55

56. 56
質疑応答