【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集

CSS font-size について

解決済

  • 質問者：azisaihana
  • 質問日時：
  • 回答数：7件

cssでfont-sizeを指定したのに反映されなくて困っています。（スクリーンショットをとって確認したところ）
12pxと13pxは11px
14pxと15pxは13px
16pxは15pxになってしまいます。

プログラムは次のように打ちました。お願いします。

<HTML>
<HEAD>
<TITLE>無題ドキュメント</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<STYLE type="text/css">
<!--
h1 { font-size: 12px; font-weight: normal}
h2 { font-size: 13px; font-weight: normal}
h3 { font-size: 14px; font-weight: normal}
h4 { font-size: 15px; font-weight: normal}
h5 { font-size: 16px; font-weight: normal}
-->
</STYLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">
<h1>春夏秋冬 12px</h1>
<h2>春夏秋冬 13px</h2>
<h3>春夏秋冬 14px</h3>
<h4>春夏秋冬 15px</h4>
<h5>春夏秋冬 16px</h5>
</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.7ベストアンサー

  • 回答者： pingu98
  • 回答日時：

h1～h6要素はブラウザによって様々なデフォルトスタイルが決まっています。



h1とh6では文字の大きさも違いますが、line-heightなども違う可能性があります。

使用されるフォントフェイスはレンダリングに影響します。

ブラウザによって指定されたフォントサイズのレンダリング方法は異なります。

DOCTYPEのアリ／ナシでブラウザのＣＳＳレンダリングは異なります。

ある要素の中に、日本語フォントと半角英数が混在していると、IEのfont関連のCSSはバグります(挙動詳細不明)。

そんなわけで、もう少し条件を絞って検証されるのがよいでしょう。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： katu0021
  • 回答日時：

質問の内容では、皆さんの回答のように正常に表示されます


指定内容を見るとフォント名の指定が無いですね
全角の英数字と空白では日本語に比べてそれほど良く調べて見ませんが文字の大きさが異なります
フォント名を指定したら同一になりました
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答、ありがとうございます。

いろいろ試しているのですが、解決しない状態です。
一応、フォント指定して試したのですがだめです。

環境面の方を調べています。
ありがとうございます。

通報する
お礼日時：2005/06/25 23:27

No.5

ポイントは h1 と h2 が同じという事でしょうか。



まず、ご提示のタグは Windows xp SP2 に於いて
IE6.0 , Sleipnir1.66 , Opera7.54u2 , Mozilla1.7.5 共に指定通りの結果となりました。
検証方法は、スクリーンショットをペイントで表示し個々の座標から判定しました。

また、ブラウザ側の設定で文字の大きさなどをいろいろ操作しても、
影響がないか比率が変わるだけで
異なるサイズ指定の物が同じになるという事はありませんでした。
CSS を無効にすれば h1 が一番大きくそしてだんだんと小さくなりますし・・・。

検証方法として、別のタグではどうなのか、どのタグでも 13px と指定すると 11px となるのか。
ブラウザの設定はどうか？
本当に 12px, 13px と異なる指定をしているのに同じ大きさなのか？？？

一応推測では、ブラウザ側の設定によりユーザースタイルシートとして別のスタイルシートの設定の方が有効になっている。（これは意図的に再現可能です。）
また、もしかしてそのパソコンにあるフォントの問題なのか。（表示するという仕掛けからの推測でしかなく、その検証としてはペイントで 12px, 13px と異なるサイズの文字を書いてみる位しか思いつきませんが・・・。）

どちらにしても、環境の可能性が高いので
ご自分で調べるしかないかと。
大変でしょうがご参考までに。
    • good
    • 0
    • 件
通報する
この回答へのお礼

さっそく、今から試してみます。
あいがとうございます。

通報する
お礼日時：2005/06/22 16:44

No.4

  • 回答者： HapHands
  • 回答日時：

他の方も書いていらっしゃるように環境の問題のように思われます。


プラットフォームや試されたブラウザの種類、バージョンを書かれるとより精度の高い回答が得られると思います。

ブラウザで確認されたときにブラウザの表示サイズはどうなっていますか？
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自体そういう考え方なのか、まだ何かすっきりしません。

説明している文章も何を言いたいのか、わかりにくいとおもいますがすみません。

補足日時：2005/06/22 16:13
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。
まだ、解決といった所まではいってませんが、なんとなく原因がみえてきました。

通報する
お礼日時：2005/06/22 15:56

No.3

  • 回答者： mariocec
  • 回答日時：

<H1></H1>などと使われているタグはご承知のようにこのタグの間の文字は「見出し」ですよ、という


意味です。その重要度は１が一番大きく、数字が進むにつれて重要度は下がります。
いはば大見出し・中見出し・小見出し、とでも言えば良いでしょうか。

デフォルトで文字の大きさがだいたい決まっていたと思います。
ちなみに下のソースを新規HTMLに貼り付けてみて下さい。
<BODY>
<H1>あ</H1>
<H2>あ</H2>
<H3>あ</H3>
<H4>あ</H4>
<H5>あ</H5>
<H6>あ</H6>
</BODY>
視力表のように「あ」の大きさが違っているはずです。

ですからあなたの場合、ここでソースは<H>という見出しタグを使わないで
単に<P>でくくるのが良いと思います。

<H>の役割にはもうひとつあって、HPの中身をロボットが判断するのに
<H>の中に書かれた文字は重要視するそうです。
文字検索に引っ掛かりやすい（引っ掛けて欲しい）文字をこの<H>の中に
書かれると良いと思います。もちろん文章でなくて見出し文字としてですよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

なにか、そういうことも忘れていました。このことも含めて確認します。

通報する
お礼日時：2005/06/22 13:03

No.2

IE6.0, Netscape7.1, HomepageBuilder8で試すと、それぞれのサイズがちゃんと表示されました。


タグ以前に、CSS環境の問題と思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

いろいろ確認してくれてありがとうございます。

もう少しアドバイスをもとにやってみます。

通報する
お礼日時：2005/06/22 12:58

No.1

  • 回答者： wif87
  • 回答日時：

今上記タグをコピペして、


IE、Opera、Firefoxの3つで確認してみましたが、
問題なくCSSで設定した表示になりました。

あなたの環境が問題なのかな？

原因は不明ですが、参考までに。
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速の回答ありがとうございます。

環境の面で調べてみたいと思います。
遅れてすいません。

通報する
お礼日時：2005/06/22 12:51

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報