Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
PostCSSを導入してみた話と プラグインいろいろ
misumi
October 29, 2016
Programming
2
410
PostCSSを導入してみた話と プラグインいろいろ
CSS Talk vol.1での発表資料です。
misumi
October 29, 2016
Tweet
Share
More Decks by misumi
See All by misumi
mismith0227
0
1.9k
mismith0227
1
1.3k
mismith0227
0
2k
mismith0227
0
180
mismith0227
8
2.9k
mismith0227
0
270
mismith0227
0
790
mismith0227
1
870
mismith0227
0
690
Other Decks in Programming
See All in Programming
akatsukinewgrad
0
200
line_developers_tw
1
490
attsumi
1
450
taoshotaro
1
370
akatsukinewgrad
0
210
wasabeef
1
570
malvinstn
1
650
77web
0
210
yamotuki
0
130
kubode
0
200
fkubota
1
400
yshrsmz
1
460
Featured
See All Featured
aarron
258
36k
tanoku
258
24k
nonsquared
81
3.3k
kastner
54
1.9k
carmenhchung
26
1.3k
bryan
100
11k
denniskardys
220
120k
orderedlist
PRO
329
35k
jonyablonski
14
1.1k
jasonvnalue
82
8.1k
lauravandoore
437
28k
tanoku
86
8.5k
Transcript
1PTU$44ǨԜ̱ƭƼǕƵௗƾ ȤȶǽDZɀƚǣƚǣ $445BMLWPM
ȬȆȬƀȌǼȫ 5XJUUFS!NJTVNJ@UBLVNB CMPHCMPHNJTNJUIQPSUGPMJPDPN ՛ਸʬ •ƠೀƢҩƣƽƯ •ܗӿǁ֤ƣƩǘǠฆƷǙǩƾ̖ƚƼǔƯง •ǯDZȀɀDžȜȺdzǰɀऐ (JU)VCHJUIVCDPNNJTNJUI
None
1PTU$44ǨDžƮǗƼઓƚƵƾƣ • 1PTU$44Ǩ͢ǗƼઓƚƵDŽDžշƷǝƹƾͯDŽǸɀȢǮȹɀȆ • 4BTTǕƵƚǀ؎Ʈผผ • $44ܒƥDŽǨǨޟǁƭƼƥǢǡผผ • 4BTTǨ˚ƚҸǗƵƦǟƚƶƹƵDŽƽ1PTU$44ǔƽDžغʱơư
1PTU$44ǨƺơƹƼǕƵƣƹơƧ • ܗ8PSE1SFTTDŽ̴֠ȔǰȹǼȕȷक௬ऐȓɄȫƺƥƹƼƚƵǟƁ 1PTU$44DžƚƚƴƾڼƞƼǘǟƜ • ˶ʧȤȺȅǴǼȕƶƭƁƿƜƱǀǟώǠ̱ǢƼǕǞƜ • ƚƺǘ˚ƹƼǡ4BTTƾDžಜƜDŽǨ˚ƹƼǕƵơƹƵ • ҏDŽƘDŽǵɀȅȘǯDžώǠ̱ǢƼǡǞƾơஹǥǢǡฆƳƜƚƜDŽǁ֬
ƚ ·ͩͬͯͳ͍ํɺ ڵຯ࣋ͬͨΒͥͻͬͯΈ͍ͯͩ͘͞
˚ƹƼǕƼ͜ơƹƵƩƾ • +4ƽ$44ǨҌړƭƼƥǢǡ • 1PTU$44ί˓ƽDžơưƁ ȤȶǽDZɀǨ౼;ƭƼ˚Ɯ • ˚ƜȤȶǽDZɀǁǞƹƼDž ԘܶώǠ̱ǢǟǢǡ$44DŽޥۅǨ˚ ƜƩƾƢƽƣǡ
• HVMQ (SVOU XFCQBDLǀƿǁԓזƭ Ƽƚǡ WBSHVMQSFRVJSF HVMQ WBSQPTUDTTSFRVJSF HVMQQPTUDTT HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD < TSDDTTTUZMFDTT > QJQF QPTUDTT < SFRVJSF bQPTUDTTQMVHJO` SFRVJSF bQPTUDTTQMVHJO` SFRVJSF bQPTUDTTQMVHJO` > QJQF HVMQEFTU bEJTU` ^
1PTU$44ǨƺơƹƼǕƵ؎؆ • ܗ͢DŽःѹ˖ǠƢȜɄȖȸ • ǷȹǷȹ1PTU$44ƢƽƣƳƜ • 4BTTǚTUZMVTǨ˚ƚƺƺԞƭưƺ˘ऐƭƼƚƥDŽƢࣴӵू • 4BTTDŽࣖޥۅǁ˟ӝƱư$44DŽܒƣۖƢƽƣǡ ฆʯިҌܑǁDžࠗ؋ง
• ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
1PTU$44DŽȤȶǽDZɀ
QPTUDTTDVTUPNQSPQFSUJFT • ҌہƢ˚ƞǡǞƜǁǀǡ • $44DŽʯިǁࠍƹƵҌہDŽܒƣۖ • ܗDŽȣȶdzȃƽDžȀɀȞDZȸͯDŽܒƣۖƽ˚ƞǡฆ*&DžȍȮง • QPTUDTTTJNQMFWBSTƾƚƜƋҌہϪƌƽܒƥȤȶǽDZɀǘƘǡ ίϯύΠϧલ
SPPU\ DPMPSSFE ^ I\ DPMPSWBS DPMPS ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTDVTUPNQSPQFSUJFT ίϯύΠϧޙ I\ DPMPSSFE ^
QPTUDTTOFTUJOH • ȚȆȕƢ˚ƞǡǞƜǁǀǡ • ƩǢǘ$44DŽʯިǁࠍƹƵܒƣۖฆơ!OFTUǨ˚Ɯง • QPTUDTTOFTUFEƾƚƜǨ˚ǥǀƚ4BTTƾϩƮܒƣۖDŽȤȶǽDZɀǘ ίϯύΠϧલ MJTU\ B\
DPMPS IPWFS\ DPMPSCMVF ^ ^ IUUQTHJUIVCDPNKPOBUIBOUOFBMQPTUDTTOFTUJOH ίϯύΠϧޙ MJTUB\ DPMPS ^ MJTUBIPWFS\ DPMPSCMVF ^
QPTUDTTJNQPSU • JNQPSUƽƣǡǞƜǁǀǡ • Ҍہǚ.JYJOਢDŽȤȶǽDZɀǞǠͯǁǕ౮ǔǀƚƾƜǔƥȀɀȞDZȸƭ ƼƥǢǀƚƂܗ͢ǁǕ౮ǖǞƜǁƭƼƠƥƾҔɯҗ JNQPSU !JNQPSUlMBZPVUIFBEFSDTT IUUQTHJUIVCDPNQPTUDTTQPTUDTTJNQPSU
QPTUDTTBQQMZ • ਅ۬NJYJODŽǞƜǀǘDŽ • ȤȺȞȓǰDŽȸɄȸȈȐȕǨ˖Ǣǡ ίϯύΠϧલ SPPU\ CUOEFGBVMU\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF
^ ^ CVUUPO\ !BQQMZCUOEFGBVMU ^ IUUQTHJUIVCDPNQBTDBMEVF[QPTUDTTBQQMZ ίϯύΠϧޙ CVUUPO\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF ^
QPTUDTTTFMFDUPSNBUDIFT • NBUDIFTƢ˚ƞǡǞƜǁǀǡ • XFCLJUBOZƾơ˚ƞdžƯƽǁ˚ƜƩƾǘƽƣǡฆ*&DžȍȮง • IPWFSǚGPDVTǀƿǘ˚ƞǡ ίϯύΠϧલ CPEZNBUDIFT IPNF
QBHF TJOHMFQPTU I\ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSNBUDIFT ίϯύΠϧޙ CPEZIPNFI CPEZQBHFI CPEZTJOHMFQPTUI\ DPMPSSFE ^
QPTUDTTTFMFDUPSOPU • OPUDžƯƽǁ˚ƞǡƧƿƁதہ٥ӱǨϛળǁƭƼƥǢǡ • TBGBSJƽDžƯƽǁ˚ƞǡ • ȀɀȞDZȸׂDŽǞƜǁܒƧdžʫƽǘϩƮƩƾDžƽƣǡƢƁƯƹƣǠܒƧ ǡǞƜǁǀǡ ίϯύΠϧલ MJOPU
MBTUDIJME TBNQMF \ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSOPU ίϯύΠϧޙ MJOPU MBTUDIJME OPU TBNQMF \ DPMPSSFE ^
ȤȶǽDZɀDžǀƚƧƿüฆIBTง • IBTƹƼƚƜDŽǘܗݫǁ౼;ƫǢƵǟƭƚ • ƘǡȈȹǼȌǨӚਰǁǘƺழਰǁ٥ӱƽƣǡ • ȤȶǽDZɀDžǔƶǀƚǕƵƚƶƧƿƁƩǢ˚ƞƵǟ˧ͥƶơǟǑƭƚƂ • ƯƽǁƘƹƵǟڼƞƼƥƶƫƚ IUNM
VM MJϦετMJ MJϦετ VMDMBTTDIJME MJࢠϦετMJ VM MJ VM $44 DIJME͕ࢠཁૉʹ͋ΔMJʹࢦఆ MJIBT DIJME \ DPMPSCMVF ^
QPTUDTTDTTOFYU • ەƭƚޮʯިDŽ$44Ǩ˚ƞǡȤȶǽDZɀ ǨǔƾǗƼƥǢƼǡ • ʫǔƽਸʬƭƵȤȶǽDZɀǘ̱ƹƼǡ • ɳǀળDž0''ǁƽƣǡ • 1PTU$44ǨƯǀǟƠƯƯǗ
IUUQDTTOFYUJP HVMQ HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD < TSDDTTTUZMFDTT > QJQF QPTUDTT < SFRVJSF QPTUDTTDTTOFYU \ GFBUVSFT\ DVTUPN1SPQFSUJFTGBMTF ^ ^ > QJQF HVMQEFTU EJTU ^
ʰǁǘȤȶǽDZɀDžƵƥƫǩ • 1SF$44 • DTTOBOP 1BDLT • QPTUDTTDVTUPNNFEJB • QPTUDTTDPMPSIXC
'VUVSF$444ZOUBY • BVUPQSFGJYFS • QPTUDTTXJMMDIBOHF 'BMMCBDLT • QPTUDTTDPOEJUJPOBMT • QPTUDTTGPS -BOHVBHF&YUFOTJPOT IUUQTHJUIVCDPNQPTUDTTQPTUDTTCMPCNBTUFSEPDTQMVHJOTNE
ӵൂǁ˚ƹƼǕǡǁDž
4BTT4UVMVTƾ˘ऐ • 4BTTǨ˚ƚǀƢǟ • אǀǘDŽƶƧ˚ƹƼƚƥ • 'BMMCBDLਢǚ'VUVSF$444ZOUBYDŽ ɽơǟ˚ƚƵƚǘDŽǨ౼; • 4BTTDŽȀɄȖDžܒƣړƞǡאǀƭ
• ׃Ƅǁஇƽƣǡ HVMQ HVMQUBTL TUZMFT GVODUJPO \ SFUVSOHVMQTSD QPTUDTTTUZMFTDTT QJQF TBTT QJQF QPTUDTT < SFRVJSF BVUPQSFpYFS SFRVJSF QPTUDTTXJMMDIBOHF SFRVJSF QPTUDTTDVTUPNQSPQFSUJFT SFRVJSF QPTUDTTTFMFDUPSOPU > QJQF HVMQEFTU DTT ^
1PTU$44DŽǕ • ܗ͢DžDTTOFYUǨ˚ƚƺƺʰDŽȤȶǽDZɀǘƯ • Ƙǡ։˚ƹƼǕƵǟƁǷȹǷȹःѹ˖ƹƼǕƵǠ • ˶ʧूǁDž1PTU$44ƶƧƽःѹ˖ǡǀǟƁ$44ޮƽܒƧǡȤȶǽDZɀǨ ಧnjDŽƢƚƚƾמƚǔƯƂ • 4BTTDŽܒƣۖǨȤȶǽDZɀƽ̱ǢǡƦǟƚǀǟƁ4BTTǨ˚ƹƼƠƚƵۖ
Ƣƚƚ • ʯިƢҌǥƹƼƭǔƜDŽDžࠗ؋
ƠǘƭǣਢȤȶǽDZɀ
ƠǘƭǣȤȶǽDZɀƢƘǡ • ௦ƽǘȤȶǽDZɀǨ˖ǢǡƵǗƁֻǁƺDŽơ͜ơǟǀƚȚȌਢȤȶǽ DZɀǘƘǡ • ȤȶǽDZɀɫளȧɄȅDŽƋ'VOƌƾƚƜ൸॑ƢƳǢ
1PTU$44$VSSFODZ • ಇఙDŽίˎǨீϡǁҌƞƼƥǢǡȤȶǽDZɀ • ˚ƚಚǨઉƞƼǕƵƧƿמƚƺơǀơƹƵ ίϯύΠϧલ GPPBGUFS\ DPOUFOU+1: ^ IUUQTHJUIVCDPNUBMHBVUCQPTUDTTDVSSFODZ
ίϯύΠϧޙ GPPBGUFS\ DPOUFOU= ^
QPTUDTTQPJOUFS • ƋQPJOUFSDVSTPSƌƽǘƋDVSTPSQPJOUFSƌƽܒƣ͘ƭƼƥǢǡ • 5XJUUFSDŽƺnjǚƣƢƣƹơƧǟƭƚ • ਯǟǥƭƚơǟ˖ǟǢƵผผ ίϯύΠϧલ GPP\ QPJOUFSDVSTPS
^ IUUQTHJUIVCDPNNBSLHPPEZFBSQPTUDTTQPJOUFS ίϯύΠϧޙ GPP\ DVSTPSQPJOUFS ^
1PTU$44(FSNBO4UZMF4IFFUT • ȖDZȑƽ$44ǨܒƧǡ ίϯύΠϧલ GPP\ IÖIFQY BVFOBCTUBOEVOUFOQY TDISJGUHSÖFQYXJDIUJH IJOUFSHSVOEGBSCFTDIXBS[ GBSCFXFJ
^ IUUQTHJUIVCDPNUJNDIFQPTUDTTHFSNBOTUZMFTIFFUT ίϯύΠϧޙ GPP\ IFJHIUQY NBSHJOCPUUPNQY GPOUTJ[FQYJNQPSUBOU CBDLHSPVOEDPMPSCMBDL DPMPSXIJUF ^
1PTU$44+BQBOFTF4UZMFTIFFUT • ۞ܥƽ$44ǨܒƧǡ ίϯύΠϧલ GPP\ എܠ҉ࠇ৭ॏཁ ෯QY ߴ͞QY ^ IUUQTHJUIVCDPNJLLPVQPTUDTTKBQBOFTFTUZMFTIFFUT
ίϯύΠϧޙ GPP\ CBDLHSPVOEFJNQPSUBOU XJEUIQY IFJHIUQY ^
QPTUDTTIBMMPXFFO • $44DŽ٥ӱƽȜȺdzǰɀDŽDZȶȆȕǨஎƭƼƥǢǡ • $445SJDLPS5SFBUƾƚƜȜȺdzǰɀȞɄȓǰDŽȚȌƽ˖ǠǔƭƵƂ • ͜ƽȤȶǽDZɀ˖ǢǡƾƩǣǘ1PTU$44DŽޟƭƫ • DZȶȆȕΏ്ƭƼǔƯ ίϯύΠϧલ
GPP\ ͓͚͔΅ͪΌ͓͚ ^ IUUQTHJUIVCDPNNJTNJUIQPTUDTTIBMMPXFFO ϒϥβ
ƫƚƪǁǔƾǗ • ʫƯƦ4BTTǚ4UZMVTơǟʈǠړƞǡǏƣƾƚƜǥƧƽDžǀƚ • ׃Ƅǁ˚ƹƼǕǡǀǟ4BTTǚ4UZMVTƾ˘ऐ • ȤȶǽDZɀ˚Ɯǀǟ$44DŽʯިǁࠍƹƵǘDŽ • ƿDŽȤȶǽDZɀƢƚƚơ͜ơǟǀƚ۶DžƁDTTOFYUƽƭƼǕǡDŽƢƠƯ ƯǗ
• ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
Ӫ