第10回非推奨属性の代替方法（1）

2006.10.13

　XHTML 1.0 StrictやXHTML 1.1ではいくつかの要素・属性が廃止されている。これらは「非推奨要素・属性」と呼ばれ、主に視覚表現に関するものであるため、シンプル＆クリーンなXHTMLのためには使わないほうがよい。今回からは非推奨属性の代替方法を見ていこう。

1. （ほぼすべての要素）lang属性

　lang属性は、xml:lang属性で代替する。ただし、XHTML 1.0では後方互換性を考慮してlang属性とxml:lang属性の両方を指定し、XHTML1.1ではxml:lang属性のみを指定するという違いがある。

[XHTML 1.0 Strict/Transitional/Frameset]
<html xml:lang="ja" lang="ja">

[XHTML 1.1]
<html xml:lang="ja">

2. （a要素）name属性

　a要素のname属性は、id属性で代替する。ただし、XHTML 1.0では後方互換性を考慮してname属性とid属性の両方を指定し、XHTML 1.1ではid属性のみを指定するという点に違いがある。

[XHTML 1.0 Strict/Transitional/Frameset]
<a href="index.html" name="home" id="home">

[XHTML 1.1]
<a href="index.html" id="home">

　a要素にname属性は、ページ内での「断片」（fragment）を意味するものであり、「アンカー名」と呼ばれることもある。専門的にはフラグメント識別子（fragment identifier）と表現する。XHTML 1.0では後方互換性への配慮から、上記のようにname属性とid属性に同じ値を指定し、フラグメント識別子を示すが、必ずしも両方指定しなければならないわけではなく、id属性のみの指定でもよい点に注意しよう。

　なお、次のようにa要素にid属性を指定するのは文法としては間違いではないが、あまり効率的とはいえない。

[XHTML 1.0 Strict/Transitional/Frameset]
<h3><a name="future" id="future">XHTMLの将来</a></h3>


[XHTML 1.1]
<h3><a id="future">XHTMLの将来</a></h3>

　この場合、次のようにh3要素に直接フラグメント識別子を指定したほうがよい（h3要素にはname属性は指定できないので、XHTML 1.0でも1.1でもid属性のみ指定する）。

<h3 id="future">XHTMLの将来</h3>

3. （a、area、base、form要素）target属性

　a、area、base、form要素のtarget属性には代替する方法はない。スクリプトなどを利用して同等の機能を実現することになる。

4. （body要素）text、bgcolor、background属性

　body要素のtext、bgcolor、background属性は、CSSのcolor、background-color、background-imageプロパティで代替する。

[XHTML 1.0 Transitional/Frameset]
<body text="#000000" bgcolor="#ffffff" background="images/bcg_body.gif">

[XHTML 1.0 Strict/1.1]
body {
  color: #000000;
  background-color: #ffffff;
  background-image: url(../images/bcg_body.gif);
  }

5. （body要素）link、vlink、alink属性

　body要素のlink、vlink、alink属性は、a要素に:link、:visited、:active擬似クラスを指定し、colorプロパティを適用して代替する。あわせて、:hover疑似クラスでもcolorプロパティを指定しておくのが一般的である。

[XHTML 1.0 Transitional/Frameset]
<body link="#0000ff" vlink="#800080" alink="#ff0000">

[XHTML 1.0 Strict/1.1]
a:link    { color: #0000ff; }
a:visited { color: #800080; }
a:hover   { color: #ff0000; }
a:active  { color: #ff0000; }

　なお、:link、:visited、:hover、:activeという順序は「ユーザーのカーソル/キーアクションの順番どおり」という意味がある点に注意しよう。CSSでは個別性が同じスタイルについては、後から指定されたものが優先されるというルールがあるため、:hoverや:activeよりも後に:linkや:visitedが指定されていると、カーソルオン時やアクティブ時に:hoverや:activeのスタイルがきちんと適用されない（:linkや:visitedのスタイルが優先されてしまう）という問題が発生するからだ。

6. （br要素）clear属性

　br要素のclear属性は、その機能をそのまま代替する方法は存在しないが、親要素であるブロックレベル要素にCSSのclearプロパティを適用して代替する（インライン要素であるbr要素に直接clearプロパティを指定することはできない）。

[XHTML 1.0 Transitional/Frameset]
<br clear="all" />

[XHTML 1.0 Strict/1.1]
p { clear: both; }

7. （caption要素）align属性

　caption要素のalign属性は、CSSのcaption-sideプロパティで代替する。

[XHTML 1.0 Transitional/Frameset]
<caption align="bottom">

[XHTML 1.0 Strict/1.1]
caption { caption-side: bottom; }

　なお、caption-sizeプロパティでは「top」「bottom」「left」「right」という値が指定できるが、CSS 2.1では「left」「right」が廃止されている点に注意しよう。

　では、次回以降も非推奨属性の代替方法を見ていくことにする。

8. （div、h1～h6、p要素）align属性

　div、h1～h6、p要素のalign属性は、CSSのtext-alignプロパティで代替する。

[XHTML 1.0 Transitional/Frameset]
<h3 align="center">テキスト</h3>

[XHTML 1.0 Strict/1.1]
h3 { text-align: center; }

9. （form、img要素）name属性

　form、img要素のname属性は、id属性で代替する。両要素のname属性は、XHTML 1.0 Tranditional/Framesetでは利用可能であり、後方互換性を考えてid属性と同じ値を指定しておくが、XHTML 1.0 Strict/1.1ではそもそも利用不可であるため、id属性のみを指定する点が異なる（第5回 HTMLからXHTMLへの以降方法（2）「12. name属性とid属性」参照）。

[XHTML 1.0 Transitional/Frameset]
<form action="/cgi-bin/message.cgi"
 method="post" name="message" id="message">

[XHTML 1.0 Strict/1.1]
<form action="/cgi-bin/message.cgi" method="post" id="message">

10. （hr要素）align、noshade、size、width属性

　hr要素のalign、noshade、size、width属性は、CSSのmargin-leftとmargin-right、border、widthプロパティで代替する。なお、noshade属性は「影なし」の指定であり、厳密にはその機能をそのまま代替する方法は存在しないが、borderプロパティを指定することで多くのブラウザで「影なし」で表示される。

[XHTML 1.0 Transitional/Frameset]
<hr align="center" noshade="noshade" size="3" width="80%" />

[XHTML 1.0 Strict/1.1]
hr { 
  margin-right: auto;
  marign-left: auto;
  border: 3px solid gray;
  width: 80%;
  }

益子貴寛（ましこたかひろ）
サイバーガーデン代表（http://www.cybergarden.net/）。Webプロデューサー。早稲田大学大学院商学研究科修了。大学院在学中の1999年5月にWebリファレンス＆リソース提供サイト「CYBER@GARDEN」を立ち上げる。一般企業に就職後もWebデザイン誌での執筆やW3C仕様書の翻訳活動を続け、2003年5月に独立。Webサイトのプロデュース、Web制作会社のコンサルティング活動などに従事。Webデザイン、Web標準、(X)HTML+CSS、Webディレクション、Webライティング、アクセシビリティ、SEO/SEM、XMLアプリケーションに関する執筆・講義など多数。著書に『Web標準の教科書─XHTMLとCSSで作る“正しい”Webサイト』（秀和システム刊）、『伝わるWeb文章デザイン100の鉄則』（同刊）。