$30 off During Our Annual Pro Sale. View Details »
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
270
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
170
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
200
Netlify Functions 叩き初め
dkonishi
0
260
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
310
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
180
Other Decks in Technology
See All in Technology
20251127 BigQueryリモート関数で作る、お手軽AIバッチ実行環境
daimatz
0
430
技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜
subroh0508
1
150
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
daichi_yamashita
0
530
Introduction to Bill One Development Engineer
sansan33
PRO
0
330
あなたの知らないDateのひみつ / The Secret of "Date" You Haven't known #tqrk16
expajp
0
110
事業部のプロジェクト進行と開発チームの改善の “時間軸" のすり合わせ
konifar
9
3k
Microsoft Agent 365 を 30 分でなんとなく理解する
skmkzyk
1
320
Data Hubグループ 紹介資料
sansan33
PRO
0
2.3k
AI/MLのマルチテナント基盤を支えるコンテナ技術
pfn
PRO
5
730
「え?!それ今ではHTMLだけでできるの!?」驚きの進化を遂げたモダンHTML
riyaamemiya
10
4.5k
著者と読み解くAIエージェント現場導入の勘所 Lancers TechBook#2
smiyawaki0820
9
3.1k
AI駆動開発によるDDDの実践
dip_tech
PRO
0
290
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
120
20k
Statistics for Hackers
jakevdp
799
230k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Side Projects
sachag
455
43k
Embracing the Ebb and Flow
colly
88
4.9k
The Cult of Friendly URLs
andyhume
79
6.7k
Writing Fast Ruby
sferik
630
62k
How GitHub (no longer) Works
holman
316
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 ͪΌͿͻͬ͘Γฦ͞Εͯઃܭ࣍ୈͰ ڧ͘ੜ͖ΕΔ
্ख͘ΜͰ໌ؤுΖ͏