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
97
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
90
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
Modern Linux
oracle4engineer
PRO
0
170
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
3
200
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
1k
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
2.6k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
180
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
200
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
130
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
220
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Music & Morning Musume
bryan
46
6.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Code Review Best Practice
trishagee
71
19k
Context Engineering - Making Every Token Count
addyosmani
3
63
Become a Pro
speakerdeck
PRO
29
5.5k
KATA
mclloyd
32
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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ͷϒϥϯυΧϥʔͰͨ͠