MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > HTML / CSS > 「font-size」のパーセント表示の文字サイズ対応表をメモ【HTML/CSS】


「font-size」のパーセント表示の文字サイズ対応表をメモ【HTML/CSS】

 2012年12月4日   タグ: , ,

「font-size」のパーセント表示の文字サイズ対応表をメモ【HTML/CSS】
ウェブサイト制作時に文字サイズを、パーセント指定することは多々あると思います。ベースの文字サイズを「12px」で指定した場合の「120%」と、「18px」で指定した場合の「120%」は当然見た目のpxが違ってきます。今回はこの対応表をメモしておきます。

CSSに、対応表をメモしておく

miiracodeさんの記事でとても良い方法が紹介されていたので紹介しておきます。

方法は単純に、CSSファイルの先頭などに、コメントとして対応表をメモしておくことです。 これがあればいちいち、確認しなくてもフォントサイズを指定できます。個人的にとても便利でよい方法だなと思いました。

下記コメントの意味は、基本フォントサイズ * パーセント指定 -> 表示文字サイズ です。つまり、基本フォントが12pxの時の84%は10px というわけです。

 
/* font-size
-------------------------------------------------- *//*

12px * 84% -> 10px
12px * 92% -> 11px
12px * 100% -> 12px
12px * 109% -> 13px
12px * 117% -> 14px
12px * 125% -> 15px
12px * 134% -> 16px
12px * 142% -> 17px
12px * 150% -> 18px
12px * 159% -> 19px
12px * 167% -> 20px
12px * 175% -> 21px
12px * 184% -> 22px
12px * 192% -> 23px
12px * 200% -> 24px
12px * 209% -> 25px
12px * 217% -> 26px

13px * 77% -> 10px
13px * 85% -> 11px
13px * 93% -> 12px
13px * 100% -> 13px
13px * 108% -> 14px
13px * 116% -> 15px
13px * 124% -> 16px
13px * 131% -> 17px
13px * 139% -> 18px
13px * 147% -> 19px
13px * 154% -> 20px
13px * 162% -> 21px
13px * 170% -> 22px
13px * 177% -> 23px
13px * 185% -> 24px
13px * 193% -> 25px
13px * 200% -> 26px

14px * 72% -> 10px
14px * 79% -> 11px
14px * 86% -> 12px
14px * 93% -> 13px
14px * 100% -> 14px
14px * 108% -> 15px
14px * 115% -> 16px
14px * 122% -> 17px
14px * 129% -> 18px
14px * 136% -> 19px
14px * 143% -> 20px
14px * 150% -> 21px
14px * 158% -> 22px
14px * 165% -> 23px
14px * 172% -> 24px
14px * 179% -> 25px
14px * 186% -> 26px

15px * 67% -> 10px
15px * 74% -> 11px
15px * 80% -> 12px
15px * 87% -> 13px
15px * 94% -> 14px
15px * 100% -> 15px
15px * 107% -> 16px
15px * 114% -> 17px
15px * 120% -> 18px
15px * 127% -> 19px
15px * 134% -> 20px
15px * 140% -> 21px
15px * 147% -> 22px
15px * 154% -> 23px
15px * 160% -> 24px
15px * 167% -> 25px
15px * 174% -> 26px

16px * 63% -> 10px
16px * 69% -> 11px
16px * 75% -> 12px
16px * 82% -> 13px
16px * 88% -> 14px
16px * 94% -> 15px
16px * 100% -> 16px
16px * 107% -> 17px
16px * 113% -> 18px
16px * 119% -> 19px
16px * 125% -> 20px
16px * 132% -> 21px
16px * 138% -> 22px
16px * 144% -> 23px
16px * 150% -> 24px
16px * 157% -> 25px
16px * 163% -> 26px

-------------------------------------------------- */
このエントリーをはてなブックマークに追加

  |  Blog TOP   |