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.3k
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
98
Snow Monkey CM
inc2734
0
61
メンテナンス性を考慮した CSS 設計
inc2734
0
280
Snow Monkey とは
inc2734
0
1k
WordPress_テーマのつくりかた.pdf
inc2734
4
470
受託開発者だった僕が WordPress の有料テーマ開発者になって学んだこと
inc2734
1
890
Snow Monkey(WordPress) による web コンテンツ制作の新しいカタチ【ビジネスパーソン向け】
inc2734
0
70
Snow Monkey とコミュニティ
inc2734
0
560
Snow Monkey における私の技術的偏愛
inc2734
0
520
Other Decks in Programming
See All in Programming
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.7k
Golang と Erlang
taiyow
8
1.9k
Realtime API 入門
riofujimon
0
120
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
110
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
qmuntal/stateless のススメ
sgash708
0
120
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
620
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
270
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
910
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
800
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Done Done
chrislema
181
16k
Navigating Team Friction
lara
183
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Speed Design
sergeychernyshev
24
570
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Ͱެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢