boot strap3 勉強会
TRANSCRIPT
1
BootStrap3 勉強会
2
はじめに
3
BootStrapとは
Twitter社製 CSSフレームワーク
4
CSSフレームワークっ
てそもそも何よ？
5
つまり
6
こういうのとか
7
こういうのとか
8
こういうのとか
9
楽できる要素が
たくさん入っている
ツール郡
10
素敵！
11
ただし
12
13
正しく使わないと・・・
14
前 提
Bootstrap3を使うことを 前提とします
15
Bootstrapの基本Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意
点インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA質疑応答
16
Bootstrapの基本Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意
点インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA質疑応答
17
BootStrapの基本
18
Bootstrap3の特徴
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン
19
モバイルファースト（カルーセル）
20
モバイルファースト（ Form）
21
Bootstrap3の特徴
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン
・アイコンフォント採用
22
フラットデザイン
23
Bootstrap3の特徴
・モバイルファースト
・レスポンシブルWebデザイン全面採用
・フラットデザイン
・アイコンフォント採用
24
アイコンフォント採用
→Font Awesomeを使えば、更に拡張可能！
25
対応ブラウザ
IE7・ Firefox3.6非対
応！
※IE８に対応する場合は Respond.jsと html5shiv. jsが必要（ HTML5、 CSS3 Media Queriesを IE8で有
効にできる）
26
事例紹介
http://online.actus-interior.com/
http://www.newsweek.com/その他多数…
27
Bootstrapの基本Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意
点インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA質疑応答
28
Bootstrapの始め方と注意
点
29
インストール方法http://getbootstrap.com/
30
インストール方法
31
インストール方法Bootstrap CSS本体（非圧縮）
Bootstrap CSS本体（圧縮）
Bootstrap CSSテーマ本体（非圧
縮）
Bootstrap CSSテーマ本体（圧縮）
Bootstrap JS本体（非圧縮）
Bootstrap JS本体（圧縮）
フォントアイコン集
32
インストール方法Bootstrap CSS本体（非圧縮）
Bootstrap CSS本体（圧縮）
Bootstrap CSSテーマ本体（非圧
縮）
Bootstrap CSSテーマ本体（圧縮）
Bootstrap JS本体（非圧縮）
Bootstrap JS本体（圧縮）
フォントアイコン集
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の基本テンプレート
別画面にて
35
基本的な使い方
・各機能単位の classがある
・その classを付与することでデザインを実現する
・機能の classは複数付与することが可能
36
Class名の命名規則について
・ Bootstrapの命名規則は「 OOCSS」が基本
・ワードの区切りは「 -」で統一
・複数の classで機能を作り上げる
→OOCSSとは「 Object Oriented CSS」の略
37
CSSの基本構造
例）<p class=“btn btn-primary”>ボタン
</p>.btn {～ボタンの共通 CSS～}.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4}
38
Bootstrapの基本Bootstrap3の特徴
対応ブラウザについて
事例紹介
Bootstrapの始め方と注意
点インストール方法
基本テンプレート
基本的な使い方
Class名の命名規則について
Bootstrapの機能グリッドシステム
アイコンフォント
font-awesomeの使い方
基本コンポーネント説明
BootstrapのQA質疑応答
39
Bootstrapの機能
40
こういうのとか
41
こういうのとか
42
こういうのとか
43
グリッドシステム（基本） ・ページ全体を１２分割する
・１２列に足りない場合は、空白ができる
・１２列を超える場合は、下に行に落ちる
・ container/container-fluid > row > col-**-*の仕組みでコーディングしないといけない
・固定幅は container、可動幅は container-fluidを使う
・グリッドの入れ子もできる
・ containerの幅は 940px
44
グリッドシステム（基本）
45
グリッドシステム（基本）
46
とりあえずやってみよう
47
グリッドシステム（応用）
・ブロックの左右ずらしをすることも可能
・ブロックの順番を入れ替えることもできる（レスポンシブル対応）
48
やってみよう
49
グリッドシステム（レスポンシブル）
・画面幅サイズ毎に設定を変えることができる
・画面幅に応じて表示・非表示を切り分けることができる
・ col-xs～は最終的に適用される classなので、記載しておいた方がよい
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がある
52
アイコンフォントの使い方 ・標準で入っているアイコンは以下の通り
http://getbootstrap.com/components/
・空タグに classを設定するだけ
・スクリーンリーダー向けに「 aria-hidden=“true”」を入れておく
53
Font-Awesomeの使い方 CSSを読み込むだけ！
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-
awesome/4.3.0/css/font-awesome.min.css">
書き方
<span class=“fa fa-twitter”></span>
54
基本コンポーネント
ここ見たらだいたい分かる
http://www.wivern.com/bootstrap/components.html
55
今後の展望的な話 ・レスポンシブ対応が増えるのは間違いないので、グリッドシ
ステムだけでも導入するべきではないか
・ CSS設計概念としてはキレイので、 bootstrapの themeを
作成することでコーディングをするのは不可能か
・ Bootstrapから Sassや Lessなどのタスクランナー導入を
進めることはできないか
56
質疑応答