色々実験しているのですが、、、
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ベストアンサー
- 回答日時:
私はbodyに入れてます。
例えばbodyに80%を入れて、
ページ内でさらに小さくする場合に、部分的に80%を入れたり
大きくしたい場合には120%を入れて…という具合です。
慣れればあまりめんどくささも感じないと思いますよ。
入れ子にした場合がどうというよりも、
px指定から急に相対指定に変えた場合に面倒なのは
文字サイズを変更した場合にレイアウト崩れが起きないように考えて作ることです。
これはページの複雑さにもよりますが、慣れるまでちょっと大変かもしれません。
再度の回答ありがとうございます!
>px指定から急に相対指定に変えた場合に面倒なのは
>文字サイズを変更した場合にレイアウト崩れが
>起きないように考えて作ることです。
確かにそうですよね。。。四苦八苦しています。
前回の「em」指定のバグの話も大変参考になりました。
躓きつつも、がんばります。
No.4
- 回答日時:
確かにややこしいです。
基本の%指定を決めて、あまり%表示を入れ子にしないようにして作るしかないですね。
emの指定でも相対表示なのでブラウザの文字サイズ変更には対応していますが、
確かIE6(だったかな?)でサイズ変更の幅が倍になる(少し大きくしようとするとすごく大きくなる。縮小も同じ)バグがあったので
やはりややこしくても%で指定するのが現在では主流と言えると思います。
この回答への補足
>基本の%指定を決めて、あまり%表示を
>入れ子にしないようにして作るしかないですね。
>やはりややこしくても%で指定するのが現在では主流と言えると思います。
わかりました。
「%」指定にがんばって慣れるようにしていきます。
今まで「px」指定に頼って、あまりユーザーに優しくないサイト作っていました。
ちなみに基本の%指定というのは「body」で指定されていたりしますか?
サイトによって色々みたいですね。。。
例えばbody {font-size:80%}みたいにしておくとか・・・。
No.3
- 回答日時:
単位を%にした状態でスタイルをネストさせるとIEとそれ以外で解釈に違いの出るケースがあるようです。
IEが100%のときのサイズを基準にフォントサイズを決めて、それ以外は親要素のフォントサイズを基準に決めるのかな。
ゆえにIEでちょうど良いと思ったサイズが非IEで極小フォントになることもあります。
この回答への補足
>単位を%にした状態でスタイルをネストさせると
>IEとそれ以外で解釈に違いの出るケースがあるようです。
そうなんですか!?それは厄介ですね。。。
ブラウザ、ひとつになって欲しい・・・。
勉強になりました。ありがとうございます。
No.2
- 回答日時:
%ってそうなんだぁ。
ややこしいですね。私はいつもemで指定しています。
ちゃんとブラウザの変更に対応していますよ。^^
1emがブラウザの中サイズで16相当らしいです。
例えば14にしたいなと思ったら14/16=0.875em
計算は電卓使えばあっという間ですし。
ただ、ちゃんとブラウザのサイズ変更に対応してはいるけれど、
デフォルト(指定なし)から考えると、綺麗な変化とはいかないかもです。
私は中に合わせて少し小さめに設定しているので、最小にすると滅茶苦茶小さくなって読めない;;;
参考までに。
%での指定ってしたことないんですが、それを考えるともしかしたらそちらの方が良かったりするのかもしれませんね。
調べてみましたが、「em」指定されている方も結構いるみたいですね。
併用していることもあるみたいで・・・。
行間に関しては「em」にしているとか。
>私は中に合わせて少し小さめに設定しているので、
>最小にすると滅茶苦茶小さくなって読めない;;;
>参考までに。
参考情報ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP アンドロイドスマホでのphp echoの文字サイズ 1 2023/05/13 15:15
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
テキストエディタmiの表示文字...
-
Javascriptを用いて文字サイズ...
-
パスワード欄の"●"文字を小さく...
-
セレクトボックスの幅を指定し...
-
奇数のフォントサイズ指定について
-
<pre>タグ内のフォントサイズに...
-
【スタイルシート】 半角と全角...
-
ペイント3Dのテキストサイズ変更
-
ASP VBscript でメッセージボッ...
-
IEとfirefox、行間の表示が異...
-
コピーライト記号の表示が小さい
-
VBAでListViewのフォントを変更...
-
ホームペーじのレイアウト
-
プルダウンメニュー内のフォン...
-
font-familyで指定するフォント...
-
a:hoverでfont-weight:bold
-
HTMLでHGPゴシックEを表現する...
-
「プログラミング言語」と「マ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
-
ペイント3Dのテキストサイズ変更
-
テキストエディタmiの表示文字...
-
alertで表示させる文字サイズは...
-
コピーライト記号の表示が小さい
-
セレクトボックスの幅を指定し...
-
<pre>タグ内のフォントサイズに...
-
アンドロイドスマホでのphp ech...
-
VBAでListViewのフォントを変更...
-
英サイト(UTF-8)内での全角文字...
-
HTMLテキストボックス内の文字...
-
alertで、アイコンの変更、又は...
-
パスワード欄の"●"文字を小さく...
-
”ヒラギノ明朝Pro”をWindowsで...
-
CListCtrlで行の高さを指定した...
-
奇数のフォントサイズ指定について
-
<table></table>内のFONT指定に...
-
共有メモリについて
-
インラインフレーム内の文字の...
おすすめ情報