20201129WBALT.pdf

Transcript

1. CSSライブラリ めっちゃ素敵だよ Bootstrapはこれだけ、の３つのポイント- 2020.11.29 WBALT
2. 自己紹介 • 上西真由（うにすけ） • 埼玉県出身 • 東北大学工学部電気情報物理工学科３年 • フロントエンドばっかり • はじめてのIT勉強会副代表 @uniuni__8282 mayu.uenishi.1
3. みなさんHTML/CSS好きですか
4. WBAにはフロント好んで 書いている人はいないイメージ...
5. でもHTML/CSSだけできれば....
6. こんなの作ってお小遣い稼ぎもできる
7. ね。HTML/CSS悪くないよね。
8. そんな私はBootstrap狂愛者なので
9. みんなにも知って欲しい
10. CSSライブラリ触ったことない人 and フロントよりバックエンドの方が好きな人 このLTのターゲット
11. • 全員がBootstrapめっちゃ簡単じゃんって 言ってくれること • 個人的に思う３つのポイントを空で言える ようになること このLTのゴール
12. ※個人的な見解です 早速ですが...３つのポイントって？
13. • 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の３ポイント
14. • 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の３ポイント
15. それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ イン手法 簡単に言うと... 格子状の枠内にオブジェクトを置きましょう！そしたら綺麗に見える よ！の考え方 グリッドレイアウトとは ◎ ×
16. それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ イン手法 簡単に言うと... 格子状の枠内にオブジェクトを置きましょう！そしたら綺麗に見える よ！の考え方 グリッドレイアウトとは ◎ ×
17. 親要素(.row)の幅を12分割 Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8 7 11 12
18. Bootstrapの既存クラスを使うと..全部.col-1 Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8 7 11 12
19. 親要素の3分の1幅の格子ができる Bootstrapが持つ12カラムの考え方 col-4 6 5 10 9 8 7 11 12 col-4 col-4 col-4
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
21. Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8 7 11 12
22. • 12カラム　のまとめ • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の３ポイント
23. Bootstrapの既存クラスだけで簡単に ブリッドレイアウトが作れる！
24. でも...
25. どんな画面幅でも同じグリッド幅使うと レイアウト崩れる...
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
27. そんな時に！！
28. • 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の３ポイント
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以上ね
30. さっきのcol-3をcol-md-3にしてみる Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8 7 11 12 画面幅が 768pxを下回る と...
31. さっきのcol-3をcol-md-3にしてみる Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8 7 11 12 クラスが効かなくなる..!! 画面幅が 768pxを下回る と...
32. Bootstrapのブレイクポイント
33. Bootstrapのブレイクポイント col-3 どんな画面幅でもクラスが適用される col-sm-3 576px以上の画面幅でクラスが適用される col-md-3 768px以上の画面幅でクラスが適用される col-lg-3 992px以上の画面幅でクラスが適用される col-xl-3 1200px以上の画面幅でクラスが適用される
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
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
36. • 12カラム • ブレイクポイント　のまとめ • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の３ポイント
37. レスポンシブに対応したグリッドレイア ウトが簡単に作れる！！
38. ここまでで美しいグリッドレイアウトを再 現できるようになったはず！
39. あとは格子の中にオブジェクトを置い ていくだけ！！
40. 結局CSS書かなきゃいけないじゃん
41. 書こうと思ったCSSは大体Bootstrap の既存クラスにあるよ
42. Bootstrapだけでグリッドレイアウトも オブジェクトのデザイン当てもできる..!!
43. Twitterのフォローお願いします！ @uniuni__8282 ご清聴ありがとうございました