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

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

ϞϯΩʔϨϯν ΩλδϚλΧγ !JOD ϑϦʔϥϯε  8FCσβΠφʔϓϩάϥϚʔ ௕࡚
8PSE1SFTTϓϥάΠϯ  .881'PSNɺ4NBSU$VTUPN'JFMET 8PSE1SFTTςʔϚ  )BCBLJSJɺ.JNJ[VLV 4BTT4UZMVT$44ϑϨʔϜϫʔΫ  #BTJT

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

ᶃ $44ϑϨʔϜϫʔΫΛͭ͘Δʹ͍ͨͬͨܦҢ ᶄ $44ϑϨʔϜϫʔΫΛͭ͘Δ͜ͱʹΑͬͯ  ղܾ͔ͨͬͨ͜͠ͱ ᶅ Ͳ͏͍͏ରࡦΛ͔ͨ͠ ᶆ $44ϑϨʔϜϫʔΫΛͭͬͨ͘͜ͱʹΑͬͯ  Ͳ͏ͳ͔ͬͨ

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

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

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

্ॻ͖ͭΒ͍໰୊

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

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

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

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

Ͳ͏͍͏ରࡦΛ͔ͨ͠

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

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

·ͩ଍Γͳ͍ʜ

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

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

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

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

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

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

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

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

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

MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH IBMGMFBEJOH

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

MJOFIFJHIU΋༨ന΋উखʹ ྑ͍ײ͡ʹͳͬͯ΄͍͠

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

จࣈαΠζΛج४ʹউखʹܭࢉͤ͞Δʂ @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; } }

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

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

qPBUϕʔεάϦου  Ͳ͏ʹ͔ͳΒΜ͔໰୊ ղܾ͍ͨ͜͠ͱ

'MFYJCMFCPYMBZPVU.PEVMF

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

ʮ*&ɾͰ΋͋Δఔ౓  ϨΠΞ΢τͨ΋ͬͯͶʙʯ໰୊ ղܾ͍ͨ͜͠ͱ

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

*&ɻɻɻ

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

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

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

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

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

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

#BTJTͷάϦουγεςϜ <div class=“_c-row”> <div class=“_c-row__col _c-row__col--1-4”> </div> </div>

#BTJTͷάϦουγεςϜ <div class=“_c-row”> <div class=“_c-row__col _c-row__col--1-4”> </div> </div> ࣮ࡍͷαΠζΧϥϜαΠζʸߦ͋ͨΓͷΧϥϜ਺ ͜ͷྫͷ৔߹ͩͱɺ

#BTJTΛ࢖ͬͨ͜ͱʹΑͬͯ Ͳ͏ͳ͔ͬͨ

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

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

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

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

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

More Decks by Takashi Kitajima

Other Decks in Programming

Featured

Transcript