Upgrade to Pro — share decks privately, control downloads, hide ads and more …

世界一わかりやすいBootstrap

 世界一わかりやすいBootstrap

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

F1e359b5fb3358d9051bcfaf43a4e3af?s=128

Designsprint

June 11, 2016
Tweet

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の事例1 国内でも利⽤ケースが多くなってきています。

  7. 7 Bootstrapの事例2 国内でも利⽤ケースが多くなってきています。

  8. 8 Bootstrapの事例3 国内でも利⽤ケースが多くなってきています。

  9. 9 Bootstrapの事例4 国内でも利⽤ケースが多くなってきています。

  10. 10 Bootstrapの特徴 なぜ、多くの支持を集めているのか? 1 グリッドシステムがある 3 パーツの網羅性 2 レスポンシブWebデザインの完備 4

    JSのライブラリー集とプラグインの豊富さ 5 カスタマイズザー、テンプレートが豊富
  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 テンプレートーリストー 1 グリッドシステムがある 3 パーツの網羅性 2 レスポンシブWebデザインの完備 4 JSのライブラリー集がある

    5 カスタマイズザー、テンプレートが豊富
  23. 基本ファイルの確認

  24. 24 基本ファイルのファイル構成 24

  25. 25 基本セットのファイル構成 25

  26. 26 基本セットのファイル構成 26

  27. 27 基本セットのファイル構成 27

  28. 28 基本セットのファイル構成 28

  29. 29 基本セットのファイル構成 29

  30. グリッドを利⽤した ページレイアウト実習

  31. 31 レイアウト例1 31

  32. 32 レイアウト例2 32

  33. 33 レイアウト例3 33

  34. 34 レイアウト例4 34