CSSのidとclassの使い分け
by
Daisuke Konishi
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
$44ͷJEͱDMBTTͷ͍͚ %BJTVLF,0/*4)* ୈҰճʮ$44࠶ೖʯ
Slide 2
Slide 2 text
Daisuke KONISHI !TLE@OX ϚʔΫΞοϓΤϯδχΞ
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
$44ͷJEͱDMBTTͷ͍͚ %BJTVLF,0/*4)* ୈҰճʮ$44࠶ೖʯ
Slide 5
Slide 5 text
$44ॻ͍ͯ·͢ΑͶʁ .title { font-weight: 600; font-size: 24px; } .container { width: 1024px; margin-left: auto; margin-right: auto; } ηϨΫλ
Slide 6
Slide 6 text
$44ͷࢦఆ
Slide 7
Slide 7 text
Q. JEͱDMBTTͷ ͲͪΒΛ͏͖͔
Slide 8
Slide 8 text
A. جຊDMBTT͚ͩͰ0,
Slide 9
Slide 9 text
1. ͍·Θ͍͢͠
Slide 10
Slide 10 text
#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
Slide 11
Slide 11 text
DMBTT໊͔Γ͍͢ ໊લΛ͚Α͏
Slide 12
Slide 12 text
ϲ݄ޙͷ͋ͳ͕ͨٽ͔͘ .topContentHeaderLink { text-align: right; text-decoration: none; } .box1 { … } .box2 { … }
Slide 13
Slide 13 text
ະདྷͷ͋ͳ͕ͨͪΐͬͱসإ .link-more { text-align: right; text-decoration: none; } .main-contents { … } .category-box { … }
Slide 14
Slide 14 text
2. ελΠϧͷ্ॻ͖͕ ͍͢͠
Slide 15
Slide 15 text
.header h1 { … } .header .title { … } .title { … }
タイトル
Slide 16
Slide 16 text
$44ʹৄࡉ͕͋Δ
Slide 17
Slide 17 text
ϙΠϯτͰදݱ͞ΕΔࣄ͕ଟ͍ IUUQRJJUBDPNPI@SVTUZ@OBJMJUFNTFDEFDB
Slide 18
Slide 18 text
ͨͱ͑͜͏ #header { … } /* 100点 */ .title { … } /* 10点 */ .list li a { … } /* 12点 */
Slide 19
Slide 19 text
্ॻ͖͢ΔʹͦΕҎ্ͷ͕ඞཁ .header h1 { … } /* 11点 */ .header .title { … } /* 20点 */ ◯ .title { … } /* 10点 */ ☓
タイトル
Slide 20
Slide 20 text
ͭ·Γʜ w ηϨΫλ͕ଟ͍ɾৄࡉͷߴ͍ͷ͕ ͋Δͱ্ॻ͖͕େม w DMBTTͷΈͷํ͕ߟ͍͑͢
Slide 21
Slide 21 text
ηϨΫλΛগͳ͘͢Δʹ w ઃܭΛษڧ͢Δ 00$44 '-0$44 #PPUTUSBQͳͲ w ໋໊نଇͰઓ͏ #&.
Slide 22
Slide 22 text
Q. ͡Ό͋JEʁ
Slide 23
Slide 23 text
A. w ϖʔδભҠ͢Δͱ͖ͷҹ w +BWB4DSJQUͰૢ࡞͢Δͱ͖ͷҹ
Slide 24
Slide 24 text
·ͱΊ w ελΠϧͷࢦఆDMBTTͰߦ͓͏ w DMBTTͷΈͷํ্͕ॻ͖͍͢͠ w ηϨΫλগͳ͍ํ͕ཧ͍͢͠