|
文字にスタイルを適用させる方法を知る前に文字の単位について知っておいた方がいいでしょう。
ここではよく使用する単位をいくつかピックアップして、実際どのくらいの大きさなのかというのを視覚的にわかりやすく表示してみます。
通常、何も文字サイズを設定しなければブラウザの文字サイズは16pxで表示されます。これは100%でもあり1emでもありmediumでもあり、はたまた
デフォルトの<h4>と同じサイズになります。 なので今後ホームページを作っていく際にはこの16pxという数字と単位を頭に入れておくとわかりやすいかと思います。
なお、x-smallなどのキーワードや%、emは相対サイズといってブラウザ上で文字サイズを切り替えると、それに合わせて表示サイズも変わります。
逆に、pxやptは絶対サイズといって文字サイズを切り替えても”絶対に”大きさは切り変わりません。(ブラウザにより切り替わるものもあります)
前者(相対サイズ)は読みやすさ重視の場面で使用し、後者(絶対サイズ)はデザインを重視する場面などで使い分けするとよいかと思います。
キーワードでサイズ指定
| xx-small |
CSSパーツ |
| x-small |
CSSパーツ |
| small |
CSSパーツ |
| medium |
CSSパーツ |
| large |
CSSパーツ |
| x-large |
CSSパーツ |
| xx-large |
*大きすぎるので省略します |
|
pxでサイズ指定
| 9px |
CSSパーツ |
| 10px |
CSSパーツ |
| 12px |
CSSパーツ |
| 16px |
CSSパーツ |
| 18px |
CSSパーツ |
| 24px |
CSSパーツ |
| 32px |
*大きすぎるので省略します |
|
キーワードでサイズ指定とpxでサイズ指定は左右で同じ大きさになるよう記載してあります。
ptでサイズ指定
| 6pt |
CSSパーツ |
| 9pt |
CSSパーツ |
| 12pt |
CSSパーツ |
| 15pt |
CSSパーツ |
| 18pt |
CSSパーツ |
| 20pt |
CSSパーツ |
| 23pt |
CSSパーツ |
|
emでサイズ指定
| 0.6em |
CSSパーツ |
| 0.8em |
CSSパーツ |
| 1em |
CSSパーツ |
| 1.2em |
CSSパーツ |
| 1.5em |
CSSパーツ |
| 1.8em |
CSSパーツ |
| 2em |
CSSパーツ |
|
|