前回まで見てきた非推奨要素・属性のほか、XHTML 1.0 TransitionalとFramesetはもとより、XHTML 1.0 StrictとXHTML 1.1でも、実は見栄えに関する要素・属性がいくつか残されている。これらは非推奨要素・属性と異なり、文書型定義で正式に認められているものの、見栄えに要素・属性であることに変わりはない(いわばグレーゾーンに属する要素・属性である)。今回では、まず「使わないほうがよい要素」について、他の要素・属性やCSSで代替する方法を見ていくことにする。
1. b要素
b要素(太字)は、強調を意味するのであればem要素やstrong要素で代替する。装飾目的であれば、id/classを割り当てたspan要素に対して、CSSのfont-weightプロパティで「bold」を適用して代替する。
[修正後]
<strong>テキスト</strong>
または
span.note {
font-weight: bold;
}
:
:
<span class="note">テキスト</span>
|
2. i要素
i要素(イタリック体)は、強調を意味するのであればem要素やstrong要素で代替する。装飾目的であれば、id/classを割り当てたspan要素に対して、CSSのfont-styleプロパティで「italic」を適用して代替する。
[修正後]
<em>テキスト</em>
または
span.note {
font-style: italic;
}
:
:
<span class="note">テキスト</span>
|
なお、ブラウザではb要素は太字で、i要素はイタリック体で表示される。このような見栄えを目的としたマークアップを「物理マークアップ」と表現することがある(後に説明するbig要素、small要素、tt要素も同様)。一方、意味を与えることを目的としたマークアップを「論理マークアップ」といい、em要素やstrong要素などが該当する。
注意すべきは、多くのブラウザがem要素をイタリック体で、strong要素を太字で表示するからといって、「i要素=em要素」「b要素=strong要素」とは考えてはならないことだ。em要素やstrong要素は、あくまで「(強調という)意味を与える」のであって、どのように表示されるかは別の問題である(em要素がイタリック体で、strong要素が太字で表示されるのは、ほとんどのビジュアルブラウザがそうしているだけのことである)。逆にいえば、b要素やi要素は見栄えを指定するための要素であって、内容にどのような意味を与えるかということとは本来、無関係だ。
3. big要素
big要素(一段階大きいフォント)は、id/classを割り当てたspan要素に対して、CSSのfont-sizeプロパティで「larger」を適用して代替する。
[修正後]
span.largertext {
font-size: larger;
}
:
:
<span class="largertext">テキスト</span>
|
4. small要素
small要素(一段階小さいフォント)は、id/classを割り当てたspan要素に対して、CSSのfont-sizeプロパティで「smaller」を適用して代替する。
[修正前]
<small>テキスト</small>
|
[修正後]
span.smallertext {
font-size: smaller;
}
:
:
<span class="smallertext">テキスト</span>
|
5. tt要素
tt要素(テレタイプ・テキスト、等幅テキスト)は、id/classを割り当てたspan要素に対して、CSSのfont-familyプロパティで「monospace」を適用して代替する。
[修正後]
span.teletype {
font-family: monospace;
}
:
:
<span class="teletype">テキスト</span>
|
使わないほうがよい要素まとめ
最後に、今回説明した「使わないほうがよい要素」の代替方法をまとめておこう。
要素 |
代替方法 |
b要素 |
強調を意味するのであればem要素やstrong要素。 装飾目的であればfont-weightプロパティで「bold」と指定 |
i要素 |
強調を意味するのであればem要素やstrong要素。 装飾目的であればfont-styleプロパティで「italic」と指定 |
big要素 |
font-sizeプロパティで「larger」と指定 |
small要素 |
font-sizeプロパティで「smaller」と指定 |
tt要素 |
font-familyプロパティで「monospace」と指定 |
|