- ベストアンサー
CSSでブラウザ毎のフォントサイズを統一するには
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
IE6には標準準拠モードと後方互換モードの２種類のモードがあり、何もしないと後方互換モードになっています。 この後方互換モードが標準に準拠していないため、標準に準拠しているFirefox等と表示が違ってしまう原因になっています。 さらに言うと、Firefoxの表示がIEと違うのではなく、IEの表示が間違っているということです。 IE6で標準準拠モードにするには、HTMLにDOCTYPEを宣言する必要があります。詳しくは参考URLを参照下さい。 端的に言いますと、HTMLの頭に <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> を付ければいいということです。 また、標準準拠モードにした場合はフォントサイズ以外も標準に準拠した形になるため、デザインが少し変わる場合がありますので注意が必要です。 最後に個人的な意見ですが、cssハックを使ってしまうと今後ブラウザ(の新バージョン)が出るたびにデザインを確認する作業が発生しますので、cssハックの使用は慎重にしたほうがよいと思います。
その他の回答 (2)
- ratoa
- ベストアンサー率40% (28/69)
何故サイズを合わせる必要があるのか謎ですが、フォントの初期サイズなんて見る側が決める事なので、webページのフォントサイズは常に変化するという前提で割り切った方がいいと思います。
お礼
明らかに読みにくいサイズになるからです。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
http://www6.plala.or.jp/go_west/nextcss/tip/ua_blnc.htm が参考になるかも・ 要点は、あるブラウザではエラーの為に無効になり、あるブラウザでは、有効に使えるためにそれぞれのブラウザに応じたＣＳＳを適用させようということです。
お礼
ありがとうございます。
関連するQ&A
- ブラウザによって異なるフォントサイズについて
ホームページを制作していますが、ブラウザによって文字のサイズが見かけ上違ってしまいます。 具体的には、フォントのサイズが ＩＥ８＜Ｓａｆａｒｉ＜Ｆｉｒｅｆｏｘ３ になっています。 価格．ｃｏｍなどの有名サイトを見ていると、どのブラウザでも同じサイズに見えます。 スタイルシートに body { font:13px; *font-size:small; *font:x-small; } を書き加えてみましたがあまり変化はありませんでした。 どのようにすればいいのでしょうか？
- ベストアンサー
- HTML
- body font-size:13px; IE6
CSSライブラリ YUIの font-size:13px; からの font-size:100%; のセットで、 /* YUIのCSS */ body{ font-size: 13px; *font-size: small; *font: x-small; } div{font-size: 100%;} この場合の以下は、 ------------------- *font-size: small; *font: x-small; ------------------- IE6用の font-size: small と font-size: x-small の為にあるのでしょうか？ それなら、CSSでfont-size: small; と font-size: x-small;を使わないで、font-size: 85%;とか使えば上記のハック不要って事でしょうか？ <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 上記の様なXHTML,１行目xml宣言付きの場合、 IE6用の *font-size: small; *font: x-small; を書いても font-size: small と font-size: x-small が小さくならないので、 xml宣言ありでIE6では標準にならないのでハック不要って事ですか？ IE6で見てもハックを付けても消しても同じなんですが・・・ なんか間違っているのでしょうか？
- ベストアンサー
- HTML
- CSSでfont-size、pxの絶対値、相対値に
CSSでfont-sizeを指定するとき、font-sizeを継承する相対値と絶対値があり、%やemが相対値なのは分かりますが、pxはどちらになりますか？絶対値だと思っていたのですが、相対値と書かれているものをちらほら見たので気になりました。
- ベストアンサー
- HTML
- IE8ブラウザ側で文字サイズ変更できない
Yahoo!開発チームが検証したフォントサイズ統一のCSSとして下記を記述しています。 body { font: 13px 'ＭＳ Ｐゴシック', 'MS-PGothic'; *font-size: small; *font: x-small; } 何故かIE8ブラウザ側の機能で文字サイズを変更しようとすると反応しません。 何かIE8用に記述が必要でしょうか？
- ベストアンサー
- HTML
- cssで最適なfont-sizeの指定は？
（ブログのカスタマイズ初心者です。過去ログを探しても見つからなかったので、質問させて下さい） cssでのfont-sizeの記述は、どのような形が最適でしょうか？ px, em, ％, mediamやsmall、その他、単位が色々あって、迷ってしまいます。 pxで指定するのが一般的な気がしますが、IEで文字サイズを変えた時に、変わらないのが不便な気がします。 body {font-size: small; line-height: 160%; } のような形が良いように思いますが、あまり見かけません。 皆様は、どのようにしていらっしゃるのか、教えて頂けたらと思います。 よろしくお願い致します。
- ベストアンサー
- ブログ
- ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理
ブラウザによりフォントサイズが異なってしまう問題をCSSで解決する原理と方法は？ 例えばIEではちょうどよいサイズ（作成者が10ptを指定してその通りのサイズ）で表示されているのが、FireFoxでは小さく表示されてしまうという問題は、CSSを使えば解決できるそうですが、それはどのような原理で解決できるのでしょうか。また、どのような設定をすればよいのでしょうか。 私はCSSファイルの役目は指定箇所（クラス）を指定フォント/サイズで表示するよう指示するもの、という程度のことは分かっていますが、HTMLファイル上で直接10ptと指定するのと、CSSで10ptと指定するのではどう違うのか。または、数値ではなくて相対的なサイズを指定する必要があるのでしょうか？ その辺の原理が分かっていませんので、ごく簡潔に教えていただけるとありがたいです。 また、分かりやすいサイトも教えていただければありがたいです。
- ベストアンサー
- その他(ソフトウェア)
- ブログとブラウザについて
先日、ライブドアでブログスペースを借り、ブログを始めました。 ブログを付けるのは初めてなもので分からないことだらけなんですが、 IEでブログを閲覧した場合と、Firefoxで閲覧した場合に、レイアウトにズレが生じてしまいます。 常にFirefoxを使用しており、Firefoxでしか自分のブログのレイアウトを確認していませんでした。 ですが、今日IEで閲覧したところレイアウトがすごくズレていて・・・。 特に記事本文がガタガタになっていました。 改行を考慮して1行に文章をまとめていたのに、IEでは2行にわたって本文が続いていたりしていて。 デザインは"デフォルト2005 (ブラック)"を使用しており、カスタマイズ出来るのでCSSを確認してみました。 .main,.mainmore{ font-size:x-small; margin:10px 20px 0; text-align:left; 最初、上記のようになっていたのを、 .main,.mainmore{ font-size:9; margin:10px 20px 0; text-align:left; ブラウザ間でCSS内の"x-large"や"x-small"にズレがあるのかと思ったもので、上記のように直しました。 するとIEではレイアウトがきれいに整ったんですが、Firefoxでは文字が小さすぎて非常に読みづらくなってしまいました。 フォントサイズには、ブラウザ間で差があるのでしょうか。 上の方法はIEで見やすくなったのは良いんですが、Firefoxで見にくくなってしまうのはどうも・・・。 既にたくさんの記事を書いたので、新たに行を整え直すというのは困難を極めます。 同じフォント、同じフォントサイズにも関わらず、ブラウザによって微妙に生じてしまうズレを無くすのは不可能なのでしょうか。 ちなみに、CSSの知識については皆無なので、上記のようにフォントサイズを変えるくらいしか出来ません。 分からないところがあれば訊いてください。 難なく補足します。 贅沢な質問かもしれませんが、回答よろしくお願いします。
- ベストアンサー
- ブログ
- cssの今、一番旬なブラウザごとに違うcssをかける方法
現在４つのブラウザでほぼ同じような動作・見栄えをするサイトを制作しております。 ４つのブラウザとは（opera ie6 ie7 firefox）です。 そこで、現在、ie6だけで生じる表示崩れがあり、 そのcssの解決方法も発見したのですが、 それを解決すると今度は逆に、opera,ie7,firefoxでエラーが起きてしまいます。 読み込んでいるのは、一つの外部cssファイル、main.cssです。 現在考えられる解決方法としては、 １．ie6だけにcssを掛けるハック？ この場合、どのようにハックをかければいいのでしょうか。 色々しらべましたが、スターハックなど、現在使って良いハックというのは何になるのでしょうか。 具体的なcssコードは、以下です。 #pull a:hover{ display:block; /*以下ie6だけに指示したい命令 現状コメントアウトしています*/ /*margin-bottom:-20px;*/ } ２.ie6だけ別の外部cssファイルを読み込ませる。 ブラウザ毎に違うcssファイルを読み込ませることってできるのでしょうか。 （javascriptで判別するのでしょうか？） ie6 なら、main_ie6.cssを読み込み、 それ以外のブラウザなら main.cssを読み込ませる 一番ベストな方法を教えていただければと思います。
- ベストアンサー
- HTML
- ブラウザによってcssを分けることは可能なの？
レスポンシブウェブデザインの様に ブラウザによってcssを分けることは可能なのでしょうか？ IEなら１００px、ファイアフォックスなら５０pxなど。
- ベストアンサー
- CSS
- cssで指定した文字の大きさがIE6とIE7で違う
cssでレイアウトを指定したサイトを作りました。 IE6、Opera9、Firefox2でうまく表示ができました（微妙にFirefoxだけ文字の大きさが小さいですが、ほぼレイアウトにあっています）。 が、先日IE7で確認するとフォントサイズが大きくなっていました。 cssではfont-sizeを、bodyが12px、各id、classはそれぞれ11px、10pxとしました。 IE7だと13pxくらいに見えてしまい、レイアウトをはみ出て表示されています。 IE7をIE6と同じフォントサイズにするにはどのように指定すればよいのでしょうか？ ちなみに文字の大きさは固定でブラウザで大きさを変更できないようにしたいのです。 すみませんがよろしくお願いします。
- 締切済み
- HTML
お礼
大変参考になりました。 ありがとうございます。