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
97
django-import-export で マスターデータ管理生活
dkonishi
0
250
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
140
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
180
Netlify Functions 叩き初め
dkonishi
0
240
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
160
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
12
2.4k
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
技術同人誌をMCP Serverにしてみた
74th
1
630
ふつうの技術スタックでアート作品を作ってみる
akira888
0
460
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
270
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
740
ニーリーにおけるプロダクトエンジニア
nealle
0
780
NPOでのDevinの活用
codeforeveryone
0
790
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
530
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
4
650
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Producing Creativity
orderedlist
PRO
346
40k
Speed Design
sergeychernyshev
32
1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Gamification - CAS2011
davidbonilla
81
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Being A Developer After 40
akosma
90
590k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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 ͋͘·Ͱϕʔε ྟػԠมʹରԠ