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)
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
220
Cloudflare Meetup Nagano Vol.3
torounit
1
100
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.6k
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
460
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
570
ブロックエディターで変わる、WordPress でのウェブサイト開発 / SaCSS Special 26
torounit
4
890
Other Decks in Technology
See All in Technology
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
160
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
440
モダンフロントエンド 開発研修
recruitengineers
PRO
5
1.9k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
200
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
230
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
260
制約理論(ToC)入門
recruitengineers
PRO
7
2.5k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
4
820
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
290
知られざるprops命名の慣習 アクション編
uhyo
11
2.7k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
4
800
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
150
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Faster Mobile Websites
deanohume
309
31k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GitHub's CSS Performance
jonrohan
1031
460k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
Navigating Team Friction
lara
189
15k
Documentation Writing (for coders)
carmenintech
73
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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