世界一わかりやすい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