HTML要素のCSS化

以下では、xhtml 1.1 の廃止要素（xhtml 1.0 では使用可能だったが、xhtml 1.1 では使用不可とされた要素）をどのように代替表現/指定するかを説明します。

applet basefont center dir font frame i iframe
isindex menu s、strike u all

applet要素

applet 要素は、 object 要素で代替します。

［ xhtml 1.0 ］

<appletcode="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.1 ］

<objectdata="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 属性で指定します。

参考appletobject

basefont要素

basefont 要素は、css のfont-size プロパティで代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

body {color: #000000;font-size: normal;}

参考 basefont font-size

center要素

center 要素は、 div 要素に css のtext-align プロパティを指定するかたちで代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

参考 center div text-align

dir要素

dir 要素は、 ul 要素で代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

なお、 dir 要素（ディレクトリー型リスト）は元々、ほとんどのブラウザでul 要素を使用したときと同じように表示されるため、一般に使用されません。

参考 dir ul

font要素

font 要素は、css のcolor、font-size、font-family プロパティで代替します。

［ xhtml 1.0 ］

<font color="#cc0000" size="3" face="arial,sans-serif">
cssの目的は、見栄えのコントロールです。

［ xhtml 1.1 ］

<spanstyle="color: #cc0000; font-size: 100%; font-family: arial,sans-serif;">
cssの目的は、見栄えのコントロールです。

</span>

参考 font color font-size font-family

frame、frameset、noframes要素

frame、frameset、noframes 要素は、xhtml 1.0 のframeset で認められているフレームレイアウト向け要素ですが、xhtml 1.1 ではフレームレイアウト向け要素は認められておらず、したがって代替方法はありません。

i要素

i 要素は、css のfont-style プロパティ（値： italic ）で代替します。

［ xhtml 1.0 ］

<i>この部分は斜体です。

</i>

［ xhtml 1.1 ］

<spanstyle="font-style: italic;">この部分は斜体です。

</span>

参考 i font-style

iframe要素

iframe 要素は、 object 要素で代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

参考 iframe object

isindex要素

isindex 要素は、その機能をそのまま代替する要素はありませんが、通常input 要素で代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

なお、 isindex 要素は、 head 要素の範囲内に記述することで、ページ最上部に自動的に「キーワード検索フィールド」挿入するものです。

html 1 でも定義されていた非常に古い要素で、現在では一般に使用されません。

参考 isindex input

menu要素

menu 要素は、 ul 要素で代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

なお、 menu 要素（メニュー型リスト）は元々、ほとんどのブラウザでul 要素を使用したときと同じように表示されるため、一般に使用されません。

参考 menu ul

s、strike要素

s、strike 要素は、css のtext-decoration プロパティ（値： line-through ）で代替します。

［ xhtml 1.0 ］

<strike>この部分は取り消し線を引いています。

</strike>

［ xhtml 1.1 ］

<spanstyle="text-decoration: line-through;">この部分は取り消し線を引いています。

</span>

参考 s strike text-decoration

u要素

u 要素は、css のtext-decoration プロパティ（値： underline ）で代替します。

［ xhtml 1.0 ］

<u>この部分は下線を引いています。

</u>

［ xhtml 1.1 ］

<spanstyle="text-decoration: underline;">この部分は下線を引いています。

</span>

属性

（全要素）lang属性

lang 属性は、 xml:lang 属性で代替します。

ただし一般的に、xhtml 1.0 ではクロスブラウザを考慮してlang 属性とxml:lang 属性を併記し、xhtml 1.1 ではxml:lang 属性のみを記述します。

［ xhtml 1.0 ］

<htmlxml:lang="ja" lang="ja">

［ xhtml 1.1 ］

<htmlxml:lang="ja">

（a要素）name、target属性 name属性

a 要素のname 属性は、 id 属性で代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

参考 a

target属性

a 要素のtarget 属性には、代替する属性または css のプロパティはありません。

新しいウィンドウを開くかたちでのリンクは、javascript などを利用して実現することになります。

（area要素）target属性

area 要素のtarget 属性には、代替する属性または css のプロパティはありません。

新しいウィンドウを開くかたちでのリンクは、javascript などを利用して実現することになります。

参考 area

（body要素）background、bgcolor、text、link、vlink、alink属性
background属性

body 要素のbackground 属性は、css のbackground-image プロパティで代替します。

［ xhtml 1.0 ］

<bodybackground="images/bcg.gif">

［ xhtml 1.1 ］

body {background-image: url('images/bcg.gif');}

参考 body background-image

bgcolor属性

body 要素のbgcolor 属性は、css のbackground-color プロパティで代替します。

［ xhtml 1.0 ］

<bodybgcolor="#ffffff">

［ xhtml 1.1 ］

body {background-color: #ffffff;}

参考 body background-color

text属性

body 要素のtext 属性は、css のcolor プロパティで代替します。

［ xhtml 1.0 ］

<bodytext="#000000">

［ xhtml 1.1 ］

body {color: #000000;}

参考 body color

link、vlink、alink属性

body 要素のlink、vlink、alink 属性は、css の:link、:visited、:active 擬似クラスで代替します。

［ xhtml 1.0 ］

<bodylink="#0000ff" vlink="#00cccc" alink="#ff0000">

［ xhtml 1.1 ］

a:link { color: #0000ff; }
a:visited { color: #00cccc; }
a:active { color: #ff0000; }

参考 body :link :visited :active

（br要素）clear属性

br 要素のclear 属性は、css のclear プロパティで代替します。

［ xhtml 1.0 ］

<brclear="all" />

［ xhtml 1.1 ］

参考 br

（caption要素）align属性

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

［ xhtml 1.0 ］

<captionalign="bottom">一覧表</caption>

［ xhtml 1.1 ］

参考 caption caption-side

（div要素）align属性

div 要素のalign 属性は、css のtext-align プロパティで代替します。

［ xhtml 1.0 ］

<divalign="center">
テキストを中央揃え。

</div>

［ xhtml 1.1 ］

<div style="text-align: center;">
テキストを中央揃え。

</div>

参考 div テキスト配置（Text Alignment）

（h1～h6要素）align属性

h1～h6 要素のalign 属性は、css のtext-align プロパティで代替します。

［ xhtml 1.0 ］

<h4align="center">
見出しを中央揃え。

</h4>

［ xhtml 1.1 ］

<h4 style="text-align: center;">
見出しを中央揃え。

</h4>

参考 h1～h6 テキスト配置（Text Alignment）

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

hr 要素のalign、size、width 属性は、css のtext-align、border-width、width プロパティで代替します。

なお、 noshade 属性については、代替する属性またはcss のプロパティはありません。

［ xhtml 1.0 ］

<hralign="center" noshade size="2" width="80%" />

［ xhtml 1.1 ］

なお、 noshade 属性について、css のborder-style プロパティ（値： solid ）を使うだけで、 noshade 属性を指定したような「影」のない線が実現します。

参考 hr border-width テキスト配置（Text Alignment）

（image要素）align、border、hspace、vspace属性

image 要素のalign、border、hspace、vspace 属性は、
vertical-align （ align="top|middle|bottom" の場合）、
float （ align="left|right" の場合）、 border-width、margin プロパティで代替します。

［ xhtml 1.0 ］

<imgalign="top" border="0" hspace="5" vspace="10" />

［ xhtml 1.1 ］

参考 img 垂直配置（Vertical Alignment）回り込み回避（Float）border-width margin

（input要素）align属性

input 要素（ type="image" の場合）のalign 属性は、css の
vertical-align （ align="top|middle|bottom" の場合）、 float （ align="left|right" の場合）
プロパティで代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

参考 input vertical-align float

（legend要素）align属性

legend 要素の align 属性は、cssの float （ align="left|right" の場合）プロパティで代替します（ align="top|bottom" の場合、css のvertical-align プロパティでは代替できないようです）。

［ xhtml 1.0 ］

<legendalign="right">任意記入</legend>

［ xhtml 1.1 ］

参考 legend float

（li要素）type、value:値属性

li 要素のtype 属性は、css のlist-style-type プロパティで代替します。

なお、 value:値属性については、代替する属性または css のプロパティはありません。

［ xhtml1.0 ］

［ xhtml 1.1 ］

参考 li list-style-type

（link要素）target属性

link 要素のtarget 属性には、代替する属性または css のプロパティはありません。

参考 link

（map要素）name属性

map 要素のname 属性は、 id 属性で代替します。

［ xhtml 1.0 ］

<mapname="headbar">
<p><a href="index.html">トップへ</a></p>
</map>

［ xhtml 1.1 ］

<mapid="headbar">
<p><a href="index.html">トップへ</a></p>
</map>

参考 map

（ol要素）compact、start、type属性

ol 要素のtype 属性は、css のlist-style-type プロパティで代替します。

なお、 compact、start 属性については、代替する属性または css のプロパティはありません。

［ xhtml 1.0 ］

<oltype="1">
<li>項目1</li>
<li>項目2</li>
</ol>

［ xhtml 1.1 ］

なお、 compact 属性については、css のdisplay プロパティ（値： compact ）でコンパクト化するかたちで同様の効果が期待できますが、ブラウザの表示上は変化がない場合がほとんどです。

したがって、 font-size プロパティを利用してフォントサイズ自体を小さくするのが確実な方法です。

参考 ol list-style-type

（p要素）align属性

p 要素のalign 属性は、css のtext-align プロパティで代替します。

［ xhtml 1.0 ］

<palign="center">
テキストを中央揃え。

</p>

［ xhtml 1.1 ］

<p style="text-align: center;">
テキストを中央揃え。

</p>

参考 p text-align

（pre要素）width属性

pre 要素のwidth 属性は、代替する属性または css のプロパティはありません。

参考 pre

（script要素）language属性

script 要素のlanguage 属性は、 type 属性で代替します（厳密な代替ではないものの、
現在はこのように指定するほかありません）。

［ xhtml 1.0 ］

<scriptlanguage="javascript">
<![cdata[
スクリプトの内容
]]>
</script>

［ xhtml 1.1 ］

<scripttype="text/javascript">
<![cdata[
スクリプトの内容
]]>
</script>

参考 script

（table要素）align、bgcolor属性

table 要素のalign 属性は、 css のfloat プロパティで代替します。

bgcolor 属性は、css のbackground-color プロパティで代替します。

［ xhtml 1.0 ］

<tablealign="right" bgcolor="#ff0000">
<tr>
<td>リスト1</td>
<td>リスト2</td>
</tr>
</table>

［ xhtml 1.1 ］

参考 table text-align background-color

（td、th要素）bgcolor、height、nowrap、width属性

td、th 要素のbgcolor、height、nowrap、width 属性は、css の
background-color、height、white-space、width プロパティで代替します。

［ xhtml1.0 ］

［ xhtml 1.1 ］

参考 td th background-color white-space width height

（tr要素）bgcolor属性

tr 要素のbgcolor 属性は、css のbackground-color プロパティで代替します。

［ xhtml 1.0 ］

［ xhtml 1.1 ］

参考 tr background-color

（ul要素）compact、type属性

ul 要素のtype 属性は、css のlist-style-type プロパティで代替します。

なお、 compact 属性については、代替する属性または css のプロパティはありません。

［ xhtml 1.0 ］

<ultype="circle">
<li>項目1</li>
<li>項目2</li>
</ul>

［ xhtml 1.1 ］

したがって、

font-size プロパティを利用してフォントサイズ自体を小さくするのが確実な方法です。