Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20201129WBALT.pdf
Search
unisuke
November 29, 2020
0
69
20201129WBALT.pdf
unisuke
November 29, 2020
Tweet
Share
More Decks by unisuke
See All by unisuke
Rustってどんな言語
uni_82
0
160
Verified Software Toolchain C ~Coqを用いたCプログラムの検証~
uni_82
0
56
はじめてのIT勉強会 プリンシプルオブプログラミングPart.3
uni_82
0
140
2021.01はじめてのIT勉強会.pdf
uni_82
0
130
2020.11.26ポートフォリオを素敵にしたい 副代表のゆるゆるLT第1段
uni_82
0
80
はじめてのIT勉強会 プリンシプルオブプログラミング
uni_82
0
220
2020.10.14 はじめての〇〇 超LT会- vol.1 #ultralt
uni_82
0
69
Goconference_20__1_.pdf
uni_82
0
90
はじめてのIT勉強会.pdf
uni_82
0
120
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
For a Future-Friendly Web
brad_frost
176
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.5k
Making Projects Easy
brettharned
116
6.1k
Visualization
eitanlees
146
15k
Typedesign – Prime Four
hannesfritz
41
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building an army of robots
kneath
303
45k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
KATA
mclloyd
29
14k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Transcript
CSSライブラリ めっちゃ素敵だよ Bootstrapはこれだけ、の3つのポイント- 2020.11.29 WBALT
自己紹介 • 上西真由(うにすけ) • 埼玉県出身 • 東北大学工学部電気情報物理工学科3年 • フロントエンドばっかり •
はじめてのIT勉強会副代表 @uniuni__8282 mayu.uenishi.1
みなさんHTML/CSS好きですか
WBAにはフロント好んで 書いている人はいないイメージ...
でもHTML/CSSだけできれば....
こんなの作ってお小遣い稼ぎもできる
ね。HTML/CSS悪くないよね。
そんな私はBootstrap狂愛者なので
みんなにも知って欲しい
CSSライブラリ触ったことない人 and フロントよりバックエンドの方が好きな人 このLTのターゲット
• 全員がBootstrapめっちゃ簡単じゃんって 言ってくれること • 個人的に思う3つのポイントを空で言える ようになること このLTのゴール
※個人的な見解です 早速ですが...3つのポイントって?
• 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント
• 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント
それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ イン手法 簡単に言うと... 格子状の枠内にオブジェクトを置きましょう!そしたら綺麗に見える よ!の考え方 グリッドレイアウトとは ◎ ×
それぞれの要素を格子状に並べることで、美しく整えられた印象のデザインを作るデザ イン手法 簡単に言うと... 格子状の枠内にオブジェクトを置きましょう!そしたら綺麗に見える よ!の考え方 グリッドレイアウトとは ◎ ×
親要素(.row)の幅を12分割 Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9
8 7 11 12
Bootstrapの既存クラスを使うと..全部.col-1 Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9
8 7 11 12
親要素の3分の1幅の格子ができる Bootstrapが持つ12カラムの考え方 col-4 6 5 10 9 8 7 11
12 col-4 col-4 col-4
親要素の4分の1幅の格子ができる Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9
8 7 11 12 col-3 col-3 col-3 col-3
Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9 8
7 11 12
• 12カラム のまとめ • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント
Bootstrapの既存クラスだけで簡単に ブリッドレイアウトが作れる!
でも...
どんな画面幅でも同じグリッド幅使うと レイアウト崩れる...
親要素の4分の1幅の格子ができる Bootstrapが持つ12カラムの考え方 col-3 col-3 col-3 col-3 c ol - 3
c ol - 3 c ol - 3 c ol - 3
そんな時に!!
• 12カラム • ブレイクポイント • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント
さっきの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以上ね
さっきのcol-3をcol-md-3にしてみる Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9
8 7 11 12 画面幅が 768pxを下回る と...
さっきのcol-3をcol-md-3にしてみる Bootstrapが持つ12カラムの考え方 1 2 6 4 5 3 10 9
8 7 11 12 クラスが効かなくなる..!! 画面幅が 768pxを下回る と...
Bootstrapのブレイクポイント
Bootstrapのブレイクポイント col-3 どんな画面幅でもクラスが適用される col-sm-3 576px以上の画面幅でクラスが適用される col-md-3 768px以上の画面幅でクラスが適用される col-lg-3 992px以上の画面幅でクラスが適用される col-xl-3
1200px以上の画面幅でクラスが適用される
親要素の4分の1幅の格子ができる Bootstrapが持つ12カラムの考え方 col-3 col-3 col-3 col-3 c ol - 3
c ol - 3 c ol - 3 c ol - 3
親要素の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
• 12カラム • ブレイクポイント のまとめ • CSSライブラリはクラスの塊 個人的これだけわかっていれば、の3ポイント
レスポンシブに対応したグリッドレイア ウトが簡単に作れる!!
ここまでで美しいグリッドレイアウトを再 現できるようになったはず!
あとは格子の中にオブジェクトを置い ていくだけ!!
結局CSS書かなきゃいけないじゃん
書こうと思ったCSSは大体Bootstrap の既存クラスにあるよ
Bootstrapだけでグリッドレイアウトも オブジェクトのデザイン当てもできる..!!
Twitterのフォローお願いします! @uniuni__8282 ご清聴ありがとうございました