Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

October 29, 2016

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

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

October 29, 2016
Tweet

More Decks by ▲

Other Decks in Programming

Transcript

  1. ˚ƹƼǕƼ͜ơƹƵƩƾ • +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`  ^ 
  2. QPTUDTTDVTUPNQSPQFSUJFT • ҌہƢ˚ƞǡǞƜǁǀǡ • $44DŽʯިǁࠍƹƵҌہDŽܒƣۖ • ܗ౴DŽȣȶdzȃƽDžȀɀȞDZȸͯDŽܒƣۖƽ˚ƞǡฆ*&DžȍȮง • QPTUDTTTJNQMFWBSTƾƚƜƋҌہϪƌƽܒƥȤȶǽDZɀǘƘǡ ίϯύΠϧલ

    SPPU\ DPMPSSFE ^  I\ DPMPSWBS DPMPS  ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTDVTUPNQSPQFSUJFT ίϯύΠϧޙ I\ DPMPSSFE ^
  3. QPTUDTTOFTUJOH • ȚȆȕƢ˚ƞǡǞƜǁǀǡ • ƩǢǘ$44DŽʯިǁࠍƹƵܒƣۖฆơ!OFTUǨ˚Ɯง • QPTUDTTOFTUFEƾƚƜǨ˚ǥǀƚ4BTTƾϩƮܒƣۖDŽȤȶǽDZɀǘ ίϯύΠϧલ MJTU\ B\

    DPMPS IPWFS\ DPMPSCMVF ^ ^ IUUQTHJUIVCDPNKPOBUIBOUOFBMQPTUDTTOFTUJOH ίϯύΠϧޙ MJTUB\ DPMPS ^ MJTUBIPWFS\ DPMPSCMVF ^
  4. QPTUDTTBQQMZ • ਅ۬NJYJODŽǞƜǀǘDŽ • ȤȺȞȓǰDŽȸɄȸȈȐȕǨ˖Ǣǡ ίϯύΠϧલ SPPU\ CUOEFGBVMU\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF

    ^ ^ CVUUPO\ !BQQMZCUOEFGBVMU ^ IUUQTHJUIVCDPNQBTDBMEVF[QPTUDTTBQQMZ ίϯύΠϧޙ CVUUPO\ DPMPSXIJUF CBDLHSPVOEDPMPSCMVF ^
  5. QPTUDTTTFMFDUPSNBUDIFT • NBUDIFTƢ˚ƞǡǞƜǁǀǡ • XFCLJUBOZƾơ˚ƞdžƯƽǁ˚ƜƩƾǘƽƣǡฆ*&DžȍȮง • IPWFSǚGPDVTǀƿǘ˚ƞǡ ίϯύΠϧલ CPEZNBUDIFT IPNF

    QBHF TJOHMFQPTU I\ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSNBUDIFT ίϯύΠϧޙ CPEZIPNFI  CPEZQBHFI  CPEZTJOHMFQPTUI\ DPMPSSFE ^
  6. QPTUDTTTFMFDUPSOPU • OPUDžƯƽǁ˚ƞǡƧƿƁதہ٥ӱǨϛળǁƭƼƥǢǡ • TBGBSJƽDžƯƽǁ˚ƞǡ • ȀɀȞDZȸׂDŽǞƜǁܒƧdžʫƽǘϩƮƩƾDžƽƣǡƢƁƯƹƣǠܒƧ ǡǞƜǁǀǡ ίϯύΠϧલ MJOPU

    MBTUDIJME TBNQMF \ DPMPSSFE ^ IUUQTHJUIVCDPNQPTUDTTQPTUDTTTFMFDUPSOPU ίϯύΠϧޙ MJOPU MBTUDIJME OPU TBNQMF \ DPMPSSFE ^
  7. ȤȶǽDZɀDžǀƚƧƿüฆIBTง • IBTƹƼƚƜDŽǘܗ౴଍ݫǁ౼;ƫǢƵǟƭƚ • ƘǡȈȹǼȌǨӚ஫ਰǁǘƺழ஫ਰǁ٥ӱƽƣǡ • ȤȶǽDZɀDžǔƶǀƚǕƵƚƶƧƿƁƩǢ˚ƞƵǟ˧ͥƶơǟǑƭƚƂ • ƯƽǁƘƹƵǟڼƞƼƥƶƫƚ IUNM

    VM MJϦετMJ MJϦετ VMDMBTTDIJME MJࢠϦετMJ VM MJ VM $44 DIJME͕ࢠཁૉʹ͋ΔMJʹࢦఆ MJIBT DIJME \ DPMPSCMVF ^
  8. 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  ^ 
  9. ʰǁǘȤȶǽDZɀDžƵƥƫǩ • 1SF$44 • DTTOBOP 1BDLT • QPTUDTTDVTUPNNFEJB • QPTUDTTDPMPSIXC

    'VUVSF$444ZOUBY • BVUPQSFGJYFS • QPTUDTTXJMMDIBOHF 'BMMCBDLT • QPTUDTTDPOEJUJPOBMT • QPTUDTTGPS -BOHVBHF&YUFOTJPOT IUUQTHJUIVCDPNQPTUDTTQPTUDTTCMPCNBTUFSEPDTQMVHJOTNE
  10. 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  ^ 
  11. 1PTU$44(FSNBO4UZMF4IFFUT • ȖDZȑ௡ƽ$44ǨܒƧǡ ίϯύΠϧલ GPP\ IÖIFQY BV–FOBCTUBOEVOUFOQY TDISJGUHS֖FQYXJDIUJH IJOUFSHSVOEGBSCFTDIXBS[ GBSCFXFJ–

    ^ IUUQTHJUIVCDPNUJNDIFQPTUDTTHFSNBOTUZMFTIFFUT ίϯύΠϧޙ GPP\ IFJHIUQY NBSHJOCPUUPNQY GPOUTJ[FQYJNQPSUBOU CBDLHSPVOEDPMPSCMBDL DPMPSXIJUF ^
  12. Ӫ