世界一わかりやすいBootstrap

CSSフレームワークの１つ「Bootstrap」をわかりやすく解説しています。

Transcript

1. Bootstrap Bootstrapの使い方
2. Boostrapの基礎
3. 3 Bootstrapとは？ Web制作を補助してくれるCSS の書式指定を集めたライブラリ 集です。 CSSフレームワークといい、自 分でゼロからCSSを記述しなく ても、ブロックを組み合わせる ようにレイアウトのブロック、 ボタンやフォームなどのパーツ をHTMLでレイアウトすること で、画面を作成できます。 また、そのパーツのデザインも 予め施されているので、カラー 設計を詳細に⾏わなくてもカ ラー統制ができます。
4. 4 Bootstrapの位置感 HTML5 言語 フレームワーク 考え・概念 製品名・サービス名 bootstrap
5. 5 Bootstrapのメリット こんなにある利⽤のメリット 短時間である程度⾒た目のよいWebサイトを構築するこ とができます。 昨今では、制作のスピードが求められる案件が多いので、 使い方さえ覚えれば、短期間である程度の画面を完成さ せられるので、利⽤ニーズが上がっています。
6. 6 Bootstrapの事例１ 国内でも利⽤ケースが多くなってきています。
7. 7 Bootstrapの事例２ 国内でも利⽤ケースが多くなってきています。
8. 8 Bootstrapの事例３ 国内でも利⽤ケースが多くなってきています。
9. 9 Bootstrapの事例４ 国内でも利⽤ケースが多くなってきています。
10. 10 Bootstrapの特徴 なぜ、多くの支持を集めているのか？ １ グリッドシステムがある ３ パーツの網羅性 ２ レスポンシブWebデザインの完備 ４ JSのライブラリー集とプラグインの豊富さ ５ カスタマイズザー、テンプレートが豊富
11. 11 Bootstrapでできること テンプレートを利⽤してレイアウトする
12. 12 Bootstrapでできること テンプレートを利⽤してレイアウトする
13. 13 Bootstrapでできること テンプレートを利⽤してレイアウトする
14. 14 Bootstrapでできること グリッドシステムを活⽤してレイアウトできる
15. 15 Bootstrapでできること ナビゲーションカンタンに作成できる
16. 16 Bootstrapでできること ナビゲーションカンタンに作成できる
17. 17 Bootstrapでできること ナビゲーションカンタンに作成できる
18. 18 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
19. 19 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
20. 20 Bootstrapでできること カバーテンプレートを利⽤し、トップページを作成できる
21. 21 Bootstrapでできること 200種類のアイコンを利⽤できる
22. 22 テンプレートーリストー １ グリッドシステムがある ３ パーツの網羅性 ２ レスポンシブWebデザインの完備 ４ JSのライブラリー集がある ５ カスタマイズザー、テンプレートが豊富
23. 基本ファイルの確認
24. 24 基本ファイルのファイル構成 24
25. 25 基本セットのファイル構成 25
26. 26 基本セットのファイル構成 26
27. 27 基本セットのファイル構成 27
28. 28 基本セットのファイル構成 28
29. 29 基本セットのファイル構成 29
30. グリッドを利⽤した ページレイアウト実習
31. 31 レイアウト例１ 31
32. 32 レイアウト例２ 32
33. 33 レイアウト例３ 33
34. 34 レイアウト例４ 34