- 締切済み
このhtmlソースのFontの相対指定における問題点を教えて下さい。
このhtmlソースのFontの相対指定における問題点を教えて下さい。 html初心者です。（CSSは、まだです。） 文字フォントを相対値（単位は、％）で書いているのですが、うまくいきません。 （諸事情により、CSSを使わずに表示させなければなりません…） 作成したいWebページのイメージ図があり、 そのイメージ図で表示されている文字と同じフォントサイズ にするため相対値で設定したのですが <font size="4%"> でちょうど同じ大きさになってしまいました。 しかも、5以降の大きい数字の値にすると表示されるフォントも4%より大きくなるのですが、 そのサイズは5%でも50%でも100%でも全部同じ大きさで変わりません。 普通、相対値の場合 100% が普通の大きさというか基準の大きさになると思うのですが 今、コーディングしているページではそうはいきません。なぜなのでしょうか？ また、どこをどう変更すれば相対値 100% と書いた時、基準となる大きさを表示させられるのでしょうか。 今回、コーディングにおいて条件が付いています。それは、以下の通りです。 ・CSSは、使わない。 ・basefont sizeは、指定しない。 ・相対値の単位は、％とする。 また、よろしければFontの相対指定について基準・推奨設定方法も教えて下さい。 以下に作成中のファイルから抜粋したソースを示します。 ブラウザで表示する場合、エンコードを Unicode(UTF-8) で表示させて下さい。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>システム</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/" /> </head> <body style="margin-top : 0px"> <table align="center" style="margin-top : 0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <table style="margin-top : 0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <!--フォントサイズを相対値で指定--> <font size="4%"> <a href=>システム</a> </font></td> </tr> </table> </td> </tr> </table> </body> </html> 以上、よろしくお願いします。
- freewalk59
- お礼率53% (7/13)
- HTML
- 回答数5
- ありがとう数24
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- key-child
- ベストアンサー率54% (25/46)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
- key-child
- ベストアンサー率54% (25/46)
> ・CSSは、使わない。 ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか？ > よろしければFontの相対指定について基準・推奨設定方法も教えて下さい。 font要素のsize属性へ指定できる値は1から7までの数字。 (%値は指定できない。) もしくは、+1や-1など。 font要素しか使用できないなら、相対値で指定したいならこっちになる。 HTML 4.01仕様書(邦訳) FONT要素 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#edef-FONT 仕様書にも書いてありますが、font要素の使用は推奨しません。 推奨する方法は、下記ぐらいしかありません。 ・ルート要素に文字の大きさの指定はしないこと。 正しい知識を得たい人の爲のCSS2リファレンス font-size（フォントの大きさ） http://hp.vector.co.jp/authors/VA022006/css/fonts.html#font-size ・相対的な単位を使用すること。(pxは例外として使用しないこと) 正しい知識を得たい人の爲のCSS2リファレンス 相対的な単位 http://hp.vector.co.jp/authors/VA022006/css/data.html#relative-units > 普通、相対値の場合 100% が普通の大きさというか基準の大きさになると思うのですが 違います。 相対とは、継承されてきた値を基準としてます。 ですので、100% = 「基準の大きさ」にはなりません。 下記のソースを表示してみればわかると思いますが、どちらも同じ大きさになります。 <p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p>
お礼
ご回答ありがとうございます。 > ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか？ 確かに、特定の要素にスタイルを記述しているのでCSSを使っておりました。失礼しました。 > font要素しか使用できないなら、相対値で指定したいならこっちになる。 font要素で相対値で指定する場合でも、%値で指定できておりますので > font要素のsize属性へ指定できる値は1から7までの数字。 > (%値は指定できない。) > もしくは、+1や-1など。 というのが、よくわかりません。 > 相対とは、継承されてきた値を基準としてます。 > ですので、100% = 「基準の大きさ」にはなりません。 僕の場合だとこの継承されてきた値というのは、各ユーザーエージェントの環境に依存 しているデフォルトの文字の大きさということになりますよね。 <p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p> 以上のソース、表示すると確かに両方とも同じ大きさになりました。 推奨設定方法も教えて下さり、ありがとうございました。
■ＦＯＮＴ-ＳＩＺＥの相対指定 いちおう我流ですが。。 ＦＯＮＴのデフォルトサイズはブラウザに依存します。 また絶対値として、ＰＸ指定した場合でも、ブラウザによっては拡大ができます。 ** さて、今回は％指定ということですので、まず、bodyで80%を指定してみてください。 この指定で、<p>タグのサイズを決めておきます。 あとは、この設定をベースに、各タグで大きさを指定してください。 大きくしたいタグ h1 h2 h3 h4 など。。その都度に。。 <h2 style="font-size:90%;">見出しタグ</h2> など。。 もし、具合がわるいなら、bodyの指定値を変更すれば全体が変わると思います。 （しかし。。４％では、見えないと思いますよ。）
お礼
ご回答ありがとうございます。 style="font-size:90%;" のようにスタイルでフォントのサイズを決めるのは、思いつきませんでした。<body>タグで相対値を入力しなくても、以下のようにシステムという文字を囲む<td>タグ内でフォントサイズを100%で入力すると普通の大きさで表示されました！ <tr> <td valign="top" style="font-size:100%;"> <!--フォントサイズを相対値で指定--> <a href=>システム</a> </td> </tr>
補足
追記です。 確かに４％では、読めないほど小さく表示されてしまいました・・・
- Cupper
- ベストアンサー率32% (2123/6444)
ひょっとして Internet Explorer を使って表示させていませんか。 Microsoft社のブラウザは正式なHTMLに対応していないので誤動作します。 Firefox や Opera など他のブラウザで表示させてみてはいかがでしょう。
補足
ご回答ありがとうございます。 Firefoxを使って表示させているのですが、うまくいきません…
お礼
ご回答ありがとうございます。 > ・CSSは、使わない。 確かに部分的にCSSを適用していました。CSSを使わない限り、フォントサイズは調整 できないみたいですね。 > それ以外にもXHTMLなのに、非推奨のfont要素、alignやvalign,font-sizeの非推奨属性があるのはなぜ？ やりたいことが、その非推奨以外に何をどう使えば良いのかわからなかったので使用しています。 教えていただいたリンク先を参考にもう一度考えてみます。