ＨＴＭＬタグ講座

[Home] [-5] [<] [>] [+5]

スタイルシート４　既存タグからの移行

既存タグで廃止予定となる部分をスタイルシートで表記した場合を紹介します。

【HTMLタグをスタイルシートで書き換える】

既存のHTMLタグは、見栄えを良くするためだけの部分はスタイルシートで表記するよう推奨されています。以下に書き換える方法を一覧に示しました。
この中にはブラウザによって対応していないものも含まれていますので、注意して下さい。
特に既存のタグで表記しても問題ないものは以下にあげていません。

HTML スタイルシート備　考

<FONT SIZE=-1> <SPAN STYLE="font-size: smaller; "> 「+1」→「larger」は一部のブラウザで表示が正しくありません

<FONT color="#FF0000"> <SPAN STYLE="color: #F00; "> 　

<BODY BGCOLOR="#FFFFCC"> <BODY STYLE="background-color: #FFC;"> 　

<BODY BACKGROUND="back.gif"> <BODY STYLE="background-image: url(back.gif);"> 　

<BODY TEXT="#333333"> <BODY STYLE="color: #333;"> 　

<BODY LINK="#FF0000"> A:link { color: #F00; } <HEAD>タグ内の<STYLE TYPE="text/css"></STYLE> に記入します

<BODY VLINK="#CC0000"> A:visited { color: #C00; }

<BODY ALINK="#FF6666"> A:active { color: #F66; }

<TABLE BGCOLOR="#FFFFCC"> <TABLE STYLE="background-color: #FFC;"> <TR>・<TH>・<TD>も同じ

<TABLE WIDTH="600"> <TABLE STYLE="width: 600;"> <TH>・<TD>も同じ

<LI TYPE="circle"> <LI STYLE="list-style-type: circle;"> 「circle」以外も同様

<IMG ALIGN="top"> <IMG STYLE="vertical-align: top;"> 「top」以外も同様

<IMG ALIGN="left"> <IMG STYLE="float: left;"> 「left」以外も同様

<IMG BORDER="2"> <IMG STYLE="border-width: 2pt;"> 　

<DIV ALIGN="center">～</DIV> <DIV STYLE="text-align: center;">～</DIV> 「center」以外も同様

<P ALIGN="center">～</P> <P STYLE="text-align: center;">～</P> 「center」以外も同様

<BR CLEAR="all"> <BR STYLE="clear: all; "> 「all」以外も同様

<HR ALIGN="left"> <HR STYLE="text-align: left;"> 「left」以外も同様

<HR WIDTH="90％"> <HR STYLE="width: 90%;">

HTML	スタイルシート	備　考
<FONT SIZE=-1>	<SPAN STYLE="font-size: smaller; ">	「+1」→「larger」は一部のブラウザで表示が正しくありません
<FONT color="#FF0000">	<SPAN STYLE="color: #F00; ">
<BODY BGCOLOR="#FFFFCC">	<BODY STYLE="background-color: #FFC;">
<BODY BACKGROUND="back.gif">	<BODY STYLE="background-image: url(back.gif);">
<BODY TEXT="#333333">	<BODY STYLE="color: #333;">
<BODY LINK="#FF0000">	A:link { color: #F00; }	<HEAD>タグ内の<STYLE TYPE="text/css"><!-- ～ --></STYLE> に記入します
<BODY VLINK="#CC0000">	A:visited { color: #C00; }
<BODY ALINK="#FF6666">	A:active { color: #F66; }
<TABLE BGCOLOR="#FFFFCC">	<TABLE STYLE="background-color: #FFC;">	<TR>・<TH>・<TD>も同じ
<TABLE WIDTH="600">	<TABLE STYLE="width: 600;">	<TH>・<TD>も同じ
<LI TYPE="circle">	<LI STYLE="list-style-type: circle;">	「circle」以外も同様
<IMG ALIGN="top">	<IMG STYLE="vertical-align: top;">	「top」以外も同様
<IMG ALIGN="left">	<IMG STYLE="float: left;">	「left」以外も同様
<IMG BORDER="2">	<IMG STYLE="border-width: 2pt;">
<DIV ALIGN="center">～</DIV>	<DIV STYLE="text-align: center;">～</DIV>	「center」以外も同様
<P ALIGN="center">～</P>	<P STYLE="text-align: center;">～</P>	「center」以外も同様
<BR CLEAR="all">	<BR STYLE="clear: all; ">	「all」以外も同様
<HR ALIGN="left">	<HR STYLE="text-align: left;">	「left」以外も同様
<HR WIDTH="90％">	<HR STYLE="width: 90%;">