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
110
django-import-export で マスターデータ管理生活
dkonishi
0
260
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
160
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
190
Netlify Functions 叩き初め
dkonishi
0
250
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
300
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.3k
Bench京都怖くない
dkonishi
0
220
WordBench京都への関わりと何を得たか
dkonishi
0
170
Other Decks in Programming
See All in Programming
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
490
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
210
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
2
360
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
970
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
370
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
900
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
開発生産性を上げるための生成AI活用術
starfish719
1
150
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
360
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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 ηϨΫλগͳ͍ํ͕ཧ͍͢͠