【忘備録】パーセントでフォントサイズを指定する時に便利なやつ

二週連続でつまらないですがまた防備録忘備録w

良くある「大・中・小」とボタンがあって、文字の拡大縮小に対応する場合、
フォントのサイズ指定は相対値(パーセントが無難)で行わなければなりません。

IE6やその他のモダンブラウザの基本のフォントサイズは16pxになります。※

ただ、WEBサイトを作る中で基本のフォントサイズを16pxにする事はあまりないのでデザインに合わせて数値を導く必要があります。

例えば基本のフォントサイズを12pxとしたい場合は以下の通りです。

例)基本のフォントサイズを12pxの場合

ブラウザの基本は16pxなので「12÷16=0.75」となり75%(パーセント)となります。
ですので、bodyに75%を設定します。

body {
	font-size: 75%;
}

これで基本のフォントサイズは12pxになりました。

では次にh1要素だけを16pxにしたい場合はどうでしょうか。

この場合は12pxが基準、になり計算すると「12÷16 =1.3333….」となりますので約134%になります。

よって以下のようにCSSを記述します。

h1 {
	font-size: 134%;/*基本サイズは12px*/
}

はぁ、めんどくさい。

と言うわけで、いちいち計算するのは面倒なのでこんな表を作ってみました。

基本フォントサイズ別の対応表

基本のフォントサイズ 12px

表示したいサイズ|指定する値
10px|84%
11px|92%
12px|100%
13px|109%
14px|117%
15px|125%
16px|134%
17px|142%
18px|150%
19px|159%
20px|167%
21px|175%
22px|184%
23px|192%
24px|200%
25px|209%
26px|217%

基本のフォントサイズ 13px

表示したいサイズ|指定する値
10px|77%
11px|85%
12px|93%
13px|100%
14px|108%
15px|116%
16px|124%
17px|131%
18px|139%
19px|147%
20px|154%
21px|162%
22px|170%
23px|177%
24px|185%
25px|193%
26px|200%

基本のフォントサイズ 14px

表示したいサイズ|指定する値
10px|72%
11px|79%
12px|86%
13px|93%
14px|100%
15px|108%
16px|115%
17px|122%
18px|129%
19px|136%
20px|143%
21px|150%
22px|158%
23px|165%
24px|172%
25px|179%
26px|186%

基本のフォントサイズ 15px

表示したいサイズ|指定する値
10px|67%
11px|74%
12px|80%
13px|87%
14px|94%
15px|100%
16px|107%
17px|114%
18px|120%
19px|127%
20px|134%
21px|140%
22px|147%
23px|154%
24px|160%
25px|167%
26px|174%

基本のフォントサイズ 16px

表示したいサイズ|指定する値
10px|63%
11px|69%
12px|75%
13px|82%
14px|88%
15px|94%
16px|00%
17px|107%
18px|113%
19px|119%
20px|125%
21px|132%
22px|138%
23px|144%
24px|150%
25px|157%
26px|163%

来年はもう少し面白い記事を書こうと思います(たぶん)

※昔は14pxのブラウザもありました。