CSSフレームワークをつくろう！

フロントエンドカンファレンス 2017 のスライドです。

Transcript

1. $44ϑϨʔϜϫʔΫΛͭ͘Ζ͏ʂ
   '30/5&/%$0/'&3&/$&
   

   View Slide

2. ϞϯΩʔϨϯν
   ΩλδϚλΧγ !JOD
   
   ϑϦʔϥϯε

   8FCσβΠφʔϓϩάϥϚʔ
   ௕࡚
   8PSE1SFTTϓϥάΠϯ

   .881'PSNɺ4NBSU$VTUPN'JFMET
   8PSE1SFTTςʔϚ

   )BCBLJSJɺ.JNJ[VLV
   4BTT4UZMVT$44ϑϨʔϜϫʔΫ

   #BTJT
   

   View Slide

3. ᶃ $44ϑϨʔϜϫʔΫͷํ޲ੑΛ͖ΊΔ
   ᶄ ࢖༻͢ΔϝλݴޠΛ͖ΊΔ
   ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
   ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔໰୊
   ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
   

   View Slide

4. ᶃ $44ϑϨʔϜϫʔΫͷํ޲ੑΛ͖ΊΔ
   ᶄ ࢖༻͢ΔϝλݴޠΛ͖ΊΔ
   ᶅ $44ઃܭ໋໊نଇΛ͖ΊΔ
   ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔໰୊
   ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
   

   View Slide

5. ᶃ $44ϑϨʔϜϫʔΫΛͭ͘Δʹ͍ͨͬͨܦҢ
   ᶄ $44ϑϨʔϜϫʔΫΛͭ͘Δ͜ͱʹΑͬͯ

   ղܾ͔ͨͬͨ͜͠ͱ
   ᶅ Ͳ͏͍͏ରࡦΛ͔ͨ͠
   ᶆ $44ϑϨʔϜϫʔΫΛͭͬͨ͘͜ͱʹΑͬͯ

   Ͳ͏ͳ͔ͬͨ
   

   View Slide

6. $44ϑϨʔϜϫʔΫΛ
   ͭ͘Δʹ͍ͨͬͨܦҢ
   

   View Slide

7. View Slide

8. ɾશ͘ಉ͡෦෼
   ɾগ͠ҧ͏͚Ͳ΄ͱΜͲಉ͡෦෼
   ɾσβΠϯ͸શવҧ͏͚Ͳେ࿮ͱͯ͠͸ࣅ͍ͯΔ෦෼
   ͦͷΑ͏ͳ෦෼Λநग़ͯ͠࢖͍·ΘͤΔΑ͏ʹ൚༻Խ
   $44ϑϨʔϜϫʔΫ
   

   View Slide

9. View Slide

10. View Slide

11. $44ϑϨʔϜϫʔΫΛͭ͘Δ
    ͜ͱʹΑͬͯղܾ͔ͨͬͨ͜͠ͱ
    

    View Slide

12. ্ॻ͖ͭΒ͍໰୊
    

    View Slide

13. ࣗ෼ͷχʔζʹϚονͨ͠
    $44ϑϨʔϜϫʔΫΛͭ͘Γ͍ͨ
    

    View Slide

14. 8FC੍࡞ձࣾ
    γεςϜձࣾ
    σβΠφʔ
    ϓϩάϥϚʔ
    ͞·͟·ͳ
    σβΠϯςΠετ
    ίϯϙʔωϯτ
    දݱ
    ίʔσΟϯά
    ͲͷαΠτʹ΋ʮϘλϯʯ͸͋Δ͚Ͳ
    ܗ΋ςΠετ΋શવ͕ͪ͏ͳ
    σϑΥϧτͷ૷০͕͋ͬͯ΋ͦͷ··
    ࢖͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
    

    View Slide

15. 8FC੍࡞ձࣾ
    γεςϜձࣾ
    σβΠφʔ
    ϓϩάϥϚʔ
    ͞·͟·ͳ
    σβΠϯςΠετ
    ίϯϙʔωϯτ
    දݱ
    ίʔσΟϯά
    ૷০͕ͳ͍ࠎ૊Έ͚ͩͷ$44ϑϨʔϜϫʔΫ͕΄͍͠
    

    View Slide

16. View Slide

17. ετϨεΛײ͍ͯͨ͜͡ͱ
    ্ॻ͖ͭΒ͍໰୊
    14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ
    qPBUϕʔεάϦουͲ͏ʹ͔ͳΒΜ͔໰୊
    ʮ*&ɾͰ΋͋Δఔ౓ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊
    ෼ׂάϦου͚ͩͰ͸ʜ໰୊
    

    View Slide

18. Ͳ͏͍͏ରࡦΛ͔ͨ͠
    

    View Slide

19. ্ॻ͖ͭΒ͍໰୊
    ղܾ͍ͨ͜͠ͱ
    

    View Slide

20. View Slide

21. View Slide

22. ίϯϙʔωϯτͷجຊઃܭ
    w ࢖͍΋͠ͳ͍৭ͷόϦΤʔγϣϯ͸ͳ͠
    w ϗόʔ࣌ͷελΠϧ΋ͳ͠
    w ϑΥϯταΠζͳͲίϯϙʔωϯτ͕੒ཱ͢ΔͨΊʹ
    ͳͯ͘΋େৎ෉ͳ΋ͷ΋ະࢦఆ
    

    View Slide

23. ·ͩ଍Γͳ͍ʜ
    

    View Slide

24. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯΔ৔߹
    #BTJTͷσϑΥϧτͷϘλϯ
    ্ॻ͖ͯͦ͠ͷαΠτͷ
    σϑΥϧτͷϘλϯσβΠϯʹ
    ಠࣗʹ֦ு
    ಠࣗʹ֦ு
    @DCUO
    @DCUO
    @DCUOGPP @DCUOCBS
    

    View Slide

25. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ
    #BTJTͷσϑΥϧτͷϘλϯ
    ͲΕ͕σϑΥϧτͳΜͩʜ
    @DCUO
    ΋͸΍NPEJpFSͰ͸ෆՄೳʜ
    

    View Slide

26. αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ
    #BTJTͷσϑΥϧτͷϘλϯ
    ίϯϙʔωϯτΛΘ͚͍ͨ
    @DCUO
    DQSJNBSZCUO DEBOHFSCUO
    DDBVUJPOCUO
    DTFOECUO
    DMPHJOCUO
    

    View Slide

27. View Slide

28. '-0$44
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    w ຊจϨϕϧ
    ! foundation/ # normalizeɺϕʔεελΠϧɺϛοΫεΠϯ౳
    ! layout/ # ϔομʔɾϑολʔ౳ϨΠΞ΢τ༻ελΠϧ
    " object/ʊ
    ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ
    ! project/ # ϓϩδΣΫτݻ༗ͷελΠϧ
    " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
    

    View Slide

29. #BTJT͸ʜ
    ! core/ # BasisΛߏ੒͢ΔίΞ෦෼
    # ! function/ # ؔ਺
    # ! mixin/ # ϛοΫεΠϯ
    # " abstract/ # ίϯϙʔωϯτΛߏ੒͢ΔϛοΫεΠϯ
    ! foundation/ # normalizeɺϕʔεελΠϧ
    ! layout/ʊ
    " object/ʊ
    ! component/ # ίϯϙʔωϯτ༻ͷελΠϧ
    ! project/ʊ
    " utility/ # ϔϧύʔɾௐ੔༻ελΠϧ
    

    View Slide

30. #BTJTͷ࣋ͭDMBTT͕͍Βͳ͍Ҋ݅ͷ৔߹
    w DPSF͚ͩ!JNQPSU͢Ε͹ϕʔεͷελΠϧ΋ίϯϙʔω
    ϯτͷελΠϧ΋Ұ੾ు͖ग़͞Εͣແବ͕গͳ͍
    w BCTUSBDUϨΠϠʔͷNJYJOΛ۩৅Խͯ͠ඞཁͳίʔυΛ
    ෇͚଍͢ܗʹ͢Ε͹ΦϦδφϧͷίϯϙʔωϯτΛͭ
    ͘Δͷ΋؆୯
    

    View Slide

31. BCTUSBDUͷ۩৅Խ
    .my-btn {
    @include _btn((
    border: null,
    ));
    &--primary { … }
    &--secondary { … }
    &--block { … }
    }
    

    View Slide

32. BCTUSBDUͷ۩৅Խ
    .c-send-btn {
    @include _btn();
    …
    }
    .c-caution-btn {
    @include _btn();
    …
    }
    .c-login-btn {
    @include _btn();
    …
    }
    

    View Slide

33. 14%Ͱʮ༨നαΠζΛ͸͔Δʯ
    ͱ͍͏࡞ۀ
    ղܾ͍ͨ͜͠ͱ
    

    View Slide

34. View Slide

35. View Slide

36. MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH
    IBMGMFBEJOH
    

    View Slide

37. 14%Ͱʮ༨നαΠζΛ͸͔Δʯͱ͍͏࡞ۀ
    w ਖ਼֬ʹ͸͔ΔͨΊʹ͸GPOUTJ[FͱMJOFIFJHIU͔Βߦؒ
    ͕ԿQYʹͳΔ͔ܭࢉ͠ɺ
    w ͦͷߦؒ෼ΛҾ͍ͯ༨നαΠζΛಋ͖ग़͞ͳ͚Ε͹ͳ
    Βͳ͍
    w MJOFIFJHIUࣗମ΋૬ର஋Ͱॻͨ͘Ίʹ͸ܭࢉͯ͠ಋ͖ͩ
    ͞ͳ͚Ε͹ͳΒͳ͍ͷͰΊΜͲ͍͘͞
    w ͦͯͦ͠ΕΒͷ࡞ۀΛશՕॴͰ΍Βͳ͍ͱ͍͚ͳ͍
    

    View Slide

38. MJOFIFJHIU΋༨ന΋উखʹ
    ྑ͍ײ͡ʹͳͬͯ΄͍͠
    

    View Slide

39. View Slide

40. w ҰݴͰ͍͏ͱMJOFIFJHIUͱ༨നͷαΠζΛ౷Ұ͠ɺഒ
    ਺Ͱ஋Λઃఆ͍ͯ͘͜͠ͱͰόϥϯεΛ੔͑Δ
    w ྫ͑͹QYɺQYɺQYɺQYͷΑ͏ͳ۠੾Γ
    w ͦΕʹ͋ΘͤͯจࣈαΠζ΋ഒ਺Ͱઃఆ
    w ͨͩɺ೔ຊޠͩͱจࣈ͕େ͖͘ͳΓ͗ͨ͢Γɺͦ΋ͦ
    ΋ͦΜͳσβΠϯ͕͍ͭ΋͘Δͱ͸ݶΒͳ͍
    

    View Slide

41. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ
    @function _vertical-rhythm($font-size, $coefficient: 1) {
    $between-lines : _strip-unit(_rem2px($_between-lines));
    $base-line-height: _strip-unit(_rem2px($_base-line-height));
    $base-font-size : _strip-unit(_rem2px($_base-font-size));
    $font-size : _strip-unit($font-size);
    $line-height: $font-size + ($between-lines * $coefficient);
    @if ($line-height < $font-size + ($between-lines * 2)) {
    @return _vertical-rhythm($font-size, ($coefficient + 1));
    } @else {
    @if ($font-size % $base-font-size == 0 and $font-size > $base-font-size) {
    @return $line-height - ($between-lines / 2);
    }
    @return $line-height;
    }
    }
    

    View Slide

42. จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ
    /* margin */
    @include _margin-bottom(1);
    /* padding */
    @include _padding(.5);
    /* จࣈαΠζͱͦΕʹԠͨ͡࠷దͳline-height */
    @include _font-size-line-height(16px);
    

    View Slide

43. ͍΍͍΍ɺ݁ہ͸͔Βͳ͍ΜͩͬͨΒ
    ҧ͏஋ʹͳͬͯͳ͍ʜʁ
    

    View Slide

44. qPBUϕʔεάϦου

    Ͳ͏ʹ͔ͳΒΜ͔໰୊
    ղܾ͍ͨ͜͠ͱ
    

    View Slide

45. View Slide

46. View Slide

47. 'MFYJCMFCPYMBZPVU.PEVMF
    

    View Slide

48. 'MFYJCMF#PY-BZPVU.PEVMF
    w ͍ΘΏΔqFYCPY
    w DMFBSෆཁ
    w ্෇͖ɺதԝἧ͑ɺԼ෇͖ɺࠨӈۉ౳ׂ෇ɺࢠཁૉͷ
    ߴ͞౷ҰͳͲɺॊೈͳϨΠΞ΢τ͕ɺ؆୯ͳϓϩύςΟ
    ͷ૊Έ߹ΘͤͰՄೳ
    

    View Slide

49. ʮ*&ɾͰ΋͋Δఔ౓

    ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊
    ղܾ͍ͨ͜͠ͱ
    

    View Slide

50. View Slide

51. 'MFYJCMF#PY-BZPVU.PEVMF
    w *&͸BVUPQSFpYFSΛ࢖͑͹ͦΕͳΓʹ͔ͭ͑Δ
    w *&ҎԼ͸׬શʹະରԠͳͷͰqFYCPY͸શ͔ͭ͑͘ͳ͍
    

    View Slide

52. *&ɻɻɻ
    

    View Slide

53. ίϯσΟγϣφϧίϝϯτ
    EJTQMBZJOMJOFCPY UBCMF
    ✕
    

    View Slide

54. ίϯσΟγϣφϧίϝϯτͰ*&༻$44ΛಡΈࠐΉ
    
    

    View Slide

55. EJTQMBZJOMJOFCMPDL UBCMFͰ্ॻ͖
    w EJTQMBZqFYͷࢦఆΛ*&ҎԼͰ͸EJTQMBZJOMJOFCPY UBCMF
    Ͱ্ॻ͖
    w தԝἧ͑ɺԼἧ͑ɺࠨӈۉ౳ׂ෇ɺٯॱͷϨΠΞ΢τͳͲ
    ͸EJTQMBZJOMJOFCMPDLͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ
    w ࢠཁૉͷߴ͞ἧ͑ɺΧϥϜαΠζͷࣗಈۉҰԽͳͲ͸
    EJTQMBZUBCMFͰ্ॻ͖ͤ͞Δ͜ͱͰରԠ
    w qFYCPYͷશͯΛ࠶ݱ͢Δ͜ͱ͸Ͱ͖ͳ͍͕ɺରԠՄೳൣғ
    ΛΘ্͔ͬͨͰ࢖͑͹͋Δఔ౓࠶ݱͰ͖Δ
    

    View Slide

56. ෼ׂάϦου͚ͩͰ͸ʜ໰୊
    ղܾ͍ͨ͜͠ͱ
    

    View Slide

57. w ࣮૷ଆ͕ޮ཰ԽͷͨΊʹ#PPUTUSBQΛউखʹ࢖͍ͬͯΔ
    ͱσβΠφʔ͞Μ͕άϦουγεςϜΛҙࣝͤͣʹσβ
    Πϯ͍ͯ͠Δ͜ͱ͸ී௨ʹ͋Γ͑Δ
    w ΋͠ҙࣝͯ͠΋Β͍ͬͯͨͱͯ͠΋ίϯςϯπʹΑͬͯ
    ͸ʮ͚ͦͩ͜͸ΧϥϜʹ͍ͨ͠ʯΈ͍ͨͳ͜ͱ͸͋Γ
    ͑Δ
    w ࣮຿తʹ͸άϦουͷ฼਺ʢ#PPUTUSBQͳΒʣ͕ݻఆ
    ͞Ε͍ͯͳ͍΄͏͕Ԡ༻͕͖͖΍͍͢
    

    View Slide

58. ฼਺͕ՄมͳάϦουγεςϜΛ
    ͭ͘Ε͹͑͑΍Μ
    

    View Slide

59. #BTJTͷάϦουγεςϜ
    
    
    
    
    

    View Slide

60. #BTJTͷάϦουγεςϜ
    
    
    
    
    ࣮ࡍͷαΠζΧϥϜαΠζʸߦ͋ͨΓͷΧϥϜ਺
    ͜ͷྫͷ৔߹ͩͱɺ
    

    View Slide

61. #BTJTΛ࢖ͬͨ͜ͱʹΑͬͯ
    Ͳ͏ͳ͔ͬͨ
    

    View Slide

62. w $44ϑϨʔϜϫʔΫ͸ͦͷαΠτ͚ͩ͸ͳ͘৭ʑͳαΠ
    τͰ࢖͍·Θ͢΋ͷͳͷͰɺͲ͏ઃܭ͢Ε͹൚༻తʹ
    ࢖͍·ΘͤΔΑ͏ʹͳΔͷ͔Λڧ͘ҙࣝ͢ΔΑ͏ʹͳͬ
    ͨ
    w ͦ͏͍͏ҙࣝ෇͚͕͞Εͨ͜ͱͰ$44ϑϨʔϜϫʔΫ֎
    ͷ$44Λॻ͘ͱ͖ͷޮ཰΋ྑ͘ͳͬͨ
    w 4BTTΛωετ͙Β͍ʹ͔͠࢖͍ͬͯͳ͔͚ͬͨͲɺม
    ਺΍NJYJOΛͲ͏࢖͑͹΋ͬͱޮ཰తʹͳΔͷ͔΋ҙࣝ
    Ͱ͖ΔΑ͏ʹͳͬͨ
    

    View Slide

63. ίʔσΟϯά࡞ۀ͕
    ָ͘͠ͳͬͨ
    

    View Slide

64. ·ͱΊ
    w طଘͷ$44ϑϨʔϜϫʔΫʹͬ͘͠Γ͖͍ͯͳ͍ͷͰ͋Ε͹ɺͲ͏
    ͍͏ͱ͜Ζʹͬ͘͠Γ͖͍ͯͳ͍ͷ͔ɺͦΕΛղܾ͢Δʹ͸Ͳ͏͠
    ͨΒྑ͍ͷ͔Λ੔ཧͯ͠ɺࣗ෼ʹͽͬͨΓ͸·ΔΦϦδφϧͷ$44
    ϑϨʔϜϫʔΫΛͭͬͯ͘Έ·͠ΐ͏
    w ࠓճ͓࿩ͨ͠ࢪࡦ͸͋͘·Ͱ๻ͷχʔζɾϫʔΫϑϩʔʹ࠷దԽ͞
    Εͨ΋ͷͰ͢
    w ࠷దղ͸Έͳ͞ΜͷχʔζɾϫʔΫϑϩʔʹΑͬͯมΘΔ͸ͣͰ͢
    w ͭͬͨ͘Βͥͻ(JU)VCͰެ։ͯ͠஌ݟΛγΣΞ͍ͯͩ͘͠͞ɻε
    λʔ͚ͭ·͢
    

    View Slide