techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

相対フォントサイズは親要素に対して

2012/02/02 HTML+CSS

%やemなどの相対的なフォントサイズは、親要素にたいしての比率になります。

例えば下のようなCSS。

.table{
font-size:80%;
}

.post table{
}
.post table td{
font-size:80%;
}

一番上の、tableタグの中のフォントサイズは、親要素である例えばbodyのサイズデフォルト値、100%に対しての80%になります。

次に、postというクラスの下の tableには、フォントサイズを設定していませんが、上でtableサイズは、bodyの80%が設定されていますので、このサイズが適用されています。

さらに、その子供の要素である、.post table tdに80%のフォントサイズを設定しています。これは親である.post tableに対しての80%なので、bodyの100%に対しては64%のサイズ指定になります。