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
Toro_Unit (Hiroshi Urabe)
August 19, 2016
Technology
6
1.4k
CSS 設計ことはじめ
2016.08.19 イドバタ会議#2 にて発表したスライドです。
Toro_Unit (Hiroshi Urabe)
August 19, 2016
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
Cloudflare Meetup Nagano Vol.3
torounit
1
59
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.4k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.6k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9.9k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
380
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
420
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
550
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
860
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
3.2k
Other Decks in Technology
See All in Technology
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
790
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
260
Охота на косуль у древних
ashapiro
0
120
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
360
MLflowはどのようにLLMOpsの課題を解決するのか
taka_aki
0
110
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
330
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
190
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
300
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
3
350
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
BBQ
matthewcrist
87
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Language of Interfaces
destraynor
156
24k
Scaling GitHub
holman
459
140k
Designing for Performance
lara
605
68k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Site-Speed That Sticks
csswizardry
4
410
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How GitHub (no longer) Works
holman
314
140k
Adopting Sorbet at Scale
ufuk
75
9.2k
Transcript
CSS ઃܭ͜ͱ͡Ί ~ ΧΦεʹͳΔCSSʹզʑਓྨͲ͏ཱ͔͍͚ͬͯͪͬͯྑ͍ͷ͔ ~ Toro_Unit / 2016.8.19 @ΠυόλΧΠΪ Vol.2
2016.8.19 @ΠυόλΧΠΪ Vol.2 1
$ whoami 2016.8.19 @ΠυόλΧΠΪ Vol.2 2
Toro_Unit ෦ ߛ (͏Β ͻΖ͠) Web Designer / Front-end Engineer
/ WordPress Plugin Developer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 3
WordCamp Tokyo ࣮ߦҕһ / εϐʔΧʔͰ͢ 2016.8.19 @ΠυόλΧΠΪ Vol.2 4
WordBench 10/1ʹΔΑʂ ొஃऀ·ͩ·ͩืूதͰ͢!!! http://wbnagano.connpass.com/event/37529/ 2016.8.19 @ΠυόλΧΠΪ Vol.2 5
ͯ͞ຊɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 6
օ͞Μɺ ͜Μͳܦݧ͋Γ·ͤΜ͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 7
• 1Ҏ্લʹೲͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ͑ͯΔCSSɻ • ΄ͱΜͲɺίϐϖίʔυͷڰتཚɻ • ͔͠ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ
2016.8.19 @ΠυόλΧΠΪ Vol.2 8
ʮطଘͷCSSʁಡΊΔ͔ͦΜͳͷʂʯ 2016.8.19 @ΠυόλΧΠΪ Vol.2 9
• ૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... • ͦͯ͠ੜ·ΕΔ important! ͷւɻ •
୭৮Εͳ͍ CSS ͷੜɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 10
2016.8.19 @ΠυόλΧΠΪ Vol.2 11
ผʹ͜Εͬͯɺ͜͜࠷ۙͷ͡Όແ͍ΑͶ ... 2016.8.19 @ΠυόλΧΠΪ Vol.2 12
ਓྨʮCSS͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾ͖ͮ͘ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 13
ͩΕͩΑ!!! HTML/CSS؆୯ͩͱ͔ݴౕͬͨ!!! 2016.8.19 @ΠυόλΧΠΪ Vol.2 14
͔͠͠ɺͲΜͲΜߴԽ͍ͯ͘͠CSSͷཁٻɻ HTML/CSSWEBαΠτҎ֎ͰΘΕΔΑ͏ʹɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 15
͊͞ɺͲ͏͢Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 16
ͦͦͳͥCSSΧΦεʹͳͬͯ͠·͏ΜͩΖ͏ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 17
ͨͱ͑͜ΜͳHTML <h1 class="title">αΠτͷλΠτϧ</h1> <main id="main-contents"> <h1 class="title">ϒϩάͷλΠτϧ</h1> <article class="post"> <header
class="headline"> <h1 class="title">هࣄͷλΠτϧ</h1> </header> </article> </main> 2016.8.19 @ΠυόλΧΠΪ Vol.2 18
CSSͬͯ؆୯! .title { color: red; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 19
CSSͬͯ؆୯! .title { color: red; } .post .title { color:
orange; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 20
CSSͬͯ؆୯????? .title { color: red; } #main-contents .title { color:
green; } .post .title { color: orange; /*্ॻ͖͞ΕΔɻɻɻ*/ } 2016.8.19 @ΠυόλΧΠΪ Vol.2 21
CSSͬͯ؆୯???????????????? .title {} #main-contents .title {} .post .title {} h1.title
{} main#main-contents article .title {} main#main-contents .headline h1 {} main article header h1.title {} main#main-contents .post:first-child h1 {} 2016.8.19 @ΠυόλΧΠΪ Vol.2 22
CSS ւԽͷݪҼͨͪ • ηϨΫλͱ͍͏άϩʔόϧͳมɻ • ࣮ߦ࣌(ͭ·ΓHTMLͷίϯςΩετ)ʹࠨӈ͞Ε·͘Δ • ޙ͔Βഁյతมߋ͕Մೳɻʢͨͩ͠ॻ͖ΘΔ͔Ͳ͏͔η ϨΫλͷڧ͞ʹґଘʣ 2016.8.19
@ΠυόλΧΠΪ Vol.2 23
CSS؆୯ʹॻ͚Δ͚ͲɺʮͪΌΜͱ ͨ͠CSSʯ͍ͬͯ͠ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 24
ͪΌΜͱͨ͠CSSͱʁ • ༧ଌ͍͢͠ • ࠶ར༻͍͢͠ • อक͍͢͠ • ֦ு͍͢͠ CSS
Architecture — Philip Walton ຊޠ༁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 25
CSSϓϩάϥϛϯάͷΑ͏ʹɺ ͪΌΜͱઃܭ͢Δ͜ͱ͕ॏཁɻ ʮͱΓ͋͑ͣσβΠϯ͕࣮ݱͰ͖ΕOKʯଔۀ͠Α͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 26
Ͳ͏Δʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 27
1.ϚʔΫΞοϓʹґଘ͠ͳ͍ 2016.8.19 @ΠυόλΧΠΪ Vol.2 28
ͨͱ͑͜ΜͳHTMLͱCSS <section> <h1 class="title">λΠτϧ</h1> <p>ຊจ</p> </section> section .title { margin:
0 0 0.5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 29
ϖʔδʹΑͬͯɺ<section> ͕ <article> ʹมΘͬͨΒ? .title ͬͯଞͰ͍ͦ͏ͩΑͶʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 30
ͨͱ͑͜͏͢Δɻ <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p> </section> .entry {} .entry__title
{ margin-bottom: .5em; font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 31
2.ηϨΫλͷৄࡉՄೳͳݶΓ࠷খݶͰɻ ͨͱ͑͜ΜͳHTML <div class="main-contents"> <h1>ϖʔδλΠτϧ</h1> <section class="entry"> <h1 class="entry__title">λΠτϧ</h1> <p>ຊจ</p>
</section> </div> 2016.8.19 @ΠυόλΧΠΪ Vol.2 32
.main-contents h1 { margin-bottom: 1em; /*͕ͬͪ͜ద༻͞ΕΔ*/ } .entry {} .entry__title
{ margin-bottom: .5em; font-size: 1.7em; } ͋ͬΕʔʁ͓͔͍͠ͳ͊ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 33
͜͏͢Δ!!! h1 { margin-bottom: 1em; } .entry {} .entry__title {
margin-bottom: .5em; /*͕ͬͪ͜ద༻͞ΕΔ!*/ font-size: 1.7em; } 2016.8.19 @ΠυόλΧΠΪ Vol.2 34
• .main-contents h1 ͱ͔ .main-contents p ͱ͔Γ͕ͪ ͚ͩͲɺͦΕͬͯຊจͷCSSͰ͢ΑͶɻͦΕͬͯͦͷϖʔδ ͷσϑΥϧτCSS͡Όͳ͍ʁ •
HTMLͷهड़ॴ࣍ୈͰ݁Ռ͕มΘΔͷࠞཚͷݩɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 35
3. ίϯϙʔωϯτࢦͳCSS entry.css .entry {} .entry__title {} .entry__title--featured {} .entry__body
{} 2016.8.19 @ΠυόλΧΠΪ Vol.2 36
• ίϯϙʔωϯτ͝ͱʹϑΝΠϧΛׂɻίϯϙʔωϯτͷ ׂΛ͖ͬΓͤ͞Δɻ • ଞͷίϯϙʔωϯτʹ৮Βͳ͍ɻ • CSS ϑΝΠϧ͕͍ͬͺ͍Ͱਏ͍ʁ Sass /
LESS / Stylus / postcss ͋ͨΓΛར༻͢Εྑ͍Μ͡Όແ͍Ͱ͠ΐ͏͔ʁ 2016.8.19 @ΠυόλΧΠΪ Vol.2 37
4.۩ମతͳίϯϙʔωϯτͳͲͷઃܭํ. υΩϡϝϯτΛॻ͍ͯྑ͍Ͱ͕͢ɺͲ͏ͤϝϯςφϯε͠ͳ ͘ͳΔΜͰɺެ։͞Ε͍ͯΔΞʔΩςΫνϟʔͳͲΛऔΓೖΕ Α͏ɻ • OOCSS / SMACSS / BEM
/ SUIT CSS / FLOCSS / ITCSS / ECSS ... • ͱΓ͋͑ͣɺOOCSSɾSMACSSɾBEM ͋ͨΓجຊతͳߟ ͑ํʹͳΔͷͰԡ͓͑ͯ͜͞͏ɻ 2016.8.19 @ΠυόλΧΠΪ Vol.2 38
ৄ͍͠... ʮWeb੍࡞ऀͷͨΊͷCSSઃܭͷڭՊ ॻʯ(ϝϩϯຊ)ʹ͍͍ͩͨશ෦ॻ͍ͯ͋ Γ·͢ʂ ҰՈʹҰ ! 2016.8.19 @ΠυόλΧΠΪ Vol.2 39
• CSSͷઃܭʹۜͷؙͳͲͳ͍ʂ • ઃܭΛߟ͑ͳ͕ΒཧɻৗʹϦϑΝΫλϦϯά͠ͳ͕Β ։ൃ͢Δ͠ɻ • WP-D Week Ͱ CSS
ͷΛ͠·ͨ͠ɻͦͯ͠ CSS ઃܭͱ෦ ͷআʹ͍ͭͯɻ – Toro_Unit 2016.8.19 @ΠυόλΧΠΪ Vol.2 40
ࢀߟࢿྉͳͲ • CSSઃܭͷཧͱݱ࣮ • ͳΜͰCSS͙͢ࢮΜͰ͠·͏Μ 2016.8.19 @ΠυόλΧΠΪ Vol.2 41
Thanks! Speaker Deck: https://speakerdeck.com/torounit Github / @torounit Twitter: @Toro_Unit Facebook:
fb.me/torounit Blog: https://torounit.com 2016.8.19 @ΠυόλΧΠΪ Vol.2 42