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

世界一わかりやすいBootstrap

 世界一わかりやすいBootstrap

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

Designsprint

June 11, 2016
Tweet

More Decks by Designsprint

Other Decks in Design

Transcript

  1. Bootstrap
    Bootstrapの使い方

    View full-size slide

  2. Boostrapの基礎

    View full-size slide

  3. 3
    Bootstrapとは?
    Web制作を補助してくれるCSS
    の書式指定を集めたライブラリ
    集です。
    CSSフレームワークといい、自
    分でゼロからCSSを記述しなく
    ても、ブロックを組み合わせる
    ようにレイアウトのブロック、
    ボタンやフォームなどのパーツ
    をHTMLでレイアウトすること
    で、画面を作成できます。
    また、そのパーツのデザインも
    予め施されているので、カラー
    設計を詳細に⾏わなくてもカ
    ラー統制ができます。

    View full-size slide

  4. 4
    Bootstrapの位置感
    HTML5
    言語 フレームワーク
    考え・概念 製品名・サービス名
    bootstrap

    View full-size slide

  5. 5
    Bootstrapのメリット
    こんなにある利⽤のメリット
    短時間である程度⾒た目のよいWebサイトを構築するこ
    とができます。
    昨今では、制作のスピードが求められる案件が多いので、
    使い方さえ覚えれば、短期間である程度の画面を完成さ
    せられるので、利⽤ニーズが上がっています。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 10
    Bootstrapの特徴
    なぜ、多くの支持を集めているのか?
    1 グリッドシステムがある
    3 パーツの網羅性
    2 レスポンシブWebデザインの完備
    4 JSのライブラリー集とプラグインの豊富さ
    5 カスタマイズザー、テンプレートが豊富

    View full-size slide

  11. 11
    Bootstrapでできること
    テンプレートを利⽤してレイアウトする

    View full-size slide

  12. 12
    Bootstrapでできること
    テンプレートを利⽤してレイアウトする

    View full-size slide

  13. 13
    Bootstrapでできること
    テンプレートを利⽤してレイアウトする

    View full-size slide

  14. 14
    Bootstrapでできること
    グリッドシステムを活⽤してレイアウトできる

    View full-size slide

  15. 15
    Bootstrapでできること
    ナビゲーションカンタンに作成できる

    View full-size slide

  16. 16
    Bootstrapでできること
    ナビゲーションカンタンに作成できる

    View full-size slide

  17. 17
    Bootstrapでできること
    ナビゲーションカンタンに作成できる

    View full-size slide

  18. 18
    Bootstrapでできること
    カバーテンプレートを利⽤し、トップページを作成できる

    View full-size slide

  19. 19
    Bootstrapでできること
    カバーテンプレートを利⽤し、トップページを作成できる

    View full-size slide

  20. 20
    Bootstrapでできること
    カバーテンプレートを利⽤し、トップページを作成できる

    View full-size slide

  21. 21
    Bootstrapでできること
    200種類のアイコンを利⽤できる

    View full-size slide

  22. 22
    テンプレートーリストー
    1 グリッドシステムがある
    3 パーツの網羅性
    2 レスポンシブWebデザインの完備
    4 JSのライブラリー集がある
    5 カスタマイズザー、テンプレートが豊富

    View full-size slide

  23. 基本ファイルの確認

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 31
    レイアウト例1
    31

    View full-size slide

  32. 32
    レイアウト例2
    32

    View full-size slide

  33. 33
    レイアウト例3
    33

    View full-size slide

  34. 34
    レイアウト例4
    34

    View full-size slide