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
October 29, 2016
Technology
1
350
入社前と入社後で CSSの書き方を変えた話
CSS Talk vol.1 - TAMのイベント | Doorkeeper :
https://taminc.doorkeeper.jp/events/52298
Daisuke Konishi
October 29, 2016
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
複数ソースから集めて作る自分サイト
dkonishi
0
97
django-import-export で マスターデータ管理生活
dkonishi
0
260
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 Technology
See All in Technology
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.4k
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.3k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7.2k
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
Lazy application authentication with Tailscale
bluehatbrit
0
210
PO初心者が考えた ”POらしさ”
nb_rady
0
210
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
280
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
GitHub's CSS Performance
jonrohan
1031
460k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Faster Mobile Websites
deanohume
307
31k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualization
eitanlees
146
16k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
Ⰵ爡הⰅ爡䖓ד $44ך剅ֹ倯㢌ִ鑧 Daisuke Konishi
Daisuke Konishi @skd_nw ϚʔΫΞοϓΤϯδχΞ
ٕज़తͳɺΠϕϯτߦͬͨɺͳΜ͔Μ http://peng-note.com
࠷ۙͬͯΔ͜ͱ w Ξχϝʔγϣϯͷษڧ w 1PTU$44ͰΦϨΦϨίϯύΠϥ࡞ w +BWB4DSJQUͷઃܭͱ͔3FBDUKTͷษڧ w ൴ঁ୳͠
ೖ͔ࣾͯ͠Βॻ͖ํΛͲ͏ม͔͑ͨ
ೖࣾલ େֶੜ࣌ ֶͷ׆ಈͷαΠτϒϩάͷ੍࡞ɾอक w εΫϥον͔$44ϑϨʔϜϫʔΫΛ׆༻ w 4."$44ϕʔεͰͷઃܭ
ೖࣾޙίέΔࣄ͕ଟ͔ͬͨ
ίʔσΟϯάελΠϧʹ׳Εͳ͍ 例えば .listStyle03 { … } .box01 { … }
ṖͷίʔσΟϯάελΠϧʹ׳Εͳ͍ ͋Δఔม͑ΕΔΑ͏ʹަব͠ɺ ηϚϯςΟοΫͳωʔϛϯάΛՄೳʹ
ౖΓͱѩ͠Έͷ*&ରԠ w ΞΫηεղੳ͢Δͱͳ͔ͳ͔ͷׂ߹Ͱ Εͳ͍ w ͜Ε·Ͱʹܦݧφγ
ౖΓͱѩ͠Έͷ*&ରԠ w DBOJVTFDPNͰ͑ΔϓϩύςΟͷ֬ೝ w ίʔσΟϯά͠ͳ͕Β7.ͰνΣοΫ w ؾ߹͍ transition, animate͍͍ͨਓੜͩͬͨ…
CSSϑϨʔϜϫʔΫ͑ͳ͍
BourbonΛಋೖ http://bourbon.io/
#PVSCPOͷ͋Γ͕͍ͨͱ͜ w ඞཁͳ͚ͩࣗಈͰग़ྗ͢ΔͷͰΑ͋͘Δ ϑϨʔϜϫʔΫʹൺɺ༨ͳίʔυ͕ ੜ͞Εͳ͍ w ϕϯμʔϓϨϑΟοΫε͚ͯ͘ΕΔ w هड़ྔ͕ݮͬͨΓίʔυ͕·ͱ·ΔͷͰ ݟқ͘ͳΔ
ྫ͑ position: absolute; top: 10px; right: -13px; bottom: 0; left:
0; positionपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ
ྫ͑ @include position(absolute, 10px -13px 0 0); QPTJUJPOपΓͷ৭ʑΛ·ͱΊͯॻ͚Δ
ྫ͑ɹ @include transition(all 5s $ease-in-circ); transitionͷهड़ & easingͱ͔
ྫ͑ɹ @include triangle(8px 6px, grey, down); άϨʔͷԼ͖ࡾ֯ (γϯϓϧͳਧ͖ग़͠ͷͱ͔)
ͦͷଞ͍Ζ͍Ζʂ
SnippetͷϓϥάΠϯͰ αδΣετՄೳ • Atom atom-bourbon-snippets • SublimeText 3(?) rossedman/derby: Bourbon
& Neat Sublime Text Snippets & Auto Completions
ࢥͬͯΔҎ্ʹมߋ͕͘Δ w ͪΌͿΛͻͬ͘Γฦ͢ΫϥΠΞϯτଟ͍ w lฦ͞Εͳ͍Α͏ʹ͢ΔzͷσΟϨΫλʔʹ ͓ئ͍ ฦ͞Εͨ࣌ʹڧ͘ੜ͖ΔͨΊͷίʔυΛ ॻ͘
ྫ͑ AΛ͜͜·ͰҠಈ͍ͯͩ͘͠͞ CͷαΠζมߋʹͳΓ·ͨ͠
ཁૉͷαΠζҐஔͷܭࢉ Sassʹ
ͦ͜Ͱ͜͏ʂ margin-left: floor(percentage( 282 / 504 )); ͋Μ·ΓΔͱίϯύΠϧ͕͘ͳΔͷͰ मਖ਼ೖΔͱϋήΔͱ͜ͱ͔ࡉ͔͍ͱ͚ͩ͜ͱ͔
ྫ͑ AͱBೖΕସ͍͑ͯͩ͘͞ ಉ͡ݟͨͰ ͏1ݸηΫγϣϯ૿͠·͢ ͬͺແ͘ͳΓ·ͨ͠ʔʂ
มߋʹڧ͍$44ΛΉ
w ୳͘͢͠ӨڹൣғΛڱ͘ w ͍ճ͕͠ޮ͘Α͏ʹίϯϙʔωϯτΛҙࣝ w ୳͍͢͠Α͏ʹదʹϑΝΠϧΛׂ มߋʹڧ͍$44ΛΉ
·ͱΊ w ίʔσΟϯάελΠϧͳΜ͔Μ্ख͍͜ͱ Ͱ͖Δ w ϑϨʔϜϫʔΫແͯ͘#PVSCPOͰͤʹͳΕΔ w *&ରԠؾ߹ͰͳΜͱ͔ͳΔ ͨ͘͠ͳ͍
w ͪΌͿͻͬ͘Γฦ͞Εͯઃܭ࣍ୈͰ ڧ͘ੜ͖ΕΔ
্ख͘ΜͰ໌ؤுΖ͏