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
41
utility first css
ozaki25
January 22, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
100
20210525_react_next.pdf
ozaki25
0
79
Webフロントエンドはなぜ複雑なのか
ozaki25
1
77
20201225_how_to_learn_technology.pdf
ozaki25
0
110
20201124_blitz.pdf
ozaki25
0
51
20200727_liff_app.pdf
ozaki25
1
540
20200721_web_vitals.pdf
ozaki25
0
56
20200624_web_otp_api.pdf
ozaki25
1
76
20200128_sentry.pdf
ozaki25
0
56
Other Decks in Technology
See All in Technology
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
700
人間の尊厳、幸福、アクセシビリティ / 第116回「WEB TOUCH MEETING」アクセシビリティSP
nulabinc
PRO
2
180
ChatGPT for IT Service Management (IT Pro)
dahatake
4
290
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
350
Janus
bkuhlmann
1
490
20240416_devopsdaystokyo
kzkmaeda
1
190
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
430
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
SREとその組織類型
tatsuo48
8
1.5k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
175
21k
Code Review Best Practice
trishagee
54
15k
Side Projects
sachag
451
41k
Designing with Data
zakiwarfel
95
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
273
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
What the flash - Photography Introduction
edds
64
11k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Six Lessons from altMBA
skipperchong
20
3k
Making Projects Easy
brettharned
108
5.5k
Agile that works and the tools we love
rasmusluckow
324
20k
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ͷϒϥϯυΧϥʔͰͨ͠