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
270
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
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
510
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
710
マンガアプリViewerの大画面対応を考える
kk__777
0
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
210
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
630
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
NIKKEI Tech Talk#38
cipepser
0
190
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Done Done
chrislema
185
16k
Optimizing for Happiness
mojombo
379
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Facilitating Awesome Meetings
lara
57
6.6k
Become a Pro
speakerdeck
PRO
29
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Visualization
eitanlees
149
16k
Producing Creativity
orderedlist
PRO
347
40k
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 ηϨΫλগͳ͍ํ͕ཧ͍͢͠