rem単位とem(%)、nth-childとnth-of-typeの違いについてについて。便利なCSS3

またCSS3についてです。フロントコーディングをしてると発見が多いですね。 ちなみに、rem単位とem(%)、nth-child,nth-of-typeは関係ないのですが、短いので一緒の記事に書いています。

rem単位とem(%)の違い

CSS3で新しく追加された単位で、em,%に似た文字サイズを相対的に指定する単位です。 こちらで詳しく載っています。 CSS3の新単位remで、文字サイズの指定を分かりやすく 結果的には、<html>に対しての相対指定値になるようです。 %やemが親のサイズは親の値に対しての値なので、把握し辛くなるのに対して管理しやすそうです。

html { font-size: 16px; }
ul, p { font-size: 0.8rem; } /* 12.8px */
h1 { font-size: 1.6rem; } /* 25.6px */

 

</pre>
<ul>
	<li>リスト1</li>
	<li>
<ul>
	<li>リスト2</li>
</ul>
</li>
</ul>
<pre>

リスト1とリスト2は同じフォントサイズになります。 0.8em(%)だと、リスト1よりリスト2の方が小さくなります。

nth-childとnth-of-typeの違い

こちらもCSS3で追加された疑似要、素最近よく使うのでメモ

途中記事:::

http://weboook.blog22.fc2.com/blog-entry-285.html