[ CSS ] フォントサイズの継承

<div> と <td> に font-size:75% を指定して、それぞれを入れ子にしフォントサイズが継承されるかどうかのテスト。標準モードの場合、フォントが小さくなっていく。font-size の設定が上書きされず継承されているって事なんでしょうか？

フォントサイズの継承：標準モード

標準モードでレンダリングされると、<div> でも <td> でもフォントサイズが継承される（だんだん小さくなる）

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
<title>フォントサイズの継承：標準モード</title>
<style type="text/css">
<!--
div {
    font-size: 75%;
}
td {
    font-size: 75%;
}
-->
</style>
</head>
<body>
<h1>フォントサイズの継承：標準モード</h1>
<p>&lt;div&gt; の入れ子 </p>
<div>□□□□□□□□□□
<div>□□□□□□□□□□
<div>□□□□□□□□□□</div>
</div>
</div>
<p>&lt;td&gt; の入れ子 </p>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>□□□□□□□□□□
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>□□□□□□□□□□
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>□□□□□□□□□□ </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>標準モードでレンダリングされると、&lt;div&gt; でも &lt;td&gt; でもフォントサイズが継承される（だんだん小さくなる）</p>
</body>
</html>

フォントサイズの継承：互換モード

互換モードでレンダリングされると、<div> の時は継承されるが、<td> の時は継承されない。

サンプルコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
<title>フォントサイズの継承：互換モード</title>
<style type="text/css">
<!--
div {
    font-size: 75%;
}
td {
    font-size: 75%;
}
-->
</style>
</head>
<body>
<h1>フォントサイズの継承：互換モード</h1>
<p>&lt;div&gt; の入れ子 </p>
<div>□□□□□□□□□□
<div>□□□□□□□□□□
<div>□□□□□□□□□□</div>
</div>
</div>
<p>&lt;td&gt; の入れ子 </p>
<table>
<tr>
<td>□□□□□□□□□□
<table>
<tr>
<td>□□□□□□□□□□
<table>
<tr>
<td>□□□□□□□□□□ </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p>互換モードでレンダリングされると、&lt;div&gt; の時は継承されるが、&lt;td&gt; の時は継承されない。</p>
</body>
</html>

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。