第8回非推奨要素の代替方法（1）

2006.09.29

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

1. applet要素

　applet要素（Javaアプレットの埋め込み）は、object要素で代替する。

[XHTML 1.0 Transitional/Frameset]
<applet code="ImageFader.class" width="200" height="160">
  <param name="imageDir" value="image" />
  <param name="images"
  value="Phot006.jpg|Phot009.jpg|Phot011.jpg" />
  <param name="bgColor" value="e8e8e8" />
</applet>

[XHTML 1.0 Strict/1.1]
<object data="ImageFader.class" width="200" height="160">
  <param name="imageDir" value="image" />
  <param name="images"
  value="Phot006.jpg|Phot009.jpg|Phot011.jpg" />
  <param name="bgColor" value="e8e8e8" />
</object>

　applet要素ではcode属性でクラスファイルを指定するが、object要素ではこのようにdata属性で指定する。

2. basefont要素

　basefont要素（基準フォント）は、その機能をそのまま代替する方法は存在しないが、CSSのcolor、font-size、font-familyプロパティをbody要素に適用するか、ユニバーサルセレクタに適用して代替する。

[XHTML 1.0 Transitional/Frameset]
<basefont color="#000000" size="3" face="Verdana, Arial, sans-serif" />

[XHTML 1.0 Strict/1.1]
body {
  color: #000000;
  font-size: medium;
  font-family: Verdana, Arial, sans-serif;
  }

3. center要素

　center要素（コンテンツのセンタリング）は、その機能をそのまま代替する方法は存在しないが、ブロックレベル要素のボックスについては、CSSのmargin-leftとmargin-rightの両プロパティで「auto」と指定してセンタリングする。また、その内容であるテキストやインライン要素については、親要素のブロックレベル要素にtext-alignプロパティで「center」と指定してセンタリングする。

　このように、CSSでの行揃えのしくみは、ブロックレベル要素のボックス自体の行揃えと、その内容であるテキストやインライン要素の行揃えとで、コントロールするプロパティに違いがある点を押さえておこう。

[XHTML 1.0 Transitional/Frameset]
<center>
  <p>中央揃え</p>
</center>

[XHTML 1.0 Strict/1.1]
p {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  text-align: center
  }
 :
 :
<p>中央揃え</p>

4. dir要素

　dir要素（ディレクトリ型リスト）は、ul要素で代替する。

[XHTML 1.0 Transitional/Frameset]
<dir>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</dir>

[XHTML 1.0 Strict/1.1]
<ul>
  <li>>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

　なお、dir要素はもともと、多くのブラウザでul要素と同じように表示されるため、一般にはあまり使われない要素である。

5. font要素

　font要素（フォント装飾）は、その機能をそのまま代替する方法は存在しないが、CSSのcolor、font-size、font-familyプロパティを、id/classを割り当てたspan要素に適用して代替する。

[XHTML 1.0 Transitional/Frameset]
<font color="#ff0000" size="2" 
face="Verdana, Arial, sans-serif">テキスト</font>

[XHTML 1.0 Strict/1.1]
span.note {
  color: #ff0000;
  font-size: small;
  font-family: Verdana, Arial, sans-serif;
  }
 :
 :
<span class="note">テキスト</span>

6. frame、frameset、noframes要素

　frame、frameset、noframes要素は、XHTML 1.0 Framesetのみで認められているフレームレイアウト向け要素である。XHTML 1.0 Strict/Transitional、1.1ではこれらの要素は認められておらず、代替方法はない。

　なお、フレームレイアウトについては、XFrames（http://www.w3.org/TR/xframes/）という仕様の策定が進められているところであり（現在、W3C草案 2005年10月版）、将来的にはこのXFramesをもとに実現することになるだろう。

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

第7回の補足

　第7回ページ構造を確認する方法について、株式会社ミツエーリンクスの木達一仁氏から、Web Developer Toolbarとともに「X-Ray」や「Professor X」という拡張機能を利用するとよい、というご意見をいただいた。

　X-RayはXHTMLの要素をid/class属性とともにビジュアライズしてくれるツールで、ソースを見るよりも直感的な構造把握が可能だ。Professor Xはブラウザウィンドウの先頭にhead要素内の情報（title要素やmeta要素、link要素、script要素の内容や参照先）を表示してくれるツールである。

　情報を提供してくださった木達氏に記して感謝したい。

・X-Ray
　http://www.designmeme.com/xray/

・Professor X
　http://www.designmeme.com/professorx/

益子貴寛（ましこたかひろ）
サイバーガーデン代表（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の鉄則』（同刊）。

■変更履歴
記事中の「5. font要素」の2番目のリストで，当初