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
最近やったCSSの設計と やってみて感じたこと
Search
Daisuke Konishi
December 02, 2017
Programming
0
190
最近やったCSSの設計と やってみて感じたこと
【CSS】Meetup Kansai U30 #2 #u30_kansai これまでの組み方とこれからどうしよっかって考えてる話
Daisuke Konishi
December 02, 2017
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
複数ソースから集めて作る自分サイト
dkonishi
0
87
django-import-export で マスターデータ管理生活
dkonishi
0
250
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
130
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
180
Netlify Functions 叩き初め
dkonishi
0
230
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
210
WordBench京都への関わりと何を得たか
dkonishi
0
160
Other Decks in Programming
See All in Programming
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
220
Cursorを活用したAIプログラミングについて 入門
rect
0
200
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
260
ニーリーQAのこれまでとこれから
nealle
2
810
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
140
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
220
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
110
Serving TUIs over SSH with Go
caarlos0
0
670
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
Jakarta EE Meets AI
ivargrimstad
0
900
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.3k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.9k
Gamification - CAS2011
davidbonilla
81
5.3k
It's Worth the Effort
3n
184
28k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Six Lessons from altMBA
skipperchong
28
3.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
700
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
120
52k
Fireside Chat
paigeccino
37
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Transcript
Meetup Kansai U30 #2 ࠷ۙͬͨCSSͷઃܭͱ ͬͯΈͯײͨ͜͡ͱ Daisuke KONISHI
Meetup Kansai U30 #2 Daisuke KONISHI @skd_nw coroutine inc. /
WebΤϯδχΞ WordBenchژ ϞσϨʔλʔ CSSϑϨϯζ
Meetup Kansai U30 #2 ࠷ۙͬͨ͜ͱΛॻ͍ͯ·͢
Meetup Kansai U30 #2 ࠷ۙస৬͠·ͨ͠ ϚʔΫΞοϓΤϯδχΞ ɹˣ WebΤϯδχΞ (WebϑϩϯτΤϯυଟΊ αʔόʔαΠυษڧத)
Meetup Kansai U30 #2 ͜Ε·Ͱ • தʙେنͷίʔϙϨʔταΠτ • ޙෳճߋ৽༗ΓͷLP ɹͷ࣮Λͯ͠·ͨ͠
Meetup Kansai U30 #2 ͜Ε·Ͱ • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον • CSSϝλݴޠSassΛ༻ •
FLOCSS + Atomic Design • Codekit -> gulp(node-sass)
Meetup Kansai U30 #2 σβΠϯʹରԠ͢ΔͨΊ ϑϧεΫϥον σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ ࣮͢Δελϯε ※σβΠφʔͳΜͱͳ࣮͘Λ͔͍ͬͯΔ ※࣮Ͱ͖Δ͔ෆ҆ͳͱ͖૬ஊ͢Δ(ਓ͍ͨ)
͜Ε·Ͱ
Meetup Kansai U30 #2 CSSϝλݴޠSassΛ༻ ࢿྉͷ๛͞ͱशಘͷ͔͢͠͞ΒSassΛ༻ ͜Ε·Ͱ
Meetup Kansai U30 #2 FLOCSS + Atomic Design • FLOCSSͷϨΠϠʔͷ͚ํ͕ྑ͔ͬͨ
https://github.com/hiloki/flocss • component ϨΠϠʔ͕ΒΈ͗͢ΔͨΊ Atomic DesignͷࢥͰׂ • BEMʹΑΔ֊ߏͷࢹ֮Խ ͜Ε·Ͱ
Meetup Kansai U30 #2 Codekit ͔Β gulp(node-sass) • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏
• git Ͱ branch ΛΓସ͑Δʹ config ϑΝΠϧ͕ ߋ৽͞ΕΔ • ֎͢ΔࡍʹΞϓϦඇॴ࣋ => Node.js ͰແঈͰ୭Ͱ࡞ΕΔڥʹ ͜Ε·Ͱ
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮Ͱߟ͑Δ͜ͱ • WebαΠτͰͳ͘WebγεςϜͷ࣮ • ظతͳӡ༻ •
ϝϯόʔͷCSSशख़Λߟྀ • ݟͨΑΓ·ͣػೳʹϦιʔεΛׂ͘
Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮(ߟ͑த) • CSSϑϨʔϜϫʔΫΛ࠾༻ • ઃܭFLOCSSϕʔε
Meetup Kansai U30 #2 CSSϑϨʔϜϫʔΫΛ࠾༻ • υΩϡϝϯτ͕͋ΔͷΛ༻͢Δ ͜ͱͰޙʑͷฤूΛΓ͘͢ • Foundation,
UI Kit, Bluma
Meetup Kansai U30 #2 ઃܭFLOCSSϕʔεʹ • Ҏલ·ͰͷߏͰΓ͖ΕΔਓ͕গͳ͍ => ·ͣFLOCSS(+BEM)ʹ׳ΕΔ •
ͦͦ͜Ε·ͰͷߏͰ·ͳ͖Ό͍ ͚ͳ͍ͷ͕গͳͦ͏ʁ
Meetup Kansai U30 #2 ͋͘·Ͱϕʔε ྟػԠมʹରԠ