utility first css

Transcript

1. 6UJMJUZ
   'JSTU
   $44 

2. ೥ͷ$44ͷτϨϯυ w ೥͸5BJMXJOE
   $44͕ྲྀߦͨ͠
   w 5BJMXJOE
   $44͸6UJMJUZ
   'JSTU
   $44ͳϥΠϒϥϦͱ͍͏͜ͱͰ஫໨͞Εͨ
    4UBUF
   PG
   $44
   Ͱ΋
   τοϓϖʔδͰݴٴ͞Ε͍ͯΔ https://2020.stateofcss.com/

3. 6UJMJUZ
   'JSTU
   $44ͱ͸ w 6UJMJUZ
   'JSTU
   $44ͱ͸
 ͋ΒΏΔύλʔϯͷ࠷খݶͷϓϩύςΟͷΈΛؚΜͩ$44Λఆٛ͠
 ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ʹ࢖͑Δ$44ͷߟ͑ํ
    αϯϓϧ͸࣍ͷϖʔδͰ

4. 6UJMJUZ
   'JSTU
   $44ͷྫ
    ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ
   'JSTU
   $44ͷ৔߹ https://tailwindcss.com/docs/utility-first

5. 6UJMJUZ
   'JSTU
   $44ͷྫ
    ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ
   'JSTU
   $44ͷ৔߹ ैདྷ͸UJUMF΍DPOUFOUͳͲҙຯͷ ͋Δ໋໊Ͱ$44Λఆ͍ٛͯͨ͠ https://tailwindcss.com/docs/utility-first

6. 6UJMJUZ
   'JSTU
   $44ͷྫ
    ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ
   'JSTU
   $44ͷ৔߹ 6UJMJUZ
   'JSTU
   $44ͩͱ
   $44ͷ಺༰Λදݱ͢ΔΫϥε໊Ͱ ఆٛ͞Ε͍ͯΔ https://tailwindcss.com/docs/utility-first

7. 6UJMJUZ
   'JSTU
   $44ͷྫ
    ˣ͜ͷΑ͏ͳϨΠΞ΢τΛ࡞Δͱ͢Δ ैདྷͷΞϓϩʔνͷ৔߹ 6UJMJUZ
   'JSTU
   $44ͷ৔߹ https://tailwindcss.com/docs/utility-first ΠϯϥΠϯͰ$44Λॻ͍͍ͯΔ͔ͷΑ͏ͳײ֮

8. 6UJMJUZ
   'JSTU
   $44ͷϝϦοτ  ࣗ෼Ͱ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ
    Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ
    ελΠϧʹมߋ͕҆શʹͳΔ
    ࣍ͷϖʔδ͔Β
   

   ͦΕͧΕৄ͘͠આ໌͠·͢

9. ࣗ෼Ͱ৽͍͠$44Λॻ͘ඞཁ͕ͳ͘ͳΔ w ༻ҙ͞ΕͨΫϥεΛ૊Έ߹ΘͤΔ͚ͩͳͷͰ$44Λॻ͘ඞཁ͕ͳ͍
   w ϨΠΞ΢τΛ࡞Δࡍʹ)5.-ϑΝΠϧ͔Β཭ΕΔ͜ͱͳ͘
 ίʔσΟϯά͢Δ͜ͱ͕Ͱ͖Δ
   w $44Λॻ͔ͳ͍ͷͰ$44Λϝϯς͢Δඞཁ΋ͳ͘ͳΔ
   

   ϨΠΞ΢τมߋ͸)5.-͚ͩͰ׬݁

10. Ϋϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ w ༻ҙ͞Εͨ$44Λ࢖͏͚ͩͳͷͰΫϥε໊Λߟ͑Δඞཁ͕ͳ͘ͳΔ
     ϨΠΞ΢τͷ౎߹Ͱλά͕ଟஈʹͳΔ࣌ʹແཧ ΍ΓΫϥε໊Λ͚ͭͨΓͯ͠·ͤΜ͔ʁ Ϋϥε໊ͷωʔϛϯάϧʔϧΛߟ͑ͨΓ
    ͦΕΛνʔϜʹਁಁͤͨ͞Γ
 कΒΕͯΔ͔νΣοΫͨ͠Γ͢Δͷ΋େมͩΑͶ


11. ελΠϧʹมߋ͕҆શʹͳΔ w $44͸ن໛͕େ͖͘ͳΔʹͭΕͯӨڹൣғ͕େ͖͘ͳΓ
 มߋ࡟আͷϋʔυϧ͕ߴ͘ͳΔ
     ͍Ζ͍Ζͳͱ͜ΖͰ࢖ΘΕ͍ͯͦ͏ͳఆٛʹ
    खΛՃ͑ͨ͘ͳͬͨ࣌ʹؾܰʹͰ͖ͳ͍ ාͯ͘୭΋͞ΘΕͳ͍ڊେͳ$44ʹ
    ૺ۰ͨ͜͠ͱ͕͋Δਓ΋ଟ͍ͷͰ͸ͳ͍Ͱ͠ΐ͏͔

12. 6UJMJUZ
    'JSTU
    $44ʹର͢Δٙ໰  ಉ͡ϨΠΞ΢τΛ࢖͍·Θ͍ͨ࣌͠͸Ͳ͏͢Δͷʁ
     େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ
     ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ
     ࣍ͷϖʔδ͔Β
    

    ͦΕͧΕৄ͘͠આ໌͠·͢

13. ಉ͡ϨΠΞ΢τΛ࢖͍·Θ͍ͨ࣌͠͸Ͳ͏͢Δͷʁ w 2
    ྫ͑͹ಉ͡ϨΠΞ΢τͷϘλϯΛԿ౓΋࢖͏࣌͸

    
    
    
    ຖճˣΛίϐϖ͢Δͷʁʁ

    
    w "
    ڞ௨Խ͍ͨ͠ͱ͖͸ίϯϙʔωϯτԽ͢Δ
 ɹ
    ͭ·Γ3FBDU΍7VF΍8FC$PNQPOFOUTͱ߹Θͤͯ࢖͏ͷ͕ྑ͍
    

    

14. େྔͷ$44ؚ·ΕΔ͔ΒϑΝΠϧαΠζ͕େ͖͘ͳΒͳ͍ʁ w 2
    ࢖ΘΕͳ͍ఆٛ΋େྔʹؚΜͩڊେͳ$44ΛಡΈࠐΉඞཁʹͳ
    
    
    
    
    
    Δ͔ΒύϑΥʔϚϯεʹ໰୊͕ͰΔͷͰ͸ʁ
    w "
    Ϗϧυ͢Δ͜ͱͰΞϓϦ಺Ͱ࢖ΘΕͯΔ෦෼͚ͩΛநग़ͨ͠ $44Λ࡞੒͢Δ͜ͱ͕Ͱ͖Δ
     5BJMXJOE͸1PTU$44Λ͔ͭ͏͜ͱͰ
    

    ͜ͷ࢓૊ΈΛ࣮ݱ͍ͯ͠·͢

15. ΠϯϥΠϯελΠϧ͡Όμϝͳͷʁ w 2
    )5.-ʹ௚઀ελΠϧΛॻ͘ͷͱԿ͕ҧ͏ͷʁ

    
    
    
    ˣ͜Μͳײ͡
    w "
    ΠϯϥΠϯελΠϧͩͱ࣮ݱͰ͖ͳ͍͜ͱ͕͋Δ
     ٙࣅΫϥε͕࢖͑ͳ͍
     ϝσΟΞΫΤϦ͕࢖͑ͳ͍
    

     αΠζͳͲͷ਺஋͕
 ϚδοΫφϯόʔʹͳͬͯ͠·͏
     IPWFS΍GPDVTͳͲͷελΠϧఆٛ ʹ͸ٖࣅΫϥεΛ࢖͏ඞཁ͕͋Δ ϝσΟΞΫΤϦΛ࢖͏ͱ
    ΢Οϯυ΢αΠζʹԠͨ͡
    $44ͷ࢖͍෼͚ͳͲ͕Ͱ͖Δ

16. 6UJMJUZ
    'JSTU
    $44ద༻৔໘ w 6UJMJUZ
    'JSTU
    $44ͷޮՌ͕ߴ͍έʔε
    w ࣗલͰ࣮૷͢Δ$44͕ଟ͍ΞϓϦ
    w ϖʔδ਺͕ଟ͘ϨΠΞ΢τͷมߋ͕ଟ͍ΞϓϦ
    w 3FBDU΍7VFΛ࢖ͬͨΞϓϦ
    w

    6UJMJUZ
    'JSTU
    $44ͷޮՌ͕௿͍έʔε
    w ϖʔδ਺͕গͳ͍খن໛ͳΞϓϦ΍ݟͨ໨ʹͩ͜ΘΒͳ͍ϓϩτλΠϓͷ։ൃ
    w 6*ϑϨʔϜϫʔΫʹ·Δ͝ͱ৐͔ͬΕΔΞϓϦ
    w ΫϥΠΞϯταΠυͷίʔυΛϏϧυ͠ͳ͍ΞϓϦ
    

17. ݸਓతͳײ૝ w ຊ൪ΞϓϦͰͷͭΒΈ͸Α͘෼͔Δ
    w ୭΋͞ΘΕͳ͍ڊେͳ$44ΛԿ౓΋ݟ͖ͯͨ
    w Ϋϥε໊ͷϧʔϧΛͲͷߟ͑ํͰ͍͔ܾ͘ΊΔͷ΋໘౗ͩ͠
 ͦΕΛνʔϜʹਁಁͤ͞Δίετ΋ߴ͍
    w ࠷ۙ͸ϓϩτλΠϓΛ࡞Δ͜ͱ͕ଟ͍͕ͦ͜Ͱ͸UPP
    NVDI
    

    w $44͸ॻ͖ͨ͘ͳ͍͕6*ϥΠϒϥϦʹؙ৐ΓͰ͖Δͦ͠ͷํָ͕
    w ࣮ࡍ࢖ͬͯΈ͍ͨͱࢥ͏͔
    w ࣗ෼͕࢖͍͜ͳͤͯ΋ΈΜͳʹ࢖͍͜ͳͤͯ΋Β͑Δ͔ෆ҆
    w ͱ͸͍͑ैདྷͷ΍ΓํͰ΋՝୊͸͋ΔͷͰࢼͯ͠ݟΔՁ஋͸͋Γͦ͏
    

18. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

19. ࠓ೔ͷεϥΠυΧϥʔ͸
 5BJMXJOEͷϒϥϯυΧϥʔͰͨ͠