株式会社antsのホームページへようこそ。

【アリンコWeb標準】XHTMLの使ってよい要素・属性をガイドライン化しよう(2/2)

0
Posted in Lab. By Yuko Tsutsumi

第2回目は、XHTMLの属性に関するガイドラインです。


XHTMLの属性に関するガイドライン

要素には、一般的な属性や要素固有の属性などがあります。

これらの属性のうち、「XHTML1.0 Strict」または「XHTML 1.1」で廃止された要素のことを「非推奨属性」といいます。
またアリンコWeb標準では、“非推奨属性ではないが視覚表現に関する属性でCSSで代替した方がよい属性”を「CSS推奨属性」としました。

将来的に「XHTML 1.0 Strict」や「XHTML 1.1」への移行を視野に入れるなら、非推奨属性は使わず適切な代替方法をとり、視覚表現に関する属性はCSSで代替し、文書構造と視覚表現を完全に分離しておきましょう。

しかし、サイトの仕様によっては、非推奨属性を使うケースがあります。

例えば、「外部リンクは別窓表示、内部リンクは同窓表示にする」仕様の場合、外部リンクのa要素のtarget属性に”_blank”を指定したり、「古いブラウザに対応する」仕様の場合、“a要素のid属性+name属性”(アンカー)、“script要素のtype属性+language属性”など、非推奨属性を併用することがあります。
非推奨要素を「XHTML1.0 Strict」および「XHTML 1.1」で使用すると、動作に問題がなくてもvalidではありません。
そのため非推奨属性を使用する場合は、フレームでないページの場合は「XHTML 1.0 Tranditional」、フレームを使用したページの場合は「XHTML 1.0 Frameset」を採用する必要があります。


XHTMLの非推奨・CSS推奨属性一覧

下記は、XHTMLの「非推奨属性」「CSS推奨属性」をまとめた一覧表です。

「非推奨属性」には適切な代替方法、「CSS推奨属性」にはCSSでの代替方法、DTDごとの注意事項などは補足に掲載しています。
適切な代替方法がない属性は「代替方法なし」となっています。

≪XHTMLの非推奨・CSS推奨属性一覧≫
属性名 説明 代替方法 補足 使用
属性名 説明 代替方法 補足 使用
全要素
lang 言語コード xml:lang属性で代替。 【XHTML 1.0】
lang属性とxml:lang属性を併用。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
【XHTML 1.1】
xml:lang属性のみ。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
非推奨
a要素 (ハイパーテキスト)
name属性 アンカー名 a要素のid属性で代替。 【XHTML 1.0】
古いブラウザ対応のためにname属性とid属性の併用可。<a name="anc" id="anc">
【XHTML 1.1】
id属性のみ。<a id="anc">、<h2 id="anc">
非推奨
target属性 リンク先の開き方 別窓表示(_blank)はJavaScriptで代替。 ※a要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 非推奨
base要素 (文書の基準URL)
target属性 リンク先の開き方 代替方法なし ※base要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 非推奨
body要素 (文書の本文)
alink属性 アクティブ時のリンク色 CSSで代替(a要素のcolorプロパティ) a:active {
 color:red;
}
非推奨
background属性 背景画像 CSSで代替(body要素のbackgroundプロパティ) body {
 background:transparent url("bg.png") repeat top left;
}
非推奨
bgcolor属性 背景色 CSSで代替(body要素のbackground-colorプロパティ) body {
 background-color:#f7f7f7;
}
非推奨
link属性 通常のリンク色 CSSで代替(a:hover擬似クラスのcolorプロパティ) a {
 color:blue;
}
非推奨
text属性 文字色 CSSで代替(body要素のcolorプロパティ) body {
 color:#333;
}
非推奨
vlink属性 訪問済みリンク色 CSSで代替(a:visited擬似クラスのcolorプロパティ) a:visited {
 color:purple;
}
非推奨
br要素 (強制改行)
clear属性 回り込み解除 CSSで代替(clearプロパティまたはclearfixハック) ●clearプロパティbr.clr {
 clear:both; }

●clearfixハック.clearfix:after {
 content:".";
 display:block;
 clear:both;
 :0;
 visibility:hidden;
}
.clearfix {
 display:inline-block;
}
/* exlude MacIE5 \*/
* html .clearfix {
 height:1%;
}
.clearfix {
 display:block;
}
/* end MacIE5 */
非推奨
caption要素 (表のタイトル)
align属性 左右整列位置 CSSで代替(caption-sideプロパティ) ●要素の上揃え、下揃え、左揃え、右揃えcaption {
 caption-side:top|bottom|left|right;
}
非推奨
div要素 (ブロック要素のグループ化)
align属性 左右整列位置 CSSで代替(margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ) ●要素のセンタリングdiv {
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}
●要素内のテキストおよび要素の左揃え、センタリング、右揃えdiv {
 text-align:left|center|right;
}
非推奨
dl要素 (定義リスト)
compact属性 コンパクト表示 代替方法なし ※dl要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 非推奨
form要素 (フォームの定義)
name属性 要素の名前 id属性で代替 【XHTML 1.0】
古いブラウザ対応のためにname属性とid属性の併用可。<form action="action="search.cgi" method="post" name="frm" id="frm">
【XHTML 1.1】
id属性のみ。<form action="search.cgi" method="post" id="frm">
非推奨
target属性 リンク先の開き方 別窓表示(_blank)はJavaScriptで代替。 ※form要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 非推奨
h1~h6要素 (見出し)
align属性 左右整列位置 CSSで代替(margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ) ●要素のセンタリングh1 {
 margin-left:auto;
 margin-right:auto;
}
●要素内のテキストおよび要素の左揃え、センタリング、右揃えh1 {
 text-align:left|center|right;
}
非推奨
hr要素 (ブロック要素の区切り線)
align属性 左右整列位置 CSSで代替(margin-leftプロパティ、margin-rightプロパティ) ●要素のセンタリングhr {
 margin-left:auto;
 margin-right:auto;
}
非推奨
noshade属性 区切り線に影を付けない CSSで代替(borderプロパティ) hr {
 border:1px solid #ccc;
}
※<hr noshade=”noshade” />は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。
非推奨
size属性 区切り線の太さ CSSで代替(borderプロパティ、heightプロパティ) hr {
border:1px solid #ccc;
}
非推奨
width属性 区切り線の幅 CSSで代替(heightプロパティ) hr {
 width:80%;
}
非推奨
html要素 (文書ルート)
version属性 HTML文書のバージョン番号 代替方法なし ※html要素のversion属性は、DTD(文書型宣言)があるので不要。 非推奨
img要素 (画像の埋め込み)
align属性 左右整列位置 CSSで代替(floatプロパティまたはvertical-alignプロパティ) ●要素の左揃え、右揃えimg {
 float:left|right; }
●要素の上揃え、上下中央揃え、下揃えimg {
 vertical-align:top|middle|bottom;
}
非推奨
border属性 枠線 CSSで代替(borderプロパティ) img {
 border:0;
}
または
img {
 border:none;
}
非推奨
hspace属性 左右外余白 CSSで代替(margin-leftプロパティ、margin-rightプロパティ) img {
 margin-left:5px;
 margin-right:5px;
}
非推奨
name属性 要素の名前 id属性で代替 【XHTML 1.0】
古いブラウザ対応のためにname属性とid属性の併用可。<img id="pic" name="pic" src="photo.jpg" alt="写真" />
【XHTML 1.1】
id属性のみ。<img id="pic" src="photo.jpg" alt="写真" />
非推奨
vspace属性 上下外余白 CSSで代替(margin-topプロパティ、margin-bottomプロパティ) img {
 margin-top:5px;
 margin-bottom:5px;
}
非推奨
input要素 (入力要素)
align属性 左右整列位置 CSSで代替(floatプロパティまたはvertical-alignプロパティ) ●要素の左揃え、右揃えinput {
 float:left|right;
}
●要素の上揃え、上下中央揃え、下揃えinput {
 vertical-align:top|middle|bottom;
}
非推奨
legend要素 (フォーム要素のグループのタイトル)
align属性 左右整列位置 代替方法なし ●要素の左揃え、右揃えlegend {
 float:left|right;
}
●要素の上揃え、下揃えlegend {
 vertical-align:top|bottom;
}
非推奨
li要素 (リストの項目)
type属性 リストマーク CSSで代替(list-style-typeプロパティ) li {
 list-style-type:disc|circle|square;
}
非推奨
value属性 リスト項目の値 代替方法なし 非推奨
link要素 (文書の関連ファイル)
target属性 リンク先の開き方 代替方法なし ※link要素のtarget属性は、XHTML 1.0 Tranditional/Framesetでのみ使用可。 非推奨
map要素 (イメージマップの定義)
name属性 要素の名前 id属性で代替 【XHTML 1.0】
古いブラウザ対応のためにname属性とid属性の併用可。<map id="umap" name="umap">
【XHTML 1.1】
id属性のみ。<map id="umap">
非推奨
object要素 (オブジェクトの埋め込み)
align属性 左右整列位置 CSSで代替(floatプロパティまたはvertical-alignプロパティ) ●要素の左揃え、右揃えobject {
 float:left|right;
}
●要素の上揃え、上下中央揃え、下揃えobject {
 vertical-align:top|middle|bottom;
}
非推奨
border属性 枠線 CSSで代替(borderプロパティ) object {
 border:1px solid #ccc;
}
非推奨
hspace属性 左右外余白 CSSで代替(margin-leftプロパティ、margin-rightプロパティ) object {
 margin-left:5px;
 margin-right:5px;
}
非推奨
vspace属性 上下外余白 CSSで代替(margin-topプロパティ、margin-bottomプロパティ) object {
 margin-top:1em;
 margin-bottom:1em;
}
非推奨
ol要素 (番号付きリスト)
compact属性 コンパクト表示 代替方法なし ※ol要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 非推奨
start属性 開始番号 代替方法なし ※ol要素のstart属性は、XHTML 1.0 Tranditional/Framesetで使用可だが非推奨属性のため使用しない。 非推奨
type属性 リストマーク CSSで代替(list-style-typeプロパティ) ol {
 list-style-type:decimal;
}
非推奨
p要素 (段落)
align属性 左右整列位置 CSSで代替(margin-leftプロパティ、margin-rightプロパティ、text-alignプロパティ) ●要素のセンタリングp {
 margin-left:auto;
 margin-right:auto;
 text-align:center;
}
●要素内のテキストおよび要素の左揃え、センタリング、右揃えp {
 text-align:left|center|right;
}
非推奨
pre要素 (整形済みテキスト)
width属性 要素の幅 CSSで代替(widthプロパティ) pre {
 width:98%;
}
非推奨
script要素 (外部スクリプトファイルの読み込み、スクリプトの記述)
language属性 言語 type属性で代替 【XHTML 1.0 Transitional/Frameset】
古いブラウザ対応するためにtype属性とlanguage属性の併用可。<script type="text/javascript" language="JavaScript">
【XHTML 1.0 Strict、XHTML 1.1】
type属性のみ。<script type="text/javascript">
非推奨
table要素 (表の定義)
align属性 左右整列位置 CSSで代替(floatプロパティまたはmargin-leftプロパティ+margin-rightプロパティ) ●要素の左揃え、右揃えtable {
 float:left|right; }
●要素のセンタリングtable {
 margin-left:auto;
 margin-right:auto;
}
非推奨
bgcolor属性 背景色 CSSで代替(background-colorプロパティ) table {
 background-color:#f7f7f7;
}
非推奨
border属性 枠線 CSSで代替(table要素・th要素・td要素のborderプロパティ、border-collapseプロパティ) table {
 border:1px solid #ccc;
 border-collapse:collapse;
}
th, td {
 border:1px solid #ccc;
}
※table要素のborder属性は、XHTML1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
cellpadding属性 セルの内余白 CSSで代替(th要素・td要素のpaddingプロパティ) th, td {
 padding:5px;
}
※table要素のcellpadding属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
cellspacing属性 セルの外余白 CSSで代替(border-spacingプロパティ) table {
 border-spacing:0;
}
※table要素のcellspacing属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
frame属性 表の外枠の表示形式 CSSで代替(borderプロパティ) table {
 border:1px solid #ccc;
}
※table要素のframe属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
rules属性 行・列の線の引き方式 CSSで代替(thead、tbody、colgroup、col、tr要素のborderプロパティ) thead,tbody,colgroup,col,tr {
 border:1px solid #ccc;
}
※table要素のrules属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
width属性 表の幅 CSSで代替(widthプロパティ) table {
 width:100%;
}
※table要素のwidth属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
th要素 (見出しセル)、td要素 (データセル)
align属性 セル内の左右整列位置 CSSで代替(text-alignプロパティ) ●セル内のテキストおよび要素の左揃え、センタリング、右揃えth, td {
 text-align:left|center|right;
}
※th要素およびtd要素のalign属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
bgcolor属性 セルの背景色 CSSで代替(background-colorプロパティ) th, td {
 background-color:#fff;
}
非推奨
height属性 セルの高さ CSSで代替(heightプロパティ) th, td {
 height:2em;
}
非推奨
nowrap属性 セル内のテキストの折り返し CSSで代替(white-spaceプロパティ) th, td {
 white-space:nowrap;
}
非推奨
valign属性 セル内の上下整列位置 CSSで代替(vertical-alignプロパティ) ●セル内のテキストおよび要素の上揃え、上下中央揃え、下揃えth, td {
 vertical-align:top|middle|bottom;
}
※th要素およびtd要素のvalign属性は、XHTML 1.0で使用可だが文書構造と視覚表現分離のため使用しない。
CSS推奨
width属性 セルの幅 CSSで代替(widthプロパティ) th, td {
 width:25%;
}
非推奨
tr要素 (行グループ)
bgcolor属性 行グループの背景色 CSSで代替(background-colorプロパティ) tr {
 background-color:#ffffcc;
}
非推奨
ul要素 (箇条書きリスト)
compact属性 コンパクト表示 代替方法なし ※ul要素のcompact属性は、XHTML 1.0 Tranditional/Framesetで使用可だが文書構造と視覚表現分離のため使用しない。 非推奨
type属性 リストマーク CSSで代替(list-style-typeプロパティ) ul {
 list-style-type:disc|circle|square;
}
非推奨

2回にわたって、XHTMLの要素・属性のガイドラインをご紹介してきました。
Web制作に関わる社内外の人々の共通認識となるガイドラインを作成しておくと、コーディングの統一化や作業効率化が図れます。
一覧やリスト化しておけば、DTD移行時やソース確認時などにも活用できます。

さて次回は、「XHTMLの書式と記述のルール」です。