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
utility first css
Search
ozaki25
January 22, 2021
Technology
0
85
utility first css
ozaki25
January 22, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
160
20210525_react_next.pdf
ozaki25
0
120
Webフロントエンドはなぜ複雑なのか
ozaki25
1
120
20201225_how_to_learn_technology.pdf
ozaki25
0
150
20201124_blitz.pdf
ozaki25
0
80
20200727_liff_app.pdf
ozaki25
1
630
20200721_web_vitals.pdf
ozaki25
0
97
20200624_web_otp_api.pdf
ozaki25
1
120
20200128_sentry.pdf
ozaki25
0
97
Other Decks in Technology
See All in Technology
FrankenPHPでLaravelを動かしてみよう
yousaku
0
100
rubygem開発で鍛える設計力
joker1007
3
350
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
170
OPENLOGI Company Profile for engineer
hr01
1
33k
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
210
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
PO初心者が考えた ”POらしさ”
nb_rady
0
150
GitHub Copilot の概要
tomokusaba
1
150
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
270
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.5k
AWS認定を取る中で感じたこと
siromi
1
140
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Building Adaptive Systems
keathley
43
2.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
125
52k
Music & Morning Musume
bryan
46
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Raft: Consensus for Rubyists
vanstee
140
7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Become a Pro
speakerdeck
PRO
28
5.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fireside Chat
paigeccino
37
3.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Cult of Friendly URLs
andyhume
79
6.5k
Transcript
6UJMJUZ'JSTU$44
ͷ$44ͷτϨϯυ w 5BJMXJOE$44͕ྲྀߦͨ͠ w 5BJMXJOE$446UJMJUZ'JSTU$44ͳϥΠϒϥϦͱ͍͏͜ͱͰ͞Εͨ 4UBUFPG$44Ͱ τοϓϖʔδͰݴٴ͞Ε͍ͯΔ https://2020.stateofcss.com/
6UJMJUZ'JSTU$44ͱ w 6UJMJUZ'JSTU$44ͱ ͋ΒΏΔύλʔϯͷ࠷খݶͷϓϩύςΟͷΈΛؚΜͩ$44Λఆٛ͠ ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ʹ͑Δ$44ͷߟ͑ํ αϯϓϧ࣍ͷϖʔδͰ
6UJMJUZ'JSTU$44ͷྫ ˣ͜ͷΑ͏ͳϨΠΞτΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ߹ 6UJMJUZ'JSTU$44ͷ߹ https://tailwindcss.com/docs/utility-first
6UJMJUZ'JSTU$44ͷྫ ˣ͜ͷΑ͏ͳϨΠΞτΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ߹ 6UJMJUZ'JSTU$44ͷ߹ ैདྷUJUMFDPOUFOUͳͲҙຯͷ ͋Δ໋໊Ͱ$44Λఆ͍ٛͯͨ͠ https://tailwindcss.com/docs/utility-first
6UJMJUZ'JSTU$44ͷྫ ˣ͜ͷΑ͏ͳϨΠΞτΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ߹ 6UJMJUZ'JSTU$44ͷ߹ 6UJMJUZ'JSTU$44ͩͱ $44ͷ༰Λදݱ͢ΔΫϥε໊Ͱ ఆٛ͞Ε͍ͯΔ https://tailwindcss.com/docs/utility-first
6UJMJUZ'JSTU$44ͷྫ ˣ͜ͷΑ͏ͳϨΠΞτΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ߹ 6UJMJUZ'JSTU$44ͷ߹ https://tailwindcss.com/docs/utility-first ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ͳײ֮
6UJMJUZ'JSTU$44ͷϝϦοτ ࣗͰ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ ελΠϧʹมߋ͕҆શʹͳΔ ࣍ͷϖʔδ͔Β
ͦΕͧΕৄ͘͠આ໌͠·͢
ࣗͰ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ w ༻ҙ͞ΕͨΫϥεΛΈ߹ΘͤΔ͚ͩͳͷͰ$44Λॻ͘ඞཁ͕ͳ͍ w ϨΠΞτΛ࡞Δࡍʹ)5.-ϑΝΠϧ͔ΒΕΔ͜ͱͳ͘ ίʔσΟϯά͢Δ͜ͱ͕Ͱ͖Δ w $44Λॻ͔ͳ͍ͷͰ$44Λϝϯς͢Δඞཁͳ͘ͳΔ
ϨΠΞτมߋ)5.-͚ͩͰ݁
Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ w ༻ҙ͞Εͨ$44Λ͏͚ͩͳͷͰΫϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ ϨΠΞτͷ߹Ͱλά͕ଟஈʹͳΔ࣌ʹແཧ ΓΫϥε໊Λ͚ͭͨΓͯ͠·ͤΜ͔ʁ Ϋϥε໊ͷωʔϛϯάϧʔϧΛߟ͑ͨΓ ͦΕΛνʔϜʹਁಁͤͨ͞Γ कΒΕͯΔ͔νΣοΫͨ͠Γ͢ΔͷେมͩΑͶ
ελΠϧʹมߋ͕҆શʹͳΔ w $44ن͕େ͖͘ͳΔʹͭΕͯӨڹൣғ͕େ͖͘ͳΓ มߋআͷϋʔυϧ͕ߴ͘ͳΔ ͍Ζ͍Ζͳͱ͜ΖͰΘΕ͍ͯͦ͏ͳఆٛʹ खΛՃ͑ͨ͘ͳͬͨ࣌ʹؾܰʹͰ͖ͳ͍ ාͯ͘୭͞ΘΕͳ͍ڊେͳ$44ʹ ૺ۰ͨ͜͠ͱ͕͋Δਓଟ͍ͷͰͳ͍Ͱ͠ΐ͏͔
6UJMJUZ'JSTU$44ʹର͢Δٙ ಉ͡ϨΠΞτΛ͍·Θ͍ͨ࣌͠Ͳ͏͢Δͷʁ େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ ࣍ͷϖʔδ͔Β
ͦΕͧΕৄ͘͠આ໌͠·͢
ಉ͡ϨΠΞτΛ͍·Θ͍ͨ࣌͠Ͳ͏͢Δͷʁ w 2ྫ͑ಉ͡ϨΠΞτͷϘλϯΛԿ͏࣌ ຖճˣΛίϐϖ͢Δͷʁʁ w "ڞ௨Խ͍ͨ͠ͱ͖ίϯϙʔωϯτԽ͢Δ ɹͭ·Γ3FBDU7VF8FC$PNQPOFOUTͱ߹Θͤͯ͏ͷ͕ྑ͍
େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ w 2ΘΕͳ͍ఆٛେྔʹؚΜͩڊେͳ$44ΛಡΈࠐΉඞཁʹͳ Δ͔ΒύϑΥʔϚϯεʹ͕ͰΔͷͰʁ w "Ϗϧυ͢Δ͜ͱͰΞϓϦͰΘΕͯΔ෦͚ͩΛநग़ͨ͠ $44Λ࡞͢Δ͜ͱ͕Ͱ͖Δ 5BJMXJOE1PTU$44Λ͔ͭ͏͜ͱͰ
͜ͷΈΛ࣮ݱ͍ͯ͠·͢
ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ w 2)5.-ʹελΠϧΛॻ͘ͷͱԿ͕ҧ͏ͷʁ ˣ͜Μͳײ͡ w "ΠϯϥΠϯελΠϧͩͱ࣮ݱͰ͖ͳ͍͜ͱ͕͋Δ ٙࣅΫϥε͕͑ͳ͍ ϝσΟΞΫΤϦ͕͑ͳ͍
αΠζͳͲͷ͕ ϚδοΫφϯόʔʹͳͬͯ͠·͏ IPWFSGPDVTͳͲͷελΠϧఆٛ ʹٖࣅΫϥεΛ͏ඞཁ͕͋Δ ϝσΟΞΫΤϦΛ͏ͱ ΟϯυαΠζʹԠͨ͡ $44ͷ͍͚ͳͲ͕Ͱ͖Δ
6UJMJUZ'JSTU$44ద༻໘ w 6UJMJUZ'JSTU$44ͷޮՌ͕ߴ͍έʔε w ࣗલͰ࣮͢Δ$44͕ଟ͍ΞϓϦ w ϖʔδ͕ଟ͘ϨΠΞτͷมߋ͕ଟ͍ΞϓϦ w 3FBDU7VFΛͬͨΞϓϦ w
6UJMJUZ'JSTU$44ͷޮՌ͕͍έʔε w ϖʔδ͕গͳ͍খنͳΞϓϦݟͨʹͩ͜ΘΒͳ͍ϓϩτλΠϓͷ։ൃ w 6*ϑϨʔϜϫʔΫʹ·Δ͝ͱ͔ͬΕΔΞϓϦ w ΫϥΠΞϯταΠυͷίʔυΛϏϧυ͠ͳ͍ΞϓϦ
ݸਓతͳײ w ຊ൪ΞϓϦͰͷͭΒΈΑ͔͘Δ w ୭͞ΘΕͳ͍ڊେͳ$44ΛԿݟ͖ͯͨ w Ϋϥε໊ͷϧʔϧΛͲͷߟ͑ํͰ͍͔ܾ͘ΊΔͷ໘ͩ͠ ͦΕΛνʔϜʹਁಁͤ͞Δίετߴ͍ w ࠷ۙϓϩτλΠϓΛ࡞Δ͜ͱ͕ଟ͍͕ͦ͜ͰUPPNVDI
w $44ॻ͖ͨ͘ͳ͍͕6*ϥΠϒϥϦʹؙΓͰ͖Δͦ͠ͷํָ͕ w ࣮ࡍͬͯΈ͍ͨͱࢥ͏͔ w ͕͍ࣗ͜ͳͤͯΈΜͳʹ͍͜ͳͤͯΒ͑Δ͔ෆ҆ w ͱ͍͑ैདྷͷΓํͰ՝͋ΔͷͰࢼͯ͠ݟΔՁ͋Γͦ͏
͋Γ͕ͱ͏͍͟͝·ͨ͠
ࠓͷεϥΠυΧϥʔ 5BJMXJOEͷϒϥϯυΧϥʔͰͨ͠