グループ化する

目次

• インライン要素のグループ化
• ブロックレベル要素のグループ化

インライン要素のグループ化

文章の中で強調したい箇所があったら、そこを<em>〜</em>で囲めばいいんでしたね。では、「ここは日付だよ」と示したい場合はどうでしょうか。強調するならem要素、でも日付の場合は…ちょうどいい要素がありません。そんなときに活躍するのがspan要素です。

<p>更新日時 <span class="date">2005-09-13</span></p>

spanタグの中でclass属性を使ってclass="date"とすることで、<span class="date">〜</span>で囲まれた部分が日付(date)であると示すことができます。電話番号だと示したいなら<span class="telephone">〜</span>、メールアドレスだと示したいなら<span class="mail">〜</span>などとすればいいわけです。

ただし、span要素を使っただけでは見た目は何も変わりません。普通はCSSと組み合わせて使います。

.date { font-style: italic; }

<p>更新日時 <span class="date">2005-09-13</span></p>

CSSを使って.dateクラスの文字を斜体にしました。

このように、適当なインライン要素がないときにトランプのジョーカーのように使えるのがspan要素です。span要素はインライン要素です。

ブロックレベル要素のグループ化

span要素とよく似た要素にdiv要素があります。例を見てください。

<h2>見出しをつける</h2>
<p>見出しをつけるにはhn要素を使います。…</p>
<h2>段落に分ける</h2>
<p>段落をあらわす要素はp要素です。…</p>

見出し(h2要素)と段落(p要素)で一つの記事になっていますね。そこで、見出しと段落をまとめてタグでくくって「ここからここまでが一つのの記事ですよ」と示してあげたいです。ところが、「記事」をあらわすための要素はやっぱり存在しません。そこで今度は、div要素を使います。

<div class="article">
  <h2>見出しをつける</h2>
  <p>見出しをつけるにはhn要素を使います。…</p>
</div>
<div class="article">
  <h2>段落に分ける</h2>
  <p>段落をあらわす要素はp要素です。…</p>
</div>

それぞれの記事を<div class="article">〜</div>で囲んでいます。こうすると、囲まれた部分が記事(article)だとわかります。このように、div要素は複数のブロックレベル要素をグループとしてまとめるのに使います。

このdiv要素もよくCSSとセットで使います。CSSでarticleクラスの背景色をベージュに指定しています。

.article { background-color: #ffe4c4; } 

<div class="article">
  <h2>見出しをつける</h2>
  <p>見出しをつけるにはhn要素を使います。…</p>
</div>
<div class="article">
  <h2>段落に分ける</h2>
  <p>段落をあらわす要素はp要素です。…</p>
</div>

こうするとそれぞれの記事の背景がベージュになり、グループに分かれていることがよりはっきりします。

まとめ

• 適当なインライン要素がない場合はspan要素を使う
• ブロックレベル要素をグループに分けるにはdiv要素を使う

これでHTML第2部が終了です。ここまで来るとかなり実践的なHTMLが書けると思います。

Information