PR

 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番目のリストで,当初
<span class="note">テキスト</font>
と記述していましたが,正しくは
<span class="note">テキスト</span>
です。お詫びして訂正します。本文は修正済みです。 [2007/06/27 16:50]