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のidとclassの使い分け
Search
Daisuke Konishi
April 16, 2017
Programming
0
1.3k
CSSのidとclassの使い分け
CSSフレンズ 第一回「CSS再入門」
https://cssfriends.connpass.com/event/52444/
Daisuke Konishi
April 16, 2017
Tweet
Share
More Decks by Daisuke Konishi
See All by Daisuke Konishi
複数ソースから集めて作る自分サイト
dkonishi
0
97
django-import-export で マスターデータ管理生活
dkonishi
0
260
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
140
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
180
Netlify Functions 叩き初め
dkonishi
0
240
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
160
Other Decks in Programming
See All in Programming
Is Xcode slowly dying out in 2025?
uetyo
1
280
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
テスト駆動Kaggle
isax1015
0
300
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
30k
PicoRuby on Rails
makicamel
2
130
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
A designer walks into a library…
pauljervisheath
207
24k
How STYLIGHT went responsive
nonsquared
100
5.6k
Music & Morning Musume
bryan
46
6.6k
A better future with KSS
kneath
238
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Transcript
$44ͷJEͱDMBTTͷ͍͚ %BJTVLF,0/*4)* ୈҰճʮ$44࠶ೖʯ
Daisuke KONISHI !TLE@OX ϚʔΫΞοϓΤϯδχΞ
None
$44ͷJEͱDMBTTͷ͍͚ %BJTVLF,0/*4)* ୈҰճʮ$44࠶ೖʯ
$44ॻ͍ͯ·͢ΑͶʁ .title { font-weight: 600; font-size: 24px; } .container {
width: 1024px; margin-left: auto; margin-right: auto; } ηϨΫλ
$44ͷࢦఆ
Q. JEͱDMBTTͷ ͲͪΒΛ͏͖͔
A. جຊDMBTT͚ͩͰ0,
1. ͍·Θ͍͢͠
#page-top .title { font-weight: 500; font-size: 24px; } #page-about .title
{ font-weight: 500; font-size: 24px; } .title { font-weight: 500; font-size: 24px; } #FUUFS
DMBTT໊͔Γ͍͢ ໊લΛ͚Α͏
ϲ݄ޙͷ͋ͳ͕ͨٽ͔͘ .topContentHeaderLink { text-align: right; text-decoration: none; } .box1 {
… } .box2 { … }
ະདྷͷ͋ͳ͕ͨͪΐͬͱসإ .link-more { text-align: right; text-decoration: none; } .main-contents {
… } .category-box { … }
2. ελΠϧͷ্ॻ͖͕ ͍͢͠
.header h1 { … } .header .title { … }
.title { … } <header class=“header” id=“header”> <h1 class=“title”>タイトル</h1> </header>
$44ʹৄࡉ͕͋Δ
ϙΠϯτͰදݱ͞ΕΔࣄ͕ଟ͍ IUUQRJJUBDPNPI@SVTUZ@OBJMJUFNTFDEFDB
ͨͱ͑͜͏ #header { … } /* 100点 */ .title {
… } /* 10点 */ .list li a { … } /* 12点 */
্ॻ͖͢ΔʹͦΕҎ্ͷ͕ඞཁ .header h1 { … } /* 11点 */ .header
.title { … } /* 20点 */ ◯ .title { … } /* 10点 */ ☓ <header class=“header”> <h1 class=“title”>タイトル</h1> </header>
ͭ·Γʜ w ηϨΫλ͕ଟ͍ɾৄࡉͷߴ͍ͷ͕ ͋Δͱ্ॻ͖͕େม w DMBTTͷΈͷํ͕ߟ͍͑͢
ηϨΫλΛগͳ͘͢Δʹ w ઃܭΛษڧ͢Δ 00$44 '-0$44 #PPUTUSBQͳͲ w ໋໊نଇͰઓ͏ #&.
Q. ͡Ό͋JEʁ
A. w ϖʔδભҠ͢Δͱ͖ͷҹ w +BWB4DSJQUͰૢ࡞͢Δͱ͖ͷҹ
·ͱΊ w ελΠϧͷࢦఆDMBTTͰߦ͓͏ w DMBTTͷΈͷํ্͕ॻ͖͍͢͠ w ηϨΫλগͳ͍ํ͕ཧ͍͢͠