フォントサイズとCSSの練習

このページは「font-size」「color」「margin」と「class」の練習用サンプルです。
このページのHTMLソースコードと見比べながら学習してください。

1. 基本の文字サイズ(px)

これは small (14px) の文字です。

これは normal (18px) の文字です。

これは big (24px) の文字です。

2. 相対サイズ(em)

この枠の中の文字は、特に指定がないので 18px です。

double クラス(2em) なので、この枠の文字の2倍の大きさになります。

3. 色を変える(color)

この行は red クラスで、文字色が赤になります。

この行は blue クラスで、文字色が青になります。

4. 余白(margin)をつける

下の2つの枠は、同じ内容ですが、上だけ margin を広くとっています。

margin: 40px; としている枠です。周りに広い余白があります。

margin: 5px; としている枠です。周りの余白が少なく見えます。


練習アイデア:このページを保存して、自分で font-size の数字を変えたり、
red / blue 以外の色名(green, orange など)に変えてみてください。