font-sizeの指定方法：emと%の違い
- CSSでのfont-size指定方法には、emと%の2つがあります。emは親要素のフォントサイズを基準にした相対指定であり、%は親要素のフォントサイズを100%とした相対指定です。
- 過去の情報によると、IEではemと%の指定が異なる表示になることがあったようですが、現在では改善されている可能性があります。
- 文字コードによっても異なる表示がされるという情報もありますが、UTF-8の場合には特に問題はないと言えます。現在のブラウザでは、どちらを使用しても問題なく表示されるでしょう。
- ベストアンサー
font-size emと%の違い
いつもお世話になっています。 早速ですがcssでfont-sizeを指定する場合、emと%の違いを教えて頂きたいのです。 ぶっちゃけて言えばemと%、どちらで指定するのがいいのでしょうか？ 自分なりに調べてみたところ、emは親要素のフォントサイズを1とした相対指定、%は親要素のフォントサイズを100%とした相対指定とありましたが、それなら全く違いはないと考えていいのでしょうか？ IEだと違って見えるという情報もありましたが、これはかなり古い情報ですので現在では改善されているのでしょうか？ 文字コードによって違いが出るという話も聞きましたが、本当でしょうか？ ちなみに今はUTF-8で作成しています。 どうも明確な違いというのがイマイチよく分かりません。 現在使用されているブラウザでUTF-8のサイトを見た場合なら、どちらが向いているのか教えて下さい。 よろしくお願いします。
- exit0107
- お礼率96% (230/239)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
em指定は確かIEで細かいバグがあったはずなので、私は%で指定しています。
関連するQ&A
- フォントサイズをemで指定すると太字になってしまう。
CSSで たとえば、 font-size:1.2em; と指定し、ブラウザ（ＩＥ６）で表示させます。 ブラウザの文字サイズが「中」のときは 問題ないのですが、「最大」にすると その文字が太字になっているのですがどうしてですか？太字にしたくないのです。 また、0.9emにして、「最小」表示させると ごま粒みたいな文字になってほとんど判読不可能です。 「最小」から「最大」まで変えても、きちんと読める ＨＰにしたいと思っていますが、 いまはしょうがないのでfont-sizeは指定していません。 emがうまく使いこなせません。 こんなことで悩んでいるのは自分だけでしょうか。
- ベストアンサー
- HTML
- HP閲覧でフォントサイズを大にしたら0.9emの方が1.0emより大きく見えます
私のホームページでは外部CSSでフォントを1emと指定しています。 本文の中で注釈をつけていて、その部分ではインラインCSSで<span style="font-size:0.9em;">と少し小さくしています。 通常私自身のIE設定は文字のサイズを中にしているのですが、ある時閲覧サイズを大にしてみました。すると少し小さい筈の注釈部分が逆に本文のフォントサイズより大きくなって見えます。 フォントを全てピクセル指定すれば比率は維持出来るはずですが、エム指定は続けたいのです。 相対指定をしたままで文字サイズに拘わらず注釈部分をすこし小さく見せる為にはどうしたら良いでしょうか。よろしくお願いします。
- ベストアンサー
- ブラウザ
- CSSでfont-size、pxの絶対値、相対値に
CSSでfont-sizeを指定するとき、font-sizeを継承する相対値と絶対値があり、%やemが相対値なのは分かりますが、pxはどちらになりますか？絶対値だと思っていたのですが、相対値と書かれているものをちらほら見たので気になりました。
- ベストアンサー
- HTML
- 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に読み込みしています。
- ベストアンサー
- HTML
- font-size: 0.1emの意味は？
movable typeでブログを立ち上げようと思っています。 cssを書き換えているんですが、「font-size: 0.1em」の意味はわからなくて困っています。 「font-size: ○px」とはどう違うのでしょうか？ フォントサイズをより小さくするにはどうしたらよいのでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理
ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理と方法は？ 例えばIEではちょうどよいサイズ（作成者が10ptを指定してその通りのサイズ）で表示されているのが、FireFoxでは小さく表示されてしまうという問題は、CSSを使えば解決できるそうですが、それはどのような原理で解決できるのでしょうか。また、どのような設定をすればよいのでしょうか。 私はCSSファイルの役目は指定箇所（クラス）を指定フォント/サイズで表示するよう指示するもの、という程度のことは分かっていますが、HTMLファイル上で直接10ptと指定するのと、CSSで10ptと指定するのではどう違うのか。または、数値ではなくて相対的なサイズを指定する必要があるのでしょうか？ その辺の原理が分かっていませんので、ごく簡潔に教えていただけるとありがたいです。 また、分かりやすいサイトも教えていただければありがたいです。
- ベストアンサー
- その他(ソフトウェア)
- CSS） emでのサイズ指定
CSS初心者です。 何のサイズをem単位で指定できるのか調べたくて、適当に h1,h2,h3,h4,p { font-size: 2em; margin: 1em; padding: 1em; margin-border: 1px; border-color: #000000; ligh-height: 1em; border-width: 1px; } としました。 すると、すべてのフォントサイズが同じになりました。 それぞれのヘディングが倍のサイズになると思っていたのですが、なぜこうなってしまったのでしょうか？ また、マージンのサイズ、パッデイングのサイズを視覚的に確認したいのですが、どうすればいいのでしょうか？
- ベストアンサー
- CSS
- フォントサイズ変更に合わせテーブルの高さを変えたい
フォントサイズ変更に合わせテーブルの高さを変えたい フォントサイズ変更に合わせテーブルのセルの高さを変えたいのですが、 どうすればよいでしょうか？ ＜現状＞ ・HTML <td class="fontsizechange"> ・CSS .fontsizechange { font-size: 500%; } ・この状態だと、テーブルセルから、フォントが飛び出してしまいます ・フォントサイズの大きさに合わせ、セル高さを連動させるにはどうすればよいでしょうか？ ・もし難しい場合は、テーブルセルの高さを、(固定値ではなく)相対的に大きくするにはどうすればよいでしょうか？ ・height:500%;？ ・height:500em;？ ・libe-height:1.4;？
- ベストアンサー
- CSS
- CSSでブラウザ毎のフォントサイズを統一するには
IEとFireFoxなど、ブラウザによりフォントの初期サイズが違います。 IEのMideumがFireFoxではSmallに該当するようです。 pxなどの絶対サイズを利用せず、相対サイズで初期サイズをMidiumに統一対応したいと考えています。 何か良いcssハック方法はありませんでしょうか。
- ベストアンサー
- HTML
- cssでフォントサイズを相対指定。→NNで小さすぎ
webデザイナーを目指しただ今、ＨＰ制作勉強中の者です。 Win＆Mac（IE5.5、NN4.7、7.0)で確認作業しています。 IE、NNで共にフォントサイズの固定をせずに、尚且つ、IEでの表示文字サイズ「中」を基準として、程よい大きさで表示をさせたいと思い、cssで相対サイズの font-size:x-small を指定しました。 IEではうまい具合にいくのですが、ＮＮの方で、大きさは可変するものの、デフォルト(文字の大きさ100%)で小さすぎになってしまい、どうにかこのような状況を避け、下記のような条件でフォントサイズを制御したいのですがどんな方法がありますでしょうか？ ●NN、IEともにサイズ固定させたくない ●NNデフォルトで、読みやすいくらいのフォントサイズで表示したい ptで指定すると、IEでは固定されてしまいます。 ユーザーがNNのブラウザの設定をいじって、デフォルトサイズを変更しない限り無理なのでしょうか？ また、IEとNNで別々のcssを適用させるなどの方法が存在するのでしょうか？ NNでの表示は目をつぶりますか？ 又、商業的なサイトを制作されている方は、文字サイズを固定させたくない場合にどんな指定をしますか？
- ベストアンサー
- HTML
お礼
やはりemを用いた場合、IEだといろいろ問題があるようですね。 安全を期して%を使うことにします。 回答ありがとうございました。