CSS font-sizeのパーセンテージ指定「管理がややこしくないですか？」

質問

色々実験しているのですが、、、
CSSでフォントサイズを「％」指定すると、サイズの基準になるのはひとつ前の親要素のフォントサイズになるみたいですね。
＝＝＝＝＝＝＝＝＝＝＝＝
<div style="font-size:80%">あああ<span style="font-size:100%">いいいい</span>あああ</div>
＝＝＝＝＝＝＝＝＝＝＝＝
上記の場合「いいい」のサイズは「あああ」に指定している「80％」を継承し、基準値となるので「いいい」と「あああ」のサイズは変わらない。
「いいい」をブラウザデフォルトの16px相当のサイズで表示しようとすると、「<span style="font-size:130%">いいいい</span>」にしなくてはいけないようです。（少なくとも自分が実験した限りでは・・・）
親要素どころか、先祖要素なんかも影響してくることを考えるとテキストサイズを「％」指定することはとてもややこしいことでは無いですか？どのように管理されていますか？

最近は文字サイズはpx等の固定ではなく、相対指定するのが望ましいと言われているので「％」で指定していこうと思っているのですが。

基本的な質問ですみません。

※質問しやすいように「style」直接記述をしていますが、普段はCSSファイルをhtmlに読み込みしています。

回答No.5

tkmojo · ベストアンサー

私はbodyに入れてます。
例えばbodyに80%を入れて、
ページ内でさらに小さくする場合に、部分的に80%を入れたり
大きくしたい場合には120%を入れて…という具合です。
慣れればあまりめんどくささも感じないと思いますよ。

入れ子にした場合がどうというよりも、
px指定から急に相対指定に変えた場合に面倒なのは
文字サイズを変更した場合にレイアウト崩れが起きないように考えて作ることです。
これはページの複雑さにもよりますが、慣れるまでちょっと大変かもしれません。

お礼

再度の回答ありがとうございます！

＞px指定から急に相対指定に変えた場合に面倒なのは
＞文字サイズを変更した場合にレイアウト崩れが
＞起きないように考えて作ることです。

確かにそうですよね。。。四苦八苦しています。

前回の「em」指定のバグの話も大変参考になりました。
躓きつつも、がんばります。

回答No.4

tkmojo

確かにややこしいです。
基本の%指定を決めて、あまり%表示を入れ子にしないようにして作るしかないですね。

emの指定でも相対表示なのでブラウザの文字サイズ変更には対応していますが、
確かIE6（だったかな？）でサイズ変更の幅が倍になる（少し大きくしようとするとすごく大きくなる。縮小も同じ）バグがあったので
やはりややこしくても%で指定するのが現在では主流と言えると思います。

補足

＞基本の%指定を決めて、あまり%表示を
＞入れ子にしないようにして作るしかないですね。
＞やはりややこしくても%で指定するのが現在では主流と言えると思います。

わかりました。
「％」指定にがんばって慣れるようにしていきます。
今まで「px」指定に頼って、あまりユーザーに優しくないサイト作っていました。

ちなみに基本の％指定というのは「body」で指定されていたりしますか？
サイトによって色々みたいですね。。。
例えばbody {font-size:80%}みたいにしておくとか・・・。

回答No.3

MAN_MA_RUI

単位を%にした状態でスタイルをネストさせるとIEとそれ以外で解釈に違いの出るケースがあるようです。

IEが100%のときのサイズを基準にフォントサイズを決めて、それ以外は親要素のフォントサイズを基準に決めるのかな。
ゆえにIEでちょうど良いと思ったサイズが非IEで極小フォントになることもあります。

補足

＞単位を%にした状態でスタイルをネストさせると
＞IEとそれ以外で解釈に違いの出るケースがあるようです。

そうなんですか！？それは厄介ですね。。。
ブラウザ、ひとつになって欲しい・・・。

勉強になりました。ありがとうございます。

回答No.2

reverie013

％ってそうなんだぁ。ややこしいですね。
私はいつもemで指定しています。
ちゃんとブラウザの変更に対応していますよ。＾＾
1emがブラウザの中サイズで16相当らしいです。
例えば14にしたいなと思ったら14/16=0.875em
計算は電卓使えばあっという間ですし。
ただ、ちゃんとブラウザのサイズ変更に対応してはいるけれど、
デフォルト(指定なし)から考えると、綺麗な変化とはいかないかもです。
私は中に合わせて少し小さめに設定しているので、最小にすると滅茶苦茶小さくなって読めない；；；
参考までに。
％での指定ってしたことないんですが、それを考えるともしかしたらそちらの方が良かったりするのかもしれませんね。

お礼

調べてみましたが、「em」指定されている方も結構いるみたいですね。
併用していることもあるみたいで・・・。
行間に関しては「em」にしているとか。

＞私は中に合わせて少し小さめに設定しているので、
＞最小にすると滅茶苦茶小さくなって読めない；；；
＞参考までに。

参考情報ありがとうございます！

回答No.1

askaaska

サイズの指定がネストしないようにするの。
それが一番の対策よ。

お礼

回答、ありがとうございます。
ネスト＝入れ子ということ。。。？
極力、サイズは上位にある要素で指定するよう工夫してみます。