InternetExplorer5.0
NetscapeCommunicator4.6
- テーブル関連がデフォルトのまま
- テーブル関連がデフォルトのまま
B要素の代わりに頻繁に使用するプロパティの「font-weight」、実際のところ一部おかしなところも存在するのですが、 殆ど問題なく表現してくれます。「font-style」についても同様なことがいえるようです。
CSSプロパティ「font-weight」に関する留意点を以下にまとめてみました。
テーブル関連には全くその指定は反映されないようです。 当然ながら、継承を使うこともできませんので、テーブル関連に相対指定はしない方が良さそうです。 これは「font-size」と同様です。 しかし、回避方法はいくらでもあります。
BODY要素に直接「bold」指定などすることはないでしょうが、他の要素を「normal」に戻そうとしても簡単にはいかないようです。 「邪魔な太字を通常に戻す場合」をご覧下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
BODY{
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV>
<IMG SRC="../image/testimage.gif" ALT="Sample image">
</DIV>
<H1>H1要素</H1>
<P>P要素</P>
<DIV>DIV要素
<DIV>DIV要素(DIV要素内)</DIV>
<SPAN>SPAN要素(DIV要素内)</SPAN>
</DIV>
<TABLE>
<TR>
<TD>TD要素</TD>
<TD>TD要素</TD>
</TR>
<TR>
<TD>TD要素(終了タグの省略)
<TD>TD要素(終了タグの省略)
</TR>
</TABLE>
<UL>
<LI>UL要素+LI要素</LI>
<LI>UL要素+LI要素(終了タグの省略)
</UL>
<DL>
<DT>DL要素+DT要素</DT>
<DD>DL要素+DD要素</DD>
<DT>DL要素+DT要素(終了タグの省略)
<DD>DL要素+DD要素(終了タグの省略)
</DL>
<FORM ACTION="sample01.html">
<INPUT TYPE="text" NAME="form1" VALUE="xxxxx"><BR>
<INPUT TYPE="submit" NAME="form2">
</FORM>
</BODY>
</HTML>
InternetExplorer5.0 |
NetscapeCommunicator4.6 |
|
|
|
|
BODY要素から直接フォントウエイトを指定しても、テーブルのフォントに変化はありません。 しかし、次のような回避方法を行うと問題なく変更できます。
TD要素に直接フォントウエイトを指定する方法は殆どの場合、問題ありません。 ただし、安全のためTD要素の終了タグは省略しない方が良いかもしれません。
ここで気を付けたいのは、TABLE要素やTR要素に指定しても、NC4.6では正常に表示できないことです。。
安全サイドで考えるならば、TD要素にも頼らず確実にSPAN要素を用いてフォントサイズを指定する方法をお奨めします。（下の例は全てを8ptで表示した時）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
BODY,SPAN{
font-weight: 700;
}
-->
</STYLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><SPAN>TD要素</SPAN></TD>
<TD><SPAN>TD要素</SPAN></TD>
</TR>
<TR>
<TD><SPAN>TD要素</SPAN></TD>
<TD><SPAN>TD要素</SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>
「BODY要素に直接指定した場合」にあるように、BODY要素にフォントウエイトを指定しても一部の要素には変化が現れない場合があります。 テーブル関連はその代表例（とはいっても困る）ですが、その他にも以下のような要素の場合に問題が感じられます。 （「font-weight」「font-style」共に同様です）
これらの要素はブラウザ側が既に太字表示を定義している（CSSで定義しているとは言い切れないが）ので、BODY要素の継承を受けることはありません。 ですので、全ての要素を通常の太さ表示しようとしてBODY要素だけに指定しても、効果が得られません。 ただし、この現象が発生するのはIE5のみでした。
これらはある意味正常な動作と解釈することも可能であるため、どうしても太さを変更したい場合は、個別に指定する必要があります。 しかし、正しいと言っても両ブラウザで異なる現象は何とかしてほしいものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
BODY{
font-weight: normal;
}
H1{
font-size: 12pt;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV>BODY要素のみ指定</DIV>
<H1>H1要素</H1>
<STRONG>STRONG要素</STRONG>
<B>B要素</B>
<DIV>個別に指定</DIV>
<H1 STYLE="font-weight:normal">H1要素</H1>
<STRONG STYLE="font-weight:normal">STRONG要素</STRONG>
<B STYLE="font-weight:normal">B要素</B>
</BODY>
</HTML>