- ベストアンサー
CSS font-sizeについての疑問
- CSSで指定したfont-sizeが反映されない問題に困っています。
- 12pxと13pxは11px、14pxと15pxは13px、16pxは15pxになってしまいます。
- プログラムの記述は正しいのですが、なぜか表示がおかしくなります。
- azisaihana
- お礼率83% (10/12)
- HTML
- 回答数7
- ありがとう数6
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
h1～h6要素はブラウザによって様々なデフォルトスタイルが決まっています。 h1とh6では文字の大きさも違いますが、line-heightなども違う可能性があります。 使用されるフォントフェイスはレンダリングに影響します。 ブラウザによって指定されたフォントサイズのレンダリング方法は異なります。 DOCTYPEのアリ／ナシでブラウザのＣＳＳレンダリングは異なります。 ある要素の中に、日本語フォントと半角英数が混在していると、IEのfont関連のCSSはバグります(挙動詳細不明)。 そんなわけで、もう少し条件を絞って検証されるのがよいでしょう。
その他の回答 (6)
- katu0021
- ベストアンサー率7% (1/13)
質問の内容では、皆さんの回答のように正常に表示されます 指定内容を見るとフォント名の指定が無いですね 全角の英数字と空白では日本語に比べてそれほど良く調べて見ませんが文字の大きさが異なります フォント名を指定したら同一になりました
- koutarou504
- ベストアンサー率44% (182/407)
ポイントは h1 と h2 が同じという事でしょうか。 まず、ご提示のタグは Windows xp SP2 に於いて IE6.0 , Sleipnir1.66 , Opera7.54u2 , Mozilla1.7.5 共に指定通りの結果となりました。 検証方法は、スクリーンショットをペイントで表示し個々の座標から判定しました。 また、ブラウザ側の設定で文字の大きさなどをいろいろ操作しても、 影響がないか比率が変わるだけで 異なるサイズ指定の物が同じになるという事はありませんでした。 CSS を無効にすれば h1 が一番大きくそしてだんだんと小さくなりますし・・・。 検証方法として、別のタグではどうなのか、どのタグでも 13px と指定すると 11px となるのか。 ブラウザの設定はどうか？ 本当に 12px, 13px と異なる指定をしているのに同じ大きさなのか？？？ 一応推測では、ブラウザ側の設定によりユーザースタイルシートとして別のスタイルシートの設定の方が有効になっている。（これは意図的に再現可能です。） また、もしかしてそのパソコンにあるフォントの問題なのか。（表示するという仕掛けからの推測でしかなく、その検証としてはペイントで 12px, 13px と異なるサイズの文字を書いてみる位しか思いつきませんが・・・。） どちらにしても、環境の可能性が高いので ご自分で調べるしかないかと。 大変でしょうがご参考までに。
お礼
さっそく、今から試してみます。 あいがとうございます。
- HapHands
- ベストアンサー率73% (19/26)
他の方も書いていらっしゃるように環境の問題のように思われます。 プラットフォームや試されたブラウザの種類、バージョンを書かれるとより精度の高い回答が得られると思います。 ブラウザで確認されたときにブラウザの表示サイズはどうなっていますか？ Win版のIEだったらpxで指定すればブラウザ側でサイズは変わらなかった記憶がありますが、Netscape7.1やOperaではブラウザ側でも変更することができます。
お礼
回答ありがとうございます。 まだ、解決といった所まではいってませんが、なんとなく原因がみえてきました。
補足
こんなところに書いていいのか分かりませんが、12px,13px設定は、文字1字ずつ取り出して測ってみると縦11px,横11pxです。 しかし、2字以上になると 12px指定の文字＝文字(11px)+行間(1px)+文字(11px) 13px指定の文字＝行間(1px)+文字(11px)+行間(2px)+文字(11px) という目の錯覚を利用して12pxと13pxの設定を表現しているのではと考えています。(行間という表現はおかしいと思いますが、すみません。) いくつか、フォントの種類とIE6とNE7.1で試しました。 パソコン自体にフォント、12pxと13pxがないのか、css自体そういう考え方なのか、まだ何かすっきりしません。 説明している文章も何を言いたいのか、わかりにくいとおもいますがすみません。
<H1></H1>などと使われているタグはご承知のようにこのタグの間の文字は「見出し」ですよ、という 意味です。その重要度は１が一番大きく、数字が進むにつれて重要度は下がります。 いはば大見出し・中見出し・小見出し、とでも言えば良いでしょうか。 デフォルトで文字の大きさがだいたい決まっていたと思います。 ちなみに下のソースを新規HTMLに貼り付けてみて下さい。 <BODY> <H1>あ</H1> <H2>あ</H2> <H3>あ</H3> <H4>あ</H4> <H5>あ</H5> <H6>あ</H6> </BODY> 視力表のように「あ」の大きさが違っているはずです。 ですからあなたの場合、ここでソースは<H>という見出しタグを使わないで 単に<P>でくくるのが良いと思います。 <H>の役割にはもうひとつあって、HPの中身をロボットが判断するのに <H>の中に書かれた文字は重要視するそうです。 文字検索に引っ掛かりやすい（引っ掛けて欲しい）文字をこの<H>の中に 書かれると良いと思います。もちろん文章でなくて見出し文字としてですよ。
お礼
回答ありがとうございます。 なにか、そういうことも忘れていました。このことも含めて確認します。
- koma1000nin
- ベストアンサー率30% (342/1133)
IE6.0, Netscape7.1, HomepageBuilder8で試すと、それぞれのサイズがちゃんと表示されました。 タグ以前に、CSS環境の問題と思います。
お礼
いろいろ確認してくれてありがとうございます。 もう少しアドバイスをもとにやってみます。
- wif87
- ベストアンサー率50% (47/94)
今上記タグをコピペして、 IE、Opera、Firefoxの3つで確認してみましたが、 問題なくCSSで設定した表示になりました。 あなたの環境が問題なのかな？ 原因は不明ですが、参考までに。
お礼
早速の回答ありがとうございます。 環境の面で調べてみたいと思います。 遅れてすいません。
お礼
回答、ありがとうございます。 いろいろ試しているのですが、解決しない状態です。 一応、フォント指定して試したのですがだめです。 環境面の方を調べています。 ありがとうございます。