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

20201129WBALT.pdf

36db74c2b509d12cb2404b62846afa27?s=47 uniSuke
November 29, 2020
41

 20201129WBALT.pdf

36db74c2b509d12cb2404b62846afa27?s=128

uniSuke

November 29, 2020
Tweet

Transcript

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

  2. 自己紹介 • 上西真由(うにすけ) • 埼玉県出身 • 東北大学工学部電気情報物理工学科3年 • フロントエンドばっかり •

    はじめての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めっちゃ簡単じゃんって 言ってくれること • 個人的に思う3つのポイントを空で言える ようになること このLTのゴール

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

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

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

  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ライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント

  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ライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント

  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ライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント

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

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

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

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

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

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

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