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
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
230
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
150
OPENLOGI Company Profile
hr01
0
67k
AWS認定を取る中で感じたこと
siromi
1
190
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
怖くない!はじめてのClaude Code
shinya337
0
400
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Featured
See All Featured
Bash Introduction
62gerente
613
210k
Typedesign – Prime Four
hannesfritz
42
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Invisible Side of Design
smashingmag
301
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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 ͪΌͿͻͬ͘Γฦ͞Εͯઃܭ࣍ୈͰ ڧ͘ੜ͖ΕΔ
্ख͘ΜͰ໌ؤுΖ͏