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
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
150
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
300
PipeCDのプラグイン化で目指すところ
warashi
1
210
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
450
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
0
180
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
580
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Statistics for Hackers
jakevdp
799
220k
Writing Fast Ruby
sferik
628
62k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Producing Creativity
orderedlist
PRO
346
40k
KATA
mclloyd
30
14k
The Invisible Side of Design
smashingmag
300
51k
How to Ace a Technical Interview
jacobian
277
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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Ͱެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢