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
96
utility first css
ozaki25
January 22, 2021
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
170
20210525_react_next.pdf
ozaki25
0
130
Webフロントエンドはなぜ複雑なのか
ozaki25
1
130
20201225_how_to_learn_technology.pdf
ozaki25
0
160
20201124_blitz.pdf
ozaki25
0
89
20200727_liff_app.pdf
ozaki25
1
640
20200721_web_vitals.pdf
ozaki25
0
100
20200624_web_otp_api.pdf
ozaki25
1
130
20200128_sentry.pdf
ozaki25
0
110
Other Decks in Technology
See All in Technology
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
700
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
KotlinConf 2025_イベントレポート
sony
1
120
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
380
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
110
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.8k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
530
人工衛星のファームウェアをRustで書く理由
koba789
13
7.3k
エラーとアクセシビリティ
schktjm
1
1.2k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Music & Morning Musume
bryan
46
6.8k
4 Signs Your Business is Dying
shpigford
184
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Code Review Best Practice
trishagee
70
19k
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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ͷϒϥϯυΧϥʔͰͨ͠