CSSでの大きさの単位について

質問

またまた、お世話になります。
フォントサイズの指定をどの単位にしたら良いか迷っています。

emについて調べると、
　　親要素のフォントの大きさを 1 とする単位
と書かれていたり、
　　その範囲で有効なフォントの高さを１とする単位
などと書かれています。

ブラウザの文字設定や解像度などで変わることは何となくわかったのですが、この単位ですと、作成時に大きさがつかめないことはないのでしょうか？

また、％はどうなのでしょうか？
　　他の基準となる大きさに対する割合
と書かれていました。
他の基準というのは、そのページ内の他の文字ということでしょうか？
基準となる文字は何なのでしょうか？
説明の後に（基準はそれぞれ異なります）とあります。

あるページで、違いも確認しましたが、はっきり『こうなんだ』とは理解できませんでした。

どのようなパソコンでも、ほぼ同じように見えるようにするには、どの単位を使うのがいいのでしょうか？

現在は、HTMLのフォントサイズを使ったり、CSSではptを使っています。

皆さんのご意見、アドバイスなどお聞かせ下さい。よろしくお願い致します。

回答No.2

noname#199778 · ベストアンサー

emという単位は、相対的な単位で、その要素のフォントサイズを基準として、アルファベットを表示させた時に「h」などの背の高い文字の上端と、「g」など基準線よりも下に突き出る文字の下端までの高さを1とする単位だったと思います。
フォントサイズが基準になる単位ですが、これをフォントサイズ指定に使用することも可能で、この場合はその対象となる部分の親要素のフォントサイズを1とする単位になります。
たとえば、

<p style="font-size: 24px;"><span style="font-size: 0.5em;">文字</span></p>

この場合のspan要素のフォントサイズは、span要素を含む親要素<p>のフォントサイズを基準とするので、その0.5emのおよそ12pxになるはずです。
特にフォントサイズが指定されていない要素が親要素だったら、更にその上の親要素のフォントサイズが基準になります。 body要素以外でフォントサイズを指定していなければ、body要素のフォントサイズが基準になるでしょう。
body要素でもフォントサイズを指定していなければ、ブラウザの基準フォントサイズが基準になるはずです。

個人的には、emという単位は、font-sizeの指定に使う時は、ちょっとわかりにくい単位になってしまうかなと思います… 文字の大きさに合わせてボックスの横幅を可変したい場合(上手くやればテキストの自動改行位置を固定できるかも知れません)や、一行目の字下げを指定する場合などは便利な単位ですね。

フォントサイズのパーセント単位については、その親要素のフォントサイズに対する割合になるはずです。 親要素でフォントサイズが指定されていなければ、その上位の要素のフォントサイズが基準になるでしょうし、body要素以外でフォントサイズを指定していなければ、body要素のフォントサイズが基準になると思います。
body要素でもフォントサイズが指定されていなければ、ブラウザの基準フォントサイズが基準になると思います。 これは上記の例と同じなのではないでしょうか。

どのパソコンでもほぼ同じように見せるのは、案外難しいものです。 ある程度の妥協も必要かと思います。
ただ、どのパソコンでも同じということであれば、絶対単位で指定してしまうのが一番ストイックに目的に近いかと。 pxは各環境の表示の解像度に依存する単位ですし、em、ex(xの文字の高さを基準とする単位)、%については上位要素で絶対単位を使用していない限りは相対的に変化する可能性があります。
pt、pc(=12pt：パイカ)、cm、mm、in(インチ)は環境に依存しない単位ですので、これらを使うと、どの環境でも同じような表示が期待できると思います。
なお、IEでは、スタイルシートでフォントサイズを数値を使って指定すると、その単位がemとexと%以外の場合は、ブラウザの表示サイズを変更しても文字サイズの調整ができない仕様になっているので、IEに配慮するのであればフォントサイズの数値での指定は避けた方が無難でしょう。
あまり小さいフォントサイズを指定しなければ大丈夫とも思いますが…

デザインを重視するのであれば、フォントサイズを指定する方法とは逆に、表示される各要素のボックスのサイズをフォントサイズに追従して可変する単位で指定するという逆転の発想もありかも知れませんね。

長々と失礼しました。 参考になれば幸いです。

お礼

lead1976さん、詳しい説明、どうもありがとうございました。
参考にさせて頂きます。
それにしても、どの単位を使うかはなかなか難しい問題ですね。

回答No.3

noname#78418

再度登場です^^;

%は、親要素のフォントサイズに対して何%という計算方法となると思いますので、恐らく何も指定していない場合は、bodyにブラウザのフォントサイズを適用、ということで、ブラウザのフォントサイズから相対して何%で表示されることになるかと思います。

いろいろ、難しいですよね。

お礼

Scansaさん、再びどうもありがとうございました。
参考にさせて頂きます。
それにしても、どの単位を使うかはなかなか難しい問題ですね。

回答No.1

noname#78418

こんにちは。

あくまで私的な考えなのですが、emはブラウザのフォントサイズで、mを表示させたときの相対比だったと思います。

よってブラウザ側でフォントサイズ中→大にすると、mの高さも変わるので、文字が大きくなります。

%はそのページで、たとえばbody { font-size:12pt; }としていて、h1 { font-size:200%; }とすると、12ポイントの2倍、つまり24ptで表示されるんだったっと思います。

ただ、ptで指定すると小さくて読みにくい、と感じたときにユーザー側で文字のサイズを変えられないので、絶対にやめたほうがよい、というのがある種の定説になっています。

お礼

Scansaさん、回答どうもありがとうございました。

％は、やはり、はじめにサイズを指定しておかなくてはいけないということなのでしょうか？