Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
CSS 檔案管理技巧分享
Search
evenwu
May 26, 2014
Design
13k
137
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
CSS 檔案管理技巧分享
evenwu
May 26, 2014
More Decks by evenwu
See All by evenwu
RWD 一小時就上手
evenwu
107
17k
如何教設計師前端技術
evenwu
45
16k
2012 web technology by RGBA group
evenwu
140
16k
twitter bootstrap 好用的網頁設計框架
evenwu
92
15k
Other Decks in Design
See All in Design
ひとりで作れる時代に、 判断をみんなで持つには。/ Build alone share judgment
kgsi
0
540
個人理念(自分の言葉)の言語化ワークショップ
kakukoki
1
420
Look Dev Meetup #50
baku89
1
520
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
360
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
530
デザイナーの判断をAIにつなぐ ── 審美眼をハーネスする試み
kotasaito_cnt
0
1.3k
「惜しいデザイン」 を生み出さないための AIレビューループ
0b1tk
3
4.7k
Luna's Light
shemeetscity
0
660
使いたいときだけ使う 「道具のようなアプリケーション」を考える
fumink7
0
310
LP制作のための熱量ハーネス -人の熱量を、AIとの制作につなぐ-
niccy
0
1.9k
デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜 / PdEConf2026 Design Harness
kgsi
14
23k
コールセンターのオペレーターに6時間だけなってみた
h0sa
0
190
Featured
See All Featured
Designing Experiences People Love
moore
143
24k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.7k
Crafting Experiences
bethany
1
390
<Decoding/> the Language of Devs - We Love SEO 2024
nikkihalliwell
1
360
How GitHub (no longer) Works
holman
316
150k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
WCS-LA-2024
lcolladotor
0
890
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
4
1.2k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
2
330
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
1
570
Transcript
$44ᗆᐵⅷᱝုՁ̅ &WFO8V ⊮⽶˼ം⋏ࢣΒᴡ4$44ḓ̍
&WFO8V FWFOEFTJHOUX㍫ⰬⰕؽ⽽ς
RGBA_ GCDPNHSPVQTPQFOSHCB ⎛㔄ⰬⰕ┣ᐆ
$44ᗆᐵⅷᱝုՁ̅ όઘỉ㔹Ἅ㒔ㄒ⯁㦎ႴϞ႕ᷗ‶Ⲣጊỉစю᥇ Ԇ㦎ΚಙέҠಉᎇأႾ㍱ଁɘ Ͻᴡඈ≧ᑢ
ᵕϯ୬ፑˮ$44 ⱜ༢㣉⽽㦖ఢ4$44㏋㦃 ⼑ैᵓৡ⾳ፐ4$44˯
ᩬบᵕᩬወ ฐ࿊ḕቶځḏ Κಙ႕ҥ⯁ᐊॏ㏿⯋∺ɗ☱ٳڠᡢℨɘ
࢙㋢㞽৸ $444UZMF(VJEF DMBTTބܳ۱؞ɗಂᓪៈ⇾
None
ΒᴡӰ⼒ḓ⯇⭜٪̩֦๘࢚㋠ᢗ⼒⼗൹㡩ᴘ▀՛ʵᴡᢗ⼒ḓ൹Ƣ
ௌᐵՏੋת ཉ⊂жյ̶ᾢ㏢̷
ϰஈ⭤⯮XJSFGSBNFḓ⼳ ˯㡩ፔᝧ༨՛⽶ᑦ≟⌂㌯㡱
⼑⬌٪̩Ⲅᬝʲḓ"≳ⵏΙⵘቄ㠐9%%%%
٢ʬϫஈḓဇₓ
ஈ᱔Ի̨̍㕋⭯ḓʳၢ⽔ޣֈ༨㡬XJSFGSBNFʲӼΒᴡθ㡞
ө⾢⭤⯮XJSFGSBNFน㡩ၟՂᨡٶ₉DPNQPOFOUḓ⭤⯮θᑦ≳Ƣ
ᴡIBDLQBE㡩ⵘᒉḓؔ͵ቔ̳ൗ٫
ৡ▁༏ਔʬ˼DPNQPOFOUӐ̳˘น ㉒ੋΒᴡIBDLQBEΙ⼑˼DPNQPOFOUḓDMBTTOBNF⮨ਙͮۏپ ᴪௌᐴٹ͵ʬⵏΙ ⬛ᝆፐⲄQSPKFDUNBOBHFS CBDLFOE˥ʬⵏ֦Ө
ʬ˼Ӱ⼒Ӽ˥ʵ⼳ḓ⬌㡩ʵ⬍ʬӼӼ⭤⯮˯㡩⬗ʳΙړƢ ፔቯ̍Ι˥ตਔʲဇ㡞
ௌᐵ$44Ꮟᕃ ࢹΤ⿅㣉Ί㦎ⱜٳႽΤ݈㦖
ٍʪ
ٍ˱ َৡḓ⳿ቝ⬲พ.7$44᚜4."$44⽠⬍ፆਔḓↄΝ㡞
Ө⾤ௌᐵᏏᕃቕ̲
None
None
Ö BMM Ö @DPMPST Ö @NJYJOTPS@NPEVMFT Ö @UZQPHSBQIZ Ö @GPSN
JOQVU TFMFDU CVUUPO× Ö @MBZPVU Ö QBSUJBMT ⋧ӯ⼔ӏ̲ Ö QBHFT ϪՔ㏧㍻ḕᭃᙨჰᬡ ʬϫजῄḓ4$44ᗅᐴⅵᱛᏎᕂৡᔊ⼑ᕾ
ṏぢ Ϊʳټ⾤̲Ɵ֤ⓛ ၠՁTDTTᗆᐵ ͡ҠᙻᓪಂЪ͡ϨΦ
BMMTDTT × GSBNFXPSLٌቆ × JNQPSUṞ㊉Αᴟ˗GSBNFXPSL × JNQPSUSFTFUOPSNBMJ[F × JNQPSUDPSFTDTT DPMPS
NJYJO UZQPHSBQIZ MBZPVU × JNQPSUQBSUJBMT × JNQPSUQBHFT × Ӱ̜चῂӱ
@DPMPSTTDTT × च፭㐙◜ⱻቆ㡠፭ᴟḑ㞲◜ƠḌ◜Ơ≝◜Ơொఋ܂ᬡ◜℻㡡 × च፭㐙◜ஂ㡠CPEZƠCBDLHSPVOEƠMBZPVU㡡 × ⋣ӎ̲㐙◜ஂ㡠DPNQPOFOUƠMJLFUBCƠWJEFPQMBZFSƠ㡡
@DPMPSTTDTT 基本顏⾊色變數 基本 顏⾊色 元件 元件細節 body component
@NJYJOTTDTT × ሡNJYJOˮ × ༦ۄ⼍⽡ʴፎᴜᴚவ㋩ḑDTTDPEF × ொ㉈⊬Ӱ̜ᗃᐲ!JODMVEFᴟḑ
@UZQPHSBQIZTDTT × JNQPSU୕㕲 × CPEZ୕㕲ஂ × \IFBEJOHT ^୕㕲ஂ × ٴՓIÍI୕㕲ஂ
× ٴ₇ቒ፭IUNMஂQ JNH PM VM CMPDLRVPUF QSF DPEFØ
@MBZPVUTDTT × ৠƠࢨIFBEFSƠGPPUFSƠDPOUBJOFS × च፭ჭᬝHSJETFUUJOH × च፭3FTQPOTJWFMBZPVU × ਗᎿዅ0GG$BOWBTˤࢡ⼍ஂ ࡺ᨟⼍₇NFOV㉎㊉ᖤ՞ⶖMBZPVU⋀ḑณ⋸
⬙ↆ ٤ወϪ⬙ↆ⑁ം ಂᓪᡜỉ㦃
ௌᐵፕൡ₋ × ታ⋣ ἤ⭠ፎ ʫ▪ӫٯ × ⪭㌚ḑᴜ܂ታ⋣ 4FSWJDF̗⊈ × ӧ⋣
CMPHƠ⋣ⶤ㌚⮸ × ⋣ⶤݗ൮Ơ⯪ধƠ 8FC"QQ
▔ΜΘ⯒㡮
1VGGJO CSPXTFS EFNP !! /! !! !"" _baseline.scss! !! !""
_footer.scss! !! !"" _layout-debug.scss! !! !"" _layout.scss! !! !"" _top-bar.scss! !! !"" _typography.scss! !! !"" all.scss! !! !"" pages! !! # !"" _about.scss! !! # !"" …! !! # $"" _news.scss! !! $"" partials! !! !"" _article.scss! !! $"" _feature-list-tabs.scss
3PPMFO EFNP !! /! !! !"" _baseline.scss! !! !"" _color.scss!
!! !"" _layout.scss! !! !"" _page.scss! !! !"" all.scss! !! !"" basic! !! # !"" _alert.scss! !! # !"" …! !! # $"" _typography.scss! !! !"" page! !! # !"" _about.scss! !! # !"" …! !! # !"" _support.scss! !! # $"" home! !! # !"" _capacity.scss! !! # !"" …! !! # $"" _three-way.scss! !! $"" partials! !! !"" _block.scss! !! !"" _carousel.scss! !! !"" _footer.scss! !! $"" _header.scss!
ፑ᩠㌝ EFNP !! /! !! !"" _common.scss! !! !"" _layout.scss!
!! !"" _normalize.scss! !! !"" _page-adjustment.scss! !! !"" _partials.scss! !! !"" _typography.scss! !! !"" _variables.scss! !! !"" all.scss! !! !"" basic! !! # !"" _basic.scss! !! # !"" _typography.scss! !! # !"" debug! !! # # $"" _layout-debug.scss! !! # $"" typography! !! # $"" _baseline.scss! !! !"" pages! !! # $"" _index.scss! !! $"" partials! !! !"" _article.scss! !! !"" …! !! $"" _video.scss
ፕʪϪTDTTᗆᐵⵚ⼵⨲ ⮪だᕃḕTDTT ⼑١⮧ਔѹ⯐ḓ㡱 ُ͡˘ծࢣܜ⪘Ṯ՛ ⽠Ꮳৡ⯐ḓ㡩ኑᩪਙᙒ
☰ፕʪϪTDTTᗆᐵⵚ⼵⨲㡫 ⮪だᕃḕTDTT ፕᜩፕ㡠 ⯒ፙ֣㕼ˮ
᩠㊺፥2" GCDPNHSPVQTPQFOSHCB GCDPNFWFOXV