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
110
django-import-export で マスターデータ管理生活
dkonishi
0
260
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
160
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
190
Netlify Functions 叩き初め
dkonishi
0
250
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
170
Other Decks in Technology
See All in Technology
from Sakichi Toyoda to Agile
kawaguti
PRO
1
100
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
170
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
170
Trust as Infrastructure
bcantrill
1
370
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.2k
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
150
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
A better future with KSS
kneath
239
18k
BBQ
matthewcrist
89
9.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Building an army of robots
kneath
306
46k
Building Adaptive Systems
keathley
43
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Why Our Code Smells
bkeepers
PRO
339
57k
Fireside Chat
paigeccino
40
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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 ͪΌͿͻͬ͘Γฦ͞Εͯઃܭ࣍ୈͰ ڧ͘ੜ͖ΕΔ
্ख͘ΜͰ໌ؤுΖ͏