HTML5の新要素にidやclassを設定する理由

Yuuです。

今回は大枠のレイアウト要素の実装に入る前の準備。 後輩に、「何で?」と聞かれた部分なので自分の整理も含めて。

テンプレート

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body id="top">
<!--=====================================================================
  HEADER
======================================================================-->
<header id="header">
</header>
<!--=====================================================================
  MAIN
======================================================================-->
<div id="main">
  <div id="slideShow">
  </div>
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>
<!--=====================================================================
  FOOTER
======================================================================-->
<footer id="footer">
</footer>
</body>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#header{
  width:100%;
}
#main{
  width:100%;
}
#main #slideShow{
  /* slideshow */
}
#main #content{
  width:50%;
  float:left;
}
#main #sidebar{
  width:50%;
  float:right;
}
#footer{
  width:100%;
  crear:both;
}

※実際の実装時は上記プロパティ変更します。

解説

大きく分けると上のような感じになると思います。

ポイントは

1
2
<header id="header">
</header>

に対して、CSSで

1
#header{}

と指定しているところ。

headerという新要素ができたのだから、idやclass振らずにそのままCSSで

1
header{}

これでも有効にはなります

  • HTML5はまだ仕様確定ではないという点。
  • headerという要素はartcle内などでも後々使用するという点。
  • そもそも、わかりやすいようにしている。

などを考慮して、新要素には必ずidなりclassを振るようにしています。 ただし、idをなんでもかんでも振ればいいってわけでもないですし、共通できるスタイルはclassにする感じです。

次は、CSSの中身をやろうかと思いますが、ソースコードが長くなりすぎたので、どうやろうか悩み中。。。

Comments