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
96
20200624_web_otp_api.pdf
ozaki25
1
120
20200128_sentry.pdf
ozaki25
0
97
Other Decks in Technology
See All in Technology
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
エンジニア向け技術スタック情報
kauche
1
250
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
120
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
解析の定理証明実践@Lean 4
dec9ue
0
170
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
rubygem開発で鍛える設計力
joker1007
2
200
M3 Expressiveの思想に迫る
chnotchy
0
100
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
KATA
mclloyd
29
14k
Code Review Best Practice
trishagee
68
18k
The Cult of Friendly URLs
andyhume
79
6.5k
Building Adaptive Systems
keathley
43
2.6k
The Language of Interfaces
destraynor
158
25k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Unsuck your backbone
ammeep
671
58k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building Applications with DynamoDB
mza
95
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ͷϒϥϯυΧϥʔͰͨ͠