CSSパーツテンプレート

このサイトは、「初心者でも使えるCSSパーツテンプレート」を配布しています

テンプレート サイズ カラー 文字の設定 背景の設定 枠線の設定
 

  フォントサイズと単位について

文字にスタイルを適用させる方法を知る前に文字の単位について知っておいた方がいいでしょう。
ここではよく使用する単位をいくつかピックアップして、実際どのくらいの大きさなのかというのを視覚的にわかりやすく表示してみます。
通常、何も文字サイズを設定しなければブラウザの文字サイズは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パーツ


Copyright © 2009 CSSパーツテンプレート All rights reserved.