Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSフレームワークをつくろう!
Search
Takashi Kitajima
March 18, 2017
Programming
9
3.4k
CSSフレームワークをつくろう!
フロントエンドカンファレンス 2017 のスライドです。
Takashi Kitajima
March 18, 2017
Tweet
Share
More Decks by Takashi Kitajima
See All by Takashi Kitajima
Snow Monkey&unitone から見た WordPress エディターの変遷
inc2734
0
140
Snow Monkey CM
inc2734
0
83
メンテナンス性を考慮した CSS 設計
inc2734
0
320
Snow Monkey とは
inc2734
0
1.1k
WordPress_テーマのつくりかた.pdf
inc2734
4
530
受託開発者だった僕が WordPress の有料テーマ開発者になって学んだこと
inc2734
1
980
Snow Monkey(WordPress) による web コンテンツ制作の新しいカタチ【ビジネスパーソン向け】
inc2734
0
94
Snow Monkey とコミュニティ
inc2734
0
610
Snow Monkey における私の技術的偏愛
inc2734
0
560
Other Decks in Programming
See All in Programming
Select API from Kotlin Coroutine
jmatsu
1
180
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
1
160
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
120
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
390
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
740
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
820
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
120
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
800
エンジニア向け採用ピッチ資料
inusan
0
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
150
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
We Have a Design System, Now What?
morganepeng
52
7.6k
Fireside Chat
paigeccino
37
3.5k
Adopting Sorbet at Scale
ufuk
77
9.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building an army of robots
kneath
306
45k
Facilitating Awesome Meetings
lara
54
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
KATA
mclloyd
29
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Into the Great Unknown - MozCon
thekraken
39
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Transcript
$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ઃܭ໋໊نଇΛ͖ΊΔ ᶆ +4·ͰΧόʔ͢Δͷ͔͠ͳ͍ͷ͔ ᶇ Ͳ͜·Ͱύοέʔδʹ;͘ΊΔ͔
ᶃ $44ϑϨʔϜϫʔΫΛͭ͘Δʹ͍ͨͬͨܦҢ ᶄ $44ϑϨʔϜϫʔΫΛͭ͘Δ͜ͱʹΑͬͯ ղܾ͔ͨͬͨ͜͠ͱ ᶅ Ͳ͏͍͏ରࡦΛ͔ͨ͠ ᶆ $44ϑϨʔϜϫʔΫΛͭͬͨ͘͜ͱʹΑͬͯ Ͳ͏ͳ͔ͬͨ
$44ϑϨʔϜϫʔΫΛ ͭ͘Δʹ͍ͨͬͨܦҢ
None
ɾશ͘ಉ͡෦ ɾগ͠ҧ͏͚Ͳ΄ͱΜͲಉ͡෦ ɾσβΠϯશવҧ͏͚Ͳେͱͯ͠ࣅ͍ͯΔ෦ ͦͷΑ͏ͳ෦Λநग़͍ͯ͠·ΘͤΔΑ͏ʹ൚༻Խ $44ϑϨʔϜϫʔΫ
None
None
$44ϑϨʔϜϫʔΫΛͭ͘Δ ͜ͱʹΑͬͯղܾ͔ͨͬͨ͜͠ͱ
্ॻ͖ͭΒ͍
ࣗͷχʔζʹϚονͨ͠ $44ϑϨʔϜϫʔΫΛͭ͘Γ͍ͨ
8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ σβΠϯςΠετ ίϯϙʔωϯτ දݱ ίʔσΟϯά ͲͷαΠτʹʮϘλϯʯ͋Δ͚Ͳ
ܗςΠετશવ͕ͪ͏ͳ σϑΥϧτͷ০͕͋ͬͯͦͷ·· ͑Δ͜ͱͳ͍͠ଧͪফ͢ͷετϨεͩͳ͊͊
8FC੍࡞ձࣾ γεςϜձࣾ σβΠφʔ ϓϩάϥϚʔ ͞·͟·ͳ σβΠϯςΠετ ίϯϙʔωϯτ දݱ ίʔσΟϯά ০͕ͳ͍ࠎΈ͚ͩͷ$44ϑϨʔϜϫʔΫ͕΄͍͠
None
ετϨεΛײ͍ͯͨ͜͡ͱ ্ॻ͖ͭΒ͍ 14%Ͱʮ༨നαΠζΛ͔Δʯͱ͍͏࡞ۀ qPBUϕʔεάϦουͲ͏ʹ͔ͳΒΜ͔ ʮ*&ɾͰ͋ΔఔϨΠΞτͨͬͯͶʙʯ
ׂάϦου͚ͩͰʜ
Ͳ͏͍͏ରࡦΛ͔ͨ͠
্ॻ͖ͭΒ͍ ղܾ͍ͨ͜͠ͱ
None
None
ίϯϙʔωϯτͷجຊઃܭ w ͍͠ͳ͍৭ͷόϦΤʔγϣϯͳ͠ w ϗόʔ࣌ͷελΠϧͳ͠ w ϑΥϯταΠζͳͲίϯϙʔωϯτཱ͕͢ΔͨΊʹ ͳͯ͘େৎͳͷະࢦఆ
·ͩΓͳ͍ʜ
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯΔ߹ #BTJTͷσϑΥϧτͷϘλϯ ্ॻ͖ͯͦ͠ͷαΠτͷ σϑΥϧτͷϘλϯσβΠϯʹ ಠࣗʹ֦ு ಠࣗʹ֦ு @DCUO @DCUO @DCUOGPP @DCUOCBS
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ͲΕ͕σϑΥϧτͳΜͩʜ @DCUO NPEJpFSͰෆՄೳʜ
αΠτͷϘλϯσβΠϯ͕౷Ұ͞Ε͍ͯͳ͍ʜ #BTJTͷσϑΥϧτͷϘλϯ ίϯϙʔωϯτΛΘ͚͍ͨ @DCUO DQSJNBSZCUO DEBOHFSCUO DDBVUJPOCUO DTFOECUO DMPHJOCUO
None
'-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%Ͱʮ༨നαΠζΛ͔Δʯ ͱ͍͏࡞ۀ ղܾ͍ͨ͜͠ͱ
None
None
MJOFIFJHIU GPOUTJ[F IBMGMFBEJOH IBMGMFBEJOH
14%Ͱʮ༨നαΠζΛ͔Δʯͱ͍͏࡞ۀ w ਖ਼֬ʹ͔ΔͨΊʹGPOUTJ[FͱMJOFIFJHIU͔Βߦؒ ͕ԿQYʹͳΔ͔ܭࢉ͠ɺ w ͦͷߦؒΛҾ͍ͯ༨നαΠζΛಋ͖ग़͞ͳ͚Εͳ Βͳ͍ w MJOFIFJHIUࣗମ૬ରͰॻͨ͘Ίʹܭࢉͯ͠ಋ͖ͩ ͞ͳ͚ΕͳΒͳ͍ͷͰΊΜͲ͍͘͞
w ͦͯͦ͠ΕΒͷ࡞ۀΛશՕॴͰΒͳ͍ͱ͍͚ͳ͍
MJOFIFJHIU༨നউखʹ ྑ͍ײ͡ʹͳͬͯ΄͍͠
None
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ϕʔεάϦου Ͳ͏ʹ͔ͳΒΜ͔ ղܾ͍ͨ͜͠ͱ
None
None
'MFYJCMFCPYMBZPVU.PEVMF
'MFYJCMF#PY-BZPVU.PEVMF w ͍ΘΏΔqFYCPY w DMFBSෆཁ w ্͖ɺதԝἧ͑ɺԼ͖ɺࠨӈۉׂɺࢠཁૉͷ ߴ͞౷ҰͳͲɺॊೈͳϨΠΞτ͕ɺ؆୯ͳϓϩύςΟ ͷΈ߹ΘͤͰՄೳ
ʮ*&ɾͰ͋Δఔ ϨΠΞτͨͬͯͶʙʯ ղܾ͍ͨ͜͠ͱ
None
'MFYJCMF#PY-BZPVU.PEVMF w *&BVUPQSFpYFSΛ͑ͦΕͳΓʹ͔ͭ͑Δ w *&ҎԼશʹະରԠͳͷͰqFYCPYશ͔ͭ͑͘ͳ͍
*&ɻɻɻ
ίϯσΟγϣφϧίϝϯτ EJTQMBZJOMJOFCPY UBCMF ✕
ίϯσΟγϣφϧίϝϯτͰ*&༻$44ΛಡΈࠐΉ <!--[if lt IE 10]> <link rel="stylesheet" href="node_modules/ sass-basis/dist/css/plugin/basis-ie9/basis- ie9.min.css"
/> <![endif]-->
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Ͱެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢