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
99
Snow Monkey CM
inc2734
0
62
メンテナンス性を考慮した CSS 設計
inc2734
0
280
Snow Monkey とは
inc2734
0
1k
WordPress_テーマのつくりかた.pdf
inc2734
4
470
受託開発者だった僕が WordPress の有料テーマ開発者になって学んだこと
inc2734
1
900
Snow Monkey(WordPress) による web コンテンツ制作の新しいカタチ【ビジネスパーソン向け】
inc2734
0
71
Snow Monkey とコミュニティ
inc2734
0
560
Snow Monkey における私の技術的偏愛
inc2734
0
520
Other Decks in Programming
See All in Programming
Quine, Polyglot, 良いコード
qnighy
4
650
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
260
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
イベント駆動で成長して委員会
happymana
1
340
Functional Event Sourcing using Sekiban
tomohisa
0
100
デザインパターンで理解するLLMエージェントの作り方 / How to develop an LLM agent using agentic design patterns
rkaga
3
230
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
受け取る人から提供する人になるということ
little_rubyist
0
250
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
3
350
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Designing for Performance
lara
604
68k
Faster Mobile Websites
deanohume
305
30k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Facilitating Awesome Meetings
lara
50
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Documentation Writing (for coders)
carmenintech
65
4.4k
Speed Design
sergeychernyshev
25
620
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Code Review Best Practice
trishagee
64
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
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Ͱެ։ͯ͠ݟΛγΣΞ͍ͯͩ͘͠͞ɻε λʔ͚ͭ·͢