フォントサイズをcssで指定する

この記事の目次

cssでフォントサイズの指定をする場合の設定項目をまとめてみました。

絶対サイズ指定

xx-small:とても小さい
x-small:小さい
small:やや小さい
medium:通常サイズ
large:やや大きい
x-large:大きい
xx-large:とても大きい

表示サンプル

font-size:xx-small
font-size:x-small
font-size:small
font-size:medium
font-size:large
font-size:x-large
font-size:xx-large

相対サイズ指定

smaller:親要素に対してやや小さく
larger:親要素に対してやや大きく

表示サンプル

font-size:smaller
font-size:larger

単位指定

px:ピクセル指定
mm:ミリ指定
cm:センチメートル指定
in:インチ指定
pt:ポイント指定
pc:パイカ指定(インチを基準にした印刷用の単位)
em:現在の文字の大きさを1とした相対指定
ex:アルファベットの”x”の大きさを1とした相対指定

表示サンプル

font-size:16px
font-size:4.5mm
font-size:0.45cm
font-size:0.18in
font-size:12pt
font-size:1pc
font-size:1em
font-size:1.8ex

%指定

%

現在の文字のサイズを100%とした相対指定

表示サンプル

font-size:160%

ご覧のように様々なfontサイズの設定が用意されています。

▼もう少し高度な設定が必要な場合に非常に参考になるサイト

[ CSS ] フォントサイズを統一&サイズ変更できる指定方法

[ CSS ] フォントサイズを統一&サイズ変更できる指定方法 | Bowz::Notebook

スタイルシート(CSS) フォントサイズ font-size

スタイルシート(CSS) フォントサイズ font-size | GSTYLE Blog

JS、HTML、CSS、SWFフォントサイズのテスト

安らげる部屋ブログ JS、HTML、CSS、SWFフォントサイズのテスト

CSSフォントサイズ表を作りました

CSSフォントサイズ表を作りました / ブログ:マジック・プロジェクト

コメント

タイトルとURLをコピーしました