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
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
460
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
240
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
200
TLSから見るSREの未来
atpons
2
310
本当にわかりやすいAIエージェント入門
segavvy
1
460
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
470
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
8
2.3k
無理しない AI 活用サービス / #jazug
koudaiii
0
100
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Embracing the Ebb and Flow
colly
86
4.8k
Become a Pro
speakerdeck
PRO
29
5.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Adaptive Systems
keathley
43
2.7k
Building Applications with DynamoDB
mza
95
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Scaling GitHub
holman
460
140k
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 ͪΌͿͻͬ͘Γฦ͞Εͯઃܭ࣍ୈͰ ڧ͘ੜ͖ΕΔ
্ख͘ΜͰ໌ؤுΖ͏