20201129WBALT.pdf

Transcript

1. CSSライブラリ
   めっちゃ素敵だよ
   Bootstrapはこれだけ、の３つのポイント-
   2020.11.29 WBALT
   

   View Slide

2. 自己紹介
   ● 上西真由（うにすけ）
   ● 埼玉県出身
   ● 東北大学工学部電気情報物理工学科３年
   ● フロントエンドばっかり
   ● はじめてのIT勉強会副代表
   @uniuni__8282 mayu.uenishi.1
   

   View Slide

3. みなさんHTML/CSS好きですか
   

   View Slide

4. WBAにはフロント好んで
   書いている人はいないイメージ...
   

   View Slide

5. でもHTML/CSSだけできれば....
   

   View Slide

6. こんなの作ってお小遣い稼ぎもできる
   

   View Slide

7. ね。HTML/CSS悪くないよね。
   

   View Slide

8. そんな私はBootstrap狂愛者なので
   

   View Slide

9. みんなにも知って欲しい
   

   View Slide

10. CSSライブラリ触ったことない人
    and
    フロントよりバックエンドの方が好きな人
    このLTのターゲット
    

    View Slide

11. ● 全員がBootstrapめっちゃ簡単じゃんって
    言ってくれること
    ● 個人的に思う３つのポイントを空で言える
    ようになること
    このLTのゴール
    

    View Slide

12. ※個人的な見解です
    早速ですが...３つのポイントって？
    

    View Slide

13. ● 12カラム
    ● ブレイクポイント
    ● CSSライブラリはクラスの塊
    個人的これだけわかっていれば、の３ポイント
    

    View Slide

14. ● 12カラム
    ● ブレイクポイント
    ● CSSライブラリはクラスの塊
    個人的これだけわかっていれば、の３ポイント
    

    View Slide

15. それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ
    イン手法
    簡単に言うと...
    格子状の枠内にオブジェクトを置きましょう！そしたら綺麗に見える
    よ！の考え方
    グリッドレイアウトとは
    ◎ ×
    

    View Slide

16. それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ
    イン手法
    簡単に言うと...
    格子状の枠内にオブジェクトを置きましょう！そしたら綺麗に見える
    よ！の考え方
    グリッドレイアウトとは
    ◎ ×
    

    View Slide

17. 親要素(.row)の幅を12分割
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    

    View Slide

18. Bootstrapの既存クラスを使うと..全部.col-1
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    

    View Slide

19. 親要素の3分の1幅の格子ができる
    Bootstrapが持つ12カラムの考え方
    col-4 6
    5 10
    9
    8
    7 11 12
    col-4 col-4 col-4
    

    View Slide

20. 親要素の4分の1幅の格子ができる
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    col-3 col-3 col-3 col-3
    

    View Slide

21. Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    

    View Slide

22. ● 12カラム　のまとめ
    ● ブレイクポイント
    ● CSSライブラリはクラスの塊
    個人的これだけわかっていれば、の３ポイント
    

    View Slide

23. Bootstrapの既存クラスだけで簡単に
    ブリッドレイアウトが作れる！
    

    View Slide

24. でも...
    

    View Slide

25. どんな画面幅でも同じグリッド幅使うと
    レイアウト崩れる...
    

    View Slide

26. 親要素の4分の1幅の格子ができる
    Bootstrapが持つ12カラムの考え方
    col-3 col-3 col-3 col-3
    c
    ol
    -
    3
    c
    ol
    -
    3
    c
    ol
    -
    3
    c
    ol
    -
    3
    

    View Slide

27. そんな時に！！
    

    View Slide

28. ● 12カラム
    ● ブレイクポイント
    ● CSSライブラリはクラスの塊
    個人的これだけわかっていれば、の３ポイント
    

    View Slide

29. さっきのcol-3をcol-md-3にしてみる
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    col-md-3 col-md-3 col-md-3 col-md-3
    画面幅は
    768px以上ね
    

    View Slide

30. さっきのcol-3をcol-md-3にしてみる
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    画面幅が
    768pxを下回る
    と...
    

    View Slide

31. さっきのcol-3をcol-md-3にしてみる
    Bootstrapが持つ12カラムの考え方
    1 2 6
    4 5
    3 10
    9
    8
    7 11 12
    クラスが効かなくなる..!!
    画面幅が
    768pxを下回る
    と...
    

    View Slide

32. Bootstrapのブレイクポイント
    

    View Slide

33. Bootstrapのブレイクポイント
    col-3 どんな画面幅でもクラスが適用される
    col-sm-3 576px以上の画面幅でクラスが適用される
    col-md-3 768px以上の画面幅でクラスが適用される
    col-lg-3 992px以上の画面幅でクラスが適用される
    col-xl-3 1200px以上の画面幅でクラスが適用される
    

    View Slide

34. 親要素の4分の1幅の格子ができる
    Bootstrapが持つ12カラムの考え方
    col-3 col-3 col-3 col-3
    c
    ol
    -
    3
    c
    ol
    -
    3
    c
    ol
    -
    3
    c
    ol
    -
    3
    

    View Slide

35. 親要素の4分の1幅の格子ができる
    Bootstrapが持つ12カラムの考え方
    col-md-3
    col-6
    col-md-3
    col-6
    col-md-3
    col-6
    col-md-3
    col-6
    この親要素の
    画面幅は
    768px以上ね
    この親要素の
    画面幅が
    768pxを下回る
    と...
    col-6 col-6
    

    View Slide

36. ● 12カラム
    ● ブレイクポイント　のまとめ
    ● CSSライブラリはクラスの塊
    個人的これだけわかっていれば、の３ポイント
    

    View Slide

37. レスポンシブに対応したグリッドレイア
    ウトが簡単に作れる！！
    

    View Slide

38. ここまでで美しいグリッドレイアウトを再
    現できるようになったはず！
    

    View Slide

39. あとは格子の中にオブジェクトを置い
    ていくだけ！！
    

    View Slide

40. 結局CSS書かなきゃいけないじゃん
    

    View Slide

41. 書こうと思ったCSSは大体Bootstrap
    の既存クラスにあるよ
    

    View Slide

42. Bootstrapだけでグリッドレイアウトも
    オブジェクトのデザイン当てもできる..!!
    

    View Slide

43. Twitterのフォローお願いします！
    @uniuni__8282
    ご清聴ありがとうございました
    

    View Slide