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
130
Snow Monkey CM
inc2734
0
80
メンテナンス性を考慮した CSS 設計
inc2734
0
320
Snow Monkey とは
inc2734
0
1.1k
WordPress_テーマのつくりかた.pdf
inc2734
4
520
受託開発者だった僕が WordPress の有料テーマ開発者になって学んだこと
inc2734
1
970
Snow Monkey(WordPress) による web コンテンツ制作の新しいカタチ【ビジネスパーソン向け】
inc2734
0
90
Snow Monkey とコミュニティ
inc2734
0
600
Snow Monkey における私の技術的偏愛
inc2734
0
560
Other Decks in Programming
See All in Programming
複数アプリケーションを育てていくための共通化戦略
irof
4
960
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
260
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
1
340
イベントストーミングから始めるドメイン駆動設計
jgeem
3
440
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
240
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
100
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
7
6.1k
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
240
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
480
がんばりすぎないコーディングルール運用術
tsukakei
1
180
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
430
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Designing Experiences People Love
moore
142
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Site-Speed That Sticks
csswizardry
7
590
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Speed Design
sergeychernyshev
30
970
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
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Ͱެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢