1. Bootstrap超入門
株式会社富士通鹿児島インフォネット
楠畑 奨輝（くすはた まさき）

2. お前は誰だ？
楠畑 奨輝（くすはた まさき）
● 株式会社富士通鹿児島インフォネット
● 「毎日を面白くする」をモットーにしている
● ビールと車と音楽が好き
● 社内の業務をきっかけに、HTML5について半年前から少し
ずつ勉強し始める

3. なんか最近かっこいい
Webサイト/Webアプリ
多くありませんか・・・？
● エフェクトを使用してる感覚的に使えるWebアプリ
● JavaScriptやCSSを使用した華やかな画面
● PC、スマホ、タブレット対応

4. 私の周りの
業務系Webサイト/Webアプリ
を見てみると歴史を感じる・・・
● 無機質なお固いWebアプリ
● 素のHTMLタグとカンタンなCSSで作られている質素な画面
● ブラウザを狭めると隠れてしまうPC専用業務Webアプリ

5. 業務系はこういうものなんだろう
と思っていました。
ところが！

6. Webが身近なものになり求められる
クオリティが高くなってきた！？
今どきのカッコいい画面にしてよ
イメージが湧かないから
サクッと作って見せてよ
PC・タブレット・スマホで対応で
よろしく
大事なお客様

7. ● 表現力豊かで華やかな画面
● 夢を形にするスピード
● 見る媒体を問わない自由さ
その要望に
応えたい

8. しかし、現実は残酷だった・・・
● 壊滅的なデザインセンス
● 頑張れば頑張るほど荒れるソースコード
● 見る媒体によって表情を変える画面（悪い意味で）
もうダメだ泣きたい…

9. そんな私を助けてくれたのが・・・
Bootstrap
でした。

10. Bootstrapって何？
● Twitter製CSSフレームワーク
● オープンソース（MIT License）
● サンプルを見ながらカンタンにかっこい
い画面を作れる。
● PC、スマートフォン、タブレット対応の
サイトを作りやすい。
● カスタマイズが容易。

11. Bootstrapを使うとどうなるの？
楽して
カッコイイ画面を作れる
コードをたくさん書かなくても

12. 世の中でもけっこう使われていた
薩摩川内市 | 次世代エネルギー AGATHA E-SHOPCoiney

13. 実際使おうと思ったら
どんなもんなの？Bootstrap？

14. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

15. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

16. １．豊富な種類のCSSスタイル定義
● ナビゲーション
● テキストボックス
● ボタン
● テーブル
● ページング

17. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

18. ２．グリッドシステム
ページ全体を１２列に分割して構成する
col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1 col-xs-1
col-xs-6 col-xs-6
col-xs-3 col-xs-3 col-xs-3 col-xs-3
col-xs-5 col-xs-1 col-xs-2 col-xs-6

19. ２．グリッドシステム
端 末 クラス 0px以上 768px以上 992px以上 1200px以上
スマートフォン col-xs-N 優先度
（１）
優先度
（２）
優先度
（３）
優先度
（４）
タブレット col-sm-N 優先度
（１）
優先度
（２）
優先度
（３）
パソコン col-md-N 優先度
（１）
優先度
（２）
大画面
パソコン
col-lg-N 優先度
（１）

20. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

21. ３．レスポンシブWebデザイン
● ウィンドウ幅が 992px ～ 1199px
例）class=”col-md-2 col-sm-10 col-xs-8” → 2列
● ウィンドウ幅が 768px ～ 991px
例）class=”col-md-2 col-sm-10 col-xs-8” → 10列
● ウィンドウ幅が 0px ～ 767px
例）class=”col-md-2 col-sm-10 col-xs-8” → 8列
ウィンドウ幅によって適用される列数が変わる

22. ３．レスポンシブWebデザイン
１つのソースコードでレスポンシブ対応

23. ３．レスポンシブWebデザイン
PCで見る
col-md-6
（画像）
col-md-3
（犬名）
col-md-3
（特徴）

24. ３．レスポンシブWebデザイン
スマートフォンで見る
ccol-xs-12
（画像）
ccol-xs-6
（犬名）
ccol-xs-6
（特徴）

25. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

26. ４．JavaScriptコンポーネント
● モーダルダイアログ
● タブ
● ツールチップ
● ポップバー
● その他いろいろ

27. ４．JavaScriptコンポーネント
● モーダルダイアログ
● タブ
● ツールチップ
● ポップバー
● その他いろいろ

28. ４．JavaScriptコンポーネント
● モーダルダイアログ
● タブ
● ツールチップ
● ポップバー
● その他いろいろ

29. ４．JavaScriptコンポーネント
● モーダルダイアログ
● タブ
● ツールチップ
● ポップバー
● その他いろいろ

30. Bootstrapの特徴とは？
1. 豊富な種類のCSSスタイル定義
2. グリッドシステム
3. レスポンシブWebデザイン
4. JavaScriptコンポーネント
5. カスタマイズ

31. ５．カスタマイズ
公式サイトでカスタマイズして取得できる
● テーマカラーの設定
● コンポーネントのCSS設定
● 画面のブレイクポイント設定
http://getbootstrap.com/customize/

32. ５．カスタマイズ
フリーテーマを配布している
サイトで自分好みのテーマを
適用することができる。
https://bootswatch.com/

33. 公式サイトが最強である
公式サイト：http://getbootstrap.com/
GitHub ：https://github.com/twbs/bootstrap

34. どれだけ簡単に作れるのかコ
ードを見てみよう

35. Bootstrap で
Enjoy Engineer Life!!
ご清聴ありがとうございました