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

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

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

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

Takashi Kitajima

March 18, 2017
Tweet

More Decks by Takashi Kitajima

Other Decks in Programming

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