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.1k
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
django-import-export で マスターデータ管理生活
dkonishi
0
190
Kansai WordPress Meetup@京都 近況とこれから
dkonishi
0
81
大阪Pythonの会の紹介@Python Kansai #01
dkonishi
1
140
Netlify Functions 叩き初め
dkonishi
0
140
Gatsby.jsでWordPressのフロントエンドを作る
dkonishi
0
270
AWS LambdaからSlackに ○○を送る
dkonishi
0
1.1k
Bench京都怖くない
dkonishi
0
150
WordBench京都への関わりと何を得たか
dkonishi
0
120
最近やったCSSの設計と やってみて感じたこと
dkonishi
0
160
Other Decks in Programming
See All in Programming
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.2k
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
210
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
2.9k
Parallel Socket Communication in Swift
s_shimotori
0
200
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
TDDと今まで
kanayannet
0
140
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
370
LPIXEL×CADDi_kaerururu
kaerururu
3
300
object-oriented-conference-2024
fuwasegu
6
1.4k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
kosui
3
810
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
28
12k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Statistics for Hackers
jakevdp
789
220k
Designing for humans not robots
tammielis
247
25k
4 Signs Your Business is Dying
shpigford
174
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
A Philosophy of Restraint
colly
195
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
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 ηϨΫλগͳ͍ํ͕ཧ͍͢͠