Bootstrap
- 2. お前は誰だ？ 楠畑 奨輝（くすはた まさき） ● 株式会社富士通鹿児島インフォネット ● 「毎日を面白くする」をモットーにしている ● ビールと車と音楽が好き ● 社内の業務をきっかけに、HTML5について半年前から少し ずつ勉強し始める
- 3. なんか最近かっこいい Webサイト/Webアプリ 多くありませんか???？ ● エフェクトを使用してる感覚的に使えるWebアプリ ● JavaScriptやCSSを使用した華やかな画面 ● 笔颁、スマホ、タブレット対応
- 4. 私の周りの 業務系Webサイト/Webアプリ を見てみると歴史を感じる??? ● 無機質なお固いWebアプリ ● 素のHTMLタグとカンタンなCSSで作られている質素な画面 ● ブラウザを狭めると隠れてしまう笔颁専用业务奥别产アプリ
- 7. ● 表現力豊かで華やかな画面 ● 夢を形にするスピード ● 見る媒体を問わない自由さ その要望に 応えたい
- 8. しかし、現実は残酷だった??? ● 壊滅的なデザインセンス ● 頑張れば頑張るほど荒れるソースコード ● 見る媒体によって表情を変える画面（悪い意味で） もうダメだ泣きたい…
- 10. Bootstrapって何？ ● Twitter製CSSフレームワーク ● オープンソース（MIT License） ● サンプルを見ながらカンタンにかっこい い画面を作れる。 ● PC、スマートフォン、タブレット対応の サイトを作りやすい。 ● カスタマイズが容易。
- 12. 世の中でもけっこう使われていた 薩摩川内市 | 次世代エネルギー AGATHA E-SHOPCoiney
- 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列 ウィンドウ幅によって適用される列数が変わる
- 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/
- 35. Bootstrap で Enjoy Engineer Life!! ご清聴ありがとうございました