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.3k
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)
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
6.9k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
940
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
14
9k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
310
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
380
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
500
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
820
Block Editor カスタマイズ入門 #WPmeetupOsaka / Get started customize for block editor
torounit
12
2.9k
本当にだれにでもできる、WordPress をよりよいものにする方法。/ wordcamp tokyo 2019
torounit
2
2.4k
Other Decks in Technology
See All in Technology
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
720
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6.2k
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
270
VS CodeでAWSを操作しよう
smt7174
7
1.6k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.1k
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
504
110k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Faster Mobile Websites
deanohume
299
30k
GraphQLとの向き合い方2022年版
quramy
32
12k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
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