フォントサイズは、％で指定したほうがいいですか？

質問

こんばんは。趣味のブログをやりながら、HTML や CSS を勉強しています。

　手元の本やネット上には、「IE6 で文字の大きさを変えられるから、フォントサイズは『％』がオススメ」とあります。いっぽうでアクセス解析を見ても、IE6 の人は一人もいません。また、最近のブラウザ（IE9 や Firefox など）であれば、《CTRL ＋ マウスホイール》で画面の大きさを変えられると思います。

　個人的に px のほうが計算しやすいので、できれば《font-size: 16px;》のように指定したいのですが、やっぱり％のほうがいいですか？

回答No.3

tkmojo · ベストアンサー

IE6へきちんと対応する事を考えるなら、%以外の選択肢はありません。
emも相対指定で%よりもわかりやすいですが、IE6ではバグがあります。

ただ、プロでもない限りそこまでIE6や文字サイズの可変性にこだわる必要は無いと思います。
IE6の為に%指定をしても、そもそも素人の方ではIE6でずれないようにcssでレイアウトする事が出来ないと思います。

最近のブラウザだけで考えるなら、ほとんどのブラウザは初期設定時には
「文字サイズだけ」でなく「画面全体」を大きくする設定になっていますので、
pxで指定していても、大きくすることは可能です。
職業に、と考えないならpxで特に問題ないと思います。

ただ、文字サイズだけを大きくするように設定を変えているユーザーにまで対応したいなら、
やはり%での指定が適当かと思います。

様々なブラウザに対応した%の数値をまとめたサイトがあるので、%指定をするなら参考にしてください。
http://webtech-walker.com/archive/2008/05/16032443.html
ブラウザの初期設定は16pxなので、
例えば全体を12pxにまとめるならbodyに75%を指定し、
さらに部分的に14pxにするなら117%、10pxにするなら84%、という感じの見方です。

お礼

ご回答ありがとうございます。

　いままで Opera⇒Firefox⇒Chrome⇒IE8 の順で確認していましたが、ご回答が気になり、IETester というソフトで調べてみました。IE6 では、画像の max-width が効かないらしくフロート三段組がずれていたほか、png の透過部分も白くなっていました。また、IE7 にも変な隙間があったものの、これは何とか直せました。

　おかげさまで、％の数値をまとめたサイトの見方もわかりました。いろいろな単位が混ざっても、これで何とかなりそうです。趣味のブログとはいえ、上を目指してがんばりたいと思います。

回答No.5

metametamu

現代のPC用ブラウザはfont-size:medium;を指定すればほとんどが16pxで表示されます。
私はhtmlにその指定をして基準を作っておき、それから子要素に対して%を指定して調整してますね。

html {
font-size:medium !important;
font-size:small; /* この指定は古いIE用です */
}

/* フォントサイズ%指定用
10px 62.50%
11px 68.75%
12px 75.00%
13px 81.25%
14px 87.50%
15px 93.75%
16px 100.01%
17px 106.25%
18px 112.50%
19px 118.75%
20px 125.00%
21px 131.25%
22px 137.50%
23px 143.75%
24px 150.00%
25px 156.25%
26px 162.50%
27px 168.75%
28px 175.00%
29px 181.25%
30px 187.50%
31px 193.75%
32px 200.00%
*/

お礼

ご回答ありがとうございます。

　実験用のサイトで medium を指定してみたら、IE でもフォントサイズが変えられました。IE 対応を考えるなら、親も子も相対単位でなければいけないようですね。

回答No.4

ORUKA1951

emは相対サイズと呼ばれる方法で、pxは絶対サイズです。(pxを相対サイズと思っている人がいますが・・・)
スタイルシートのサイズは・・
相対サイズ
・em
・ex
絶対サイズ
・in: inches — 1in is equal to 2.54cm.
・cm: centimeters
・mm: millimeters
・pt: points — the points used by CSS are equal to 1/72nd of 1in.
・pc: picas — 1pc is equal to 12pt.
・px: pixel units — 1px is equal to 0.75pt.
　　　　　約0.26mm
パーセント
・%
あります。
　⇒4.3.2 Lengths( http://www.w3.org/TR/CSS2/syndata.html#length-units )
　⇒4.3.3 Percentages( http://www.w3.org/TR/CSS2/syndata.html#percentage-units )

＞個人的に px のほうが計算しやすいので、
　計算しやすいのは、cmやmmでしょう。

＞IE6 の人は一人もいません。
　IE6・・・さすがに、もう考慮する必要はないでしょう。

＞個人的に px のほうが計算しやすいので、できれば《font-size: 16px;》のように指定したいのですが、やっぱり％のほうがいいですか？

　サイズは、様々な場面で登場しますから一概には言えないでしょう。
　font-sizeに限れば、これは継承されるプロパティなので、media=screenでは、最初/最も親要素で、pxで指定しておいて、以降はemで指定することが多いです。
[例]
body{font-size:14px;}
h1,h2,h3,h4,h5,h6,p{line-height:1.6em;margin:0;}
p{text-indent:1em;}
h1{font-size:1.8em;}
h2{font-size:1.4em;}
h3{font-size:1.3em;}
h4{font-size:1.1em;}
h5,h6{font-size:1.0em;}
あとは、
div.section div.aside,div.section div.figure{font-size:0.9em;}
　これで、本文中の補足記事(aside)や挿絵的な記事(figure)は、その子要素のフォントサイズは一回り小さくなりますね。
　このように最初に絶対サイズで指定した後、emやexの相対サイズ、パーセントを組み合わせていくほうが良いでしょう。
　また、印刷用のスタイルシートでは、最初の指定をptやpcを使い、位置決めはmmで行います。

★ただ、昨今は、スマホや超幅広ディスプレイなど様々なデバイスが存在するため、最初の絶対サイズでの指定自体をしないこともあります。
　font-sizeに関しては、％指定はしていません。ボックスのサイズとかと紛らわしいので・・％指定はぼボックスサイズに限定して使用しています。
div.header,div.section,div.footer{width:90%;min-width:480px;max-width:900px;margin:0 auto;}
div.section div.section{margin:0 20%;min-width:0;}
とか・・

お礼

ご回答ありがとうございます。

　紙媒体なら級数（mm）だと思いますが、画面上では px のほうが計算しやすいと考えました。とはいえ、mm でフォントサイズ一覧表をつくっておいて、そのフォントとおなじ大きさになる px や % の一覧表もつくっておけば、いろいろな単位でも自由に行き来できるのではと。ご回答を読んで、このことに気づきました。

　なお、現状は幅 1000px の固定幅レイアウトが精一杯なので、印刷用やスマホ用は将来的な目標にとどめておきます。

回答No.2

noname#206842

一般的には、em(1文字の大きさに対する相対的なサイズ）で表現した方がいいのでは？・・・
基準となる文字サイズを、12pxとすると、1em=12px・1.5em=18pxになります。

％とあまり変わらないが、1文字の大きさを最初に、決めておけばいいので、多少便利かも？・・・

default font-size:12px;で宣言していた場合：font-size:1.5;line-height:1.5;
という方法を、とられてはいかがでしょうか？・・・

お礼

ご回答ありがとうございます。

　いろいろな単位があるほか、親要素の影響も受けるのでフォントサイズは難しいなぁ……と感じています。基準の絶対サイズを決めて、その子要素に相対サイズを持ってくるのがコツなんですね。

　em は行間やインデントの設定に使っていますが、フォントサイズにも応用してみたいと思います。

回答No.1

naokita

IE7は？　過去モードは？
色々な環境があるので、％の方が無難だけど、
それは製作者の自由であって、IE6を排除するのも自由。
IE6ユーザーがそういうサイトに腹を立てて嫌うのも勝手だし、バージョンアップしないのも自由。

それらのメリット・デメリットを製作者の観点で考慮すればよいです。

ちなみに、CSSでフォント計算表のようにあらかじめ％で計算して入れておくと、計算する必要はないでしょう。

お礼

ご回答ありがとうございます。

　<!DOCTYPE>が標準モードなので、互換モードは考えていません。けれどもアクセス解析を見直したら、月に IE6 が数人、IE7 が数十人いました。IE6 はともかく、７は無視できないようです。

　もちろん趣味のブログとはいえ、ある程度は上を目指したいと思っています。おっしゃるようにフォント計算表をつくって、％で指定したほうがよさそうですね。