PostCSSを導入してみた話と プラグインいろいろ

CSS Talk vol.1での発表資料です。

Transcript

1. 1PTU$44ǨԜ̱ƭƼǕƵௗƾ
   ȤȶǽDZɀƚǣƚǣ 
   $44
   5BML
   WPM
2. ȬȆȬƀȌǼȫ 5XJUUFS
   !NJTVNJ@UBLVNB CMPH
   CMPHNJTNJUIQPSUGPMJPDPN ૔՛ਸʬ •ƠೀƢҩƣƽƯ
   •ܗ౴ӿǁ֤ƣƩǘǠฆƷǙǩƾ̖ƚƼǔƯง
   •ǯDZȀɀDžȜȺdzǰɀऐ (JU)VC
   HJUIVCDPNNJTNJUI
4. 1PTU$44ǨDžƮǗƼઓƚƵƾƣ • 1PTU$44Ǩ͢ǗƼઓƚƵDŽDžշƷǝƹƾͯDŽǸɀȢǮȹɀȆ
   • 4BTTǕƵƚǀ؎Ʈผผ
   • $44ܒƥDŽǨǨޟǁƭƼƥǢǡผผ
   • 4BTTǨ˚ƚҸǗƵƦǟƚƶƹƵDŽƽ1PTU$44ǔƽDžغʱơư
5. 1PTU$44ǨƺơƹƼǕƵƣƹơƧ • ܗ౴8PSE1SFTTDŽ̴֠ȔǰȹǼȕȷक௬ऐȓɄȫƺƥƹƼƚƵǟƁ 1PTU$44DžƚƚƴƾڼƞƼǘǟƜ
   • ˶ʧȤȺȅǴǼȕƶƭƁƿƜƱǀǟώǠ̱ǢƼǕǞƜ
   • ƚƺǘ˚ƹƼǡ4BTTƾDžಜƜDŽǨ˚ƹƼǕƵơƹƵ
   • ࠮ҏDŽƘDŽǵɀȅȘǯDžώǠ̱ǢƼǡǞƾơஹǥǢǡฆƳƜƚƜDŽǁ֬ ƚ ·ͩ࢖ͬͯͳ͍ํɺ
   ڵຯ࣋ͬͨΒͥͻ࢖ͬͯΈ͍ͯͩ͘͞
6. ˚ƹƼǕƼ͜ơƹƵƩƾ • +4ƽ$44ǨҌړƭƼƥǢǡ
   • 1PTU$44ί˓ƽDž΋ơưƁ
 ȤȶǽDZɀǨ౼;ƭƼ˚Ɯ
   • ˚ƜȤȶǽDZɀǁǞƹƼDž
 ԘܶώǠ̱ǢǟǢǡ$44DŽޥۅǨ˚ ƜƩƾƢƽƣǡ
   • HVMQ (SVOU XFCQBDLǀƿǁԓזƭ Ƽƚǡ WBS
   HVMQ
   
   SFRVJSF HVMQ 
   WBS
   QPTUDTT
   
   SFRVJSF HVMQQPTUDTT 
   HVMQUBTL TUZMFT
   GVODUJPO
   \
   
   
   SFUVSO
   HVMQTSD <
   
   
   
   
   TSDDTTTUZMFDTT
   
   
   >
   
   
   QJQF QPTUDTT <
   
   
   
   
   SFRVJSF bQPTUDTTQMVHJO`
   
   
   
   
   SFRVJSF bQPTUDTTQMVHJO`
   
   
   
   
   SFRVJSF bQPTUDTTQMVHJO`
   
   
   >
   
   
   QJQF HVMQEFTU bEJTU`
   ^ 
7. 1PTU$44ǨƺơƹƼǕƵ؎؆ • ܗ͢DŽःѹ˖ǠƢȜɄȖȸ
   • ǷȹǷȹ1PTU$44ƢƽƣƳƜ
   • 4BTTǚTUZMVTǨ˚ƚƺƺԞƭưƺ˘ऐƭƼƚƥDŽƢࣴӵू
   • 4BTTDŽࣖ૔ޥۅǁ˟ӝƱư$44DŽܒƣۖƢƽƣǡ
 ฆʯިҌܑǁDžࠗ؋ง
   • ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ
   • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ
   • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
8. 1PTU$44DŽȤȶǽDZɀ
9. QPTUDTTDVTUPNQSPQFSUJFT • ҌہƢ˚ƞǡǞƜǁǀǡ
   • $44DŽʯިǁࠍƹƵҌہDŽܒƣۖ
   • ܗ౴DŽȣȶdzȃƽDžȀɀȞDZȸͯDŽܒƣۖƽ˚ƞǡฆ*&DžȍȮง
   • QPTUDTTTJNQMFWBSTƾƚƜƋҌہϪƌƽܒƥȤȶǽDZɀǘƘǡ 
   ίϯύΠϧલ
   SPPU
   \
   
   
   DPMPS
   SFE
   ^
   
   
   I
   \
   
   
   DPMPS
   WBS DPMPS 
   ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTDVTUPNQSPQFSUJFT 
   ίϯύΠϧޙ
   I
   \
   
   
   DPMPS
   SFE
   ^
10. QPTUDTTOFTUJOH • ȚȆȕƢ˚ƞǡǞƜǁǀǡ
    • ƩǢǘ$44DŽʯިǁࠍƹƵܒƣۖฆơ!OFTUǨ˚Ɯง
    • QPTUDTTOFTUFEƾƚƜǨ˚ǥǀƚ4BTTƾϩƮܒƣۖDŽȤȶǽDZɀǘ 
    ίϯύΠϧલ
    MJTU
    \
    
    
    
    B
    \
    
    
    
    
    DPMPS
    
    
    
    
    
    IPWFS
    \
    
    
    
    
    
    
    DPMPS
    CMVF
    
    
    
    
    ^
    ^ IUUQTHJUIVCDPNKPOBUIBOUOFBMQPTUDTTOFTUJOH 
    ίϯύΠϧޙ
    MJTU
    B
    \
    
    
    DPMPS
    
    ^
    MJTU
    BIPWFS
    \
    
    
    DPMPS
    CMVF
    ^
11. QPTUDTTJNQPSU • JNQPSUƽƣǡǞƜǁǀǡ
    • Ҍہǚ.JYJOਢDŽȤȶǽDZɀǞǠͯǁ௥Ǖ౮ǔǀƚƾƜǔƥȀɀȞDZȸƭ ƼƥǢǀƚƂܗ͢ǁ௥Ǖ౮ǖǞƜǁƭƼƠƥƾҔɯҗ 
    JNQPSU
    !JNQPSU
    lMBZPVUIFBEFSDTT IUUQTHJUIVCDPNQPTUDTTQPTUDTTJNQPSU
12. QPTUDTTBQQMZ • ਅ۬NJYJODŽǞƜǀǘDŽ
    • ȤȺȞȓǰDŽȸɄȸȈȐȕǨ˖Ǣǡ 
    ίϯύΠϧલ
    SPPU
    \
    
    
    CUOEFGBVMU
    \
    
    
    
    
    DPMPS
    XIJUF
    
    
    
    
    CBDLHSPVOEDPMPS
    CMVF
    
    
    ^
    ^
    CVUUPO
    \
    
    
    !BQQMZ
    CUOEFGBVMU
    ^ IUUQTHJUIVCDPNQBTDBMEVF[QPTUDTTBQQMZ 
    ίϯύΠϧޙ
    CVUUPO
    \
    
    
    DPMPS
    XIJUF
    
    
    CBDLHSPVOEDPMPS
    CMVF
    ^
13. QPTUDTTTFMFDUPSNBUDIFT • NBUDIFTƢ˚ƞǡǞƜǁǀǡ
    • XFCLJUBOZƾơ˚ƞdžƯƽǁ˚ƜƩƾǘƽƣǡฆ*&DžȍȮง
    • IPWFSǚGPDVTǀƿǘ˚ƞǡ 
    ίϯύΠϧલ
    CPEZNBUDIFT IPNF
    QBHF
    TJOHMFQPTU
    I
    \
    
    
    DPMPS
    SFE
    ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSNBUDIFT 
    ίϯύΠϧޙ
    CPEZIPNF
    I
    CPEZQBHF
    I
    CPEZTJOHMFQPTU
    I
    \
    
    
    DPMPS
    SFE
    ^
14. QPTUDTTTFMFDUPSOPU • OPUDžƯƽǁ˚ƞǡƧƿƁதہ٥ӱǨϛળǁƭƼƥǢǡ
    • TBGBSJƽDžƯƽǁ˚ƞǡ
    • ȀɀȞDZȸׂDŽǞƜǁܒƧdžʫƽǘϩƮƩƾDžƽƣǡƢƁƯƹƣǠܒƧ ǡǞƜǁǀǡ 
    ίϯύΠϧલ
    MJOPU MBTUDIJME
    TBNQMF
    \
    
    
    DPMPS
    SFE
    ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSOPU 
    ίϯύΠϧޙ
    MJOPU MBTUDIJME OPU TBNQMF
    \
    
    
    DPMPS
    SFE
    ^
15. ȤȶǽDZɀDžǀƚƧƿüฆIBTง • IBTƹƼƚƜDŽǘܗ౴଍ݫǁ౼;ƫǢƵǟƭƚ
    • ƘǡȈȹǼȌǨӚ஫ਰǁǘƺழ஫ਰǁ٥ӱƽƣǡ
    • ȤȶǽDZɀDžǔƶǀƚǕƵƚƶƧƿƁƩǢ˚ƞƵǟ˧ͥƶơǟǑƭƚƂ
    • ƯƽǁƘƹƵǟڼƞƼƥƶƫƚ 
    IUNM
    VM
    
    
    
    
    MJϦετMJ
    
    
    
    
    MJϦετ
    
    
    
    
    
    
    VM
    DMBTTDIJME
    
    
    
    
    
    
    
    
    MJࢠϦετMJ
    
    
    
    
    
    
    VM
    
    
    
    
    MJ
    VM 
    $44
    
    DIJME͕ࢠཁૉʹ͋ΔMJʹࢦఆ
    MJIBT 
    DIJME
    \
    DPMPS
    CMVF
    ^
16. QPTUDTTDTTOFYU • ەƭƚޮ࡝ʯިDŽ$44Ǩ˚ƞǡȤȶǽDZɀ
 ǨǔƾǗƼƥǢƼǡ
    • ʫǔƽਸʬƭƵȤȶǽDZɀǘ̱ƹƼǡ
    • ɳ஫ǀ޺ળDž0''ǁƽƣǡ
    • 1PTU$44Ǩ௒ƯǀǟƠƯƯǗ IUUQDTTOFYUJP 
    HVMQ
    HVMQUBTL TUZMFT
    GVODUJPO
    \
    
    
    SFUVSO
    HVMQTSD <
    
    
    
    
    TSDDTTTUZMFDTT
    
    
    >
    
    
    QJQF QPTUDTT <
    
    
    
    
    SFRVJSF QPTUDTTDTTOFYU \
    
    
    
    
    
    
    GFBUVSFT\
    
    
    
    
    
    
    
    
    DVTUPN1SPQFSUJFT
    GBMTF
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    >
    
    
    QJQF HVMQEFTU EJTU
    ^ 
17. ʰǁǘȤȶǽDZɀDžƵƥƫǩ • 1SF$44
    
    • DTTOBOP 1BDLT • QPTUDTTDVTUPNNFEJB
    
    • QPTUDTTDPMPSIXC 'VUVSF
    $44
    4ZOUBY • BVUPQSFGJYFS
    • QPTUDTTXJMMDIBOHF 'BMMCBDLT • QPTUDTTDPOEJUJPOBMT
    • QPTUDTTGPS -BOHVBHF
    &YUFOTJPOT IUUQTHJUIVCDPNQPTUDTTQPTUDTTCMPCNBTUFSEPDTQMVHJOTNE
18. ӵൂǁ˚ƹƼǕǡǁDž
19. 4BTT4UVMVTƾ˘ऐ • 4BTTǨ˚ƚǀƢǟ
    • א஫ǀǘDŽƶƧ˚ƹƼƚƥ
    • 'BMMCBDLਢǚ'VUVSF
    $44
    4ZOUBYDŽ ɽơǟ˚ƚƵƚǘDŽǨ౼;
    • 4BTTDŽȀɄȖDžܒƣړƞǡא஫ǀƭ
    • ׃Ƅǁ঳இƽƣǡ 
    HVMQ
    HVMQUBTL TUZMFT
    GVODUJPO
    \
    
    
    SFUVSO
    HVMQTSD QPTUDTTTUZMFTDTT
    
    
    QJQF TBTT
    
    
    QJQF QPTUDTT <
    
    
    
    
    SFRVJSF BVUPQSFpYFS
    
    
    
    
    SFRVJSF QPTUDTTXJMMDIBOHF
    
    
    
    
    SFRVJSF QPTUDTTDVTUPNQSPQFSUJFT
    
    
    
    
    SFRVJSF QPTUDTTTFMFDUPSOPU
    
    
    >
    
    
    QJQF HVMQEFTU DTT
    ^ 
20. 1PTU$44DŽǕ • ܗ͢DžDTTOFYUǨ˚ƚƺƺʰDŽȤȶǽDZɀǘ௒Ư
    • Ƙǡ঵։˚ƹƼǕƵǟƁǷȹǷȹःѹ˖ƹƼǕƵǠ
    • ˶ʧूǁDž1PTU$44ƶƧƽःѹ˖ǡǀǟƁ$44ޮ࡝ƽܒƧǡȤȶǽDZɀǨ ಧnjDŽƢƚƚƾמƚǔƯƂ
    • 4BTTDŽܒƣۖǨȤȶǽDZɀƽ̱ǢǡƦǟƚǀǟƁ4BTTǨ˚ƹƼƠƚƵۖ Ƣƚƚ
    • ʯިƢҌǥƹƼƭǔƜDŽDžࠗ؋
21. ƠǘƭǣਢȤȶǽDZɀ
22. ƠǘƭǣȤȶǽDZɀƢƘǡ • ௦ƽǘȤȶǽDZɀǨ˖ǢǡƵǗƁֻǁ৘ƺDŽơ͜ơǟǀƚȚȌਢȤȶǽ DZɀǘƘǡ
    • ȤȶǽDZɀɫளȧɄȅDŽƋ'VOƌƾƚƜ൸॑ƢƳǢ
23. 1PTU$44
    $VSSFODZ • ಇఙDŽίˎǨீϡǁҌƞƼƥǢǡȤȶǽDZɀ
    • ˚ƚಚǨઉƞƼǕƵƧƿמƚƺơǀơƹƵ 
    ίϯύΠϧલ
    GPPBGUFS
    \
    
    
    
    
    DPOUFOU
    +1:
    ^ IUUQTHJUIVCDPNUBMHBVUCQPTUDTTDVSSFODZ 
    ίϯύΠϧޙ
    GPPBGUFS
    \
    
    
    
    
    DPOUFOU
    =
    ^
24. QPTUDTTQPJOUFS • ƋQPJOUFS
    DVSTPSƌƽǘƋDVSTPS
    QPJOUFSƌƽܒƣ͘ƭƼƥǢǡ
    • 5XJUUFSDŽƺnjǚƣƢƣƹơƧǟƭƚ
    • ਯǟǥƭƚơǟ˖ǟǢƵผผ 
    ίϯύΠϧલ
    GPP
    \
    
    
    
    
    QPJOUFS
    DVSTPS
    ^ IUUQTHJUIVCDPNNBSLHPPEZFBSQPTUDTTQPJOUFS 
    ίϯύΠϧޙ
    GPP
    \
    
    
    
    
    DVSTPS
    QPJOUFS
    ^
25. 1PTU$44
    (FSNBO
    4UZMF
    4IFFUT • ȖDZȑ௡ƽ$44ǨܒƧǡ 
    ίϯύΠϧલ
    GPP
    \
    
    
    
    
    IÖIF
    QY
    
    
    
    
    BV–FOBCTUBOEVOUFO
    QY
    
    
    
    
    TDISJGUHS֖F
    QY
    XJDIUJH
    
    
    
    
    IJOUFSHSVOEGBSCF
    TDIXBS[
    
    
    
    
    GBSCF
    XFJ–
    ^ IUUQTHJUIVCDPNUJNDIFQPTUDTTHFSNBOTUZMFTIFFUT 
    ίϯύΠϧޙ
    GPP
    \
    
    
    
    
    IFJHIU
    QY
    
    
    
    
    NBSHJOCPUUPN
    QY
    
    
    
    
    GPOUTJ[F
    QY
    JNQPSUBOU
    
    
    
    
    CBDLHSPVOEDPMPS
    CMBDL
    
    
    
    
    DPMPS
    XIJUF
    ^
26. 1PTU$44
    +BQBOFTF
    4UZMFTIFFUT
    • ۞ܥ௡ƽ$44ǨܒƧǡ 
    ίϯύΠϧલ
    GPP
    \
    
    
    എܠ
    ҉ࠇ৭
    ॏཁ
    
    
    ෯
    QY
    
    
    ߴ͞
    QY
    ^ IUUQTHJUIVCDPNJLLPVQPTUDTTKBQBOFTFTUZMFTIFFUT 
    ίϯύΠϧޙ
    GPP
    \
    
    
    CBDLHSPVOE
    F
    JNQPSUBOU
    
    
    XJEUI
    QY
    
    
    IFJHIU
    QY
    ^
27. QPTUDTTIBMMPXFFO • $44DŽ٥ӱƽȜȺdzǰɀDŽDZȶȆȕǨஎ঍ƭƼƥǢǡ
    • $44
    5SJDL
    PS
    5SFBUƾƚƜȜȺdzǰɀȞɄȓǰDŽȚȌƽ˖ǠǔƭƵƂ
    • ૔͜ƽȤȶǽDZɀ˖ǢǡƾƩǣǘ1PTU$44DŽޟƭƫ
    • DZȶȆȕΏ്ƭƼǔƯ 
    ίϯύΠϧલ
    GPP
    \
    
    
    ͓͹͚
    ͔΅ͪΌ͓͹͚
    ^
    IUUQTHJUIVCDPNNJTNJUIQPTUDTTIBMMPXFFO 
    ϒϥ΢β
28. ƫƚƪǁǔƾǗ • ʫƯƦ4BTTǚ4UZMVTơǟʈǠړƞǡǏƣƾƚƜǥƧƽDžǀƚ
    • ׃Ƅǁ˚ƹƼǕǡǀǟ4BTTǚ4UZMVTƾ˘ऐ
    • ȤȶǽDZɀ˚Ɯǀǟ$44DŽʯިǁࠍƹƵǘDŽ
    • ƿDŽȤȶǽDZɀƢƚƚơ͜ơǟǀƚ۶DžƁDTTOFYUƽ௒ƭƼǕǡDŽƢƠƯ ƯǗ
    • ߅ɷʴDŽ$44DŽܒƣۖƽƣǡDŽDžޟƭƚ
    • ௦ƽǘȤȶǽDZɀ˖ƹƼ̴ങƽƣƼޟƭƚ
    • ƠǘƭǣȤȶǽDZɀǘ̴ങƫǢƼƼޟƭƚ
29. Ӫ