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)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
170
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
230
Cloudflare Meetup Nagano Vol.3
torounit
1
110
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
1.9k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
420
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
470
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
580
Other Decks in Technology
See All in Technology
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
110
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
700
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
130
許しとアジャイル
jnuank
1
140
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
210
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
130
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
430
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
190
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Writing Fast Ruby
sferik
629
62k
Typedesign – Prime Four
hannesfritz
42
2.8k
Producing Creativity
orderedlist
PRO
347
40k
A Tale of Four Properties
chriscoyier
160
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
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