電子書籍の厳選無料作品が豊富!

この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-transitio …
<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>


以上、よろしくお願いします。

A 回答 (5件)

> > font要素しか使用できないなら、相対値で指定したいならこっちになる。


>
> font要素で相対値で指定する場合でも、%値で指定できておりますので

言ってることがだんだんわからなくなってきたのですが、
質問時に言ってる内容は%値での指定はできてないのですよね?

「そのサイズは5%でも50%でも100%でも全部同じ大きさで変わりません。」

size属性に指定してできているなら、確認してみますので、
どういう風に書いているのか教えてください。


> > font要素のsize属性へ指定できる値は1から7までの数字。
> > (%値は指定できない。)
>
> > もしくは、+1や-1など。
>
> というのが、よくわかりません。

<p><font size="1">あいうえお</font><font size="2">かきくけこ</font><font size="3">さしすせそ</font><font size="4">たちつてと</font><font size="5">なにぬねの</font><font size="6">はひふへほ</font><font size="7">まみむめも</font></p>
<p><font size="-2">あいうえお</font><font size="-1">かきくけこ</font>さしすせそ<font size="+1">たちつてと</font><font size="+2">なにぬねの</font><font size="+3">はひふへほ</font><font size="+4">まみむめも</font></p>
    • good
    • 0

あなたが我流でどんなルールほ決めようと勝手ですが、それを他者が期待通りに解釈せよ・・なんて無理です。


・CSSは、使わない。
  なのに、headでは<meta http-equiv="Content-Style-Type" content="text/css" />と
 していして、HTMLでも<body style="margin-top : 0px">,<table align="center" style="margin-top : 0" cellspacing="0" cellpadding="0">としているのは???

・basefont sizeは、指定しない。
  指定しない場合は完全にユーザーエージェントに従うけど、ユーザーエージェントはさまざま
・相対値の単位は、%とする。
  %は、基準値を決めない限り相対サイズそのものです。

 それ以外にもXHTMLなのに、非推奨のfont要素、alignやvalign,font-sizeの非推奨属性があるのはなぜ?
×style="margin-top : 0" cellspacing="0" cellpadding="0"
○style="margin-top:0px;border-collapse:collapse"
 いずれにしても
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 を再読してください。

 与えられた条件で、あなたが期待される表示結果を得ることは全く持って不可能です。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
初心者ということですが、ウェブの世界では初心者も経験者も全く平等です。初心者が作成したページだから、そのように解釈して表示しようなんてしてはくれません。
 必要なことは、変なマニュアル(を参考にされているようですが)ではなく、まっとうなものをきちんと学んでください。必要なら仕様書を必ずチェックする。その繰り返ししかありません。
    • good
    • 0
この回答へのお礼

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

> ・CSSは、使わない。
確かに部分的にCSSを適用していました。CSSを使わない限り、フォントサイズは調整
できないみたいですね。

> それ以外にもXHTMLなのに、非推奨のfont要素、alignやvalign,font-sizeの非推奨属性があるのはなぜ?

やりたいことが、その非推奨以外に何をどう使えば良いのかわからなかったので使用しています。

教えていただいたリンク先を参考にもう一度考えてみます。

お礼日時:2010/06/21 07:03

> ・CSSは、使わない。



ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか?


> よろしければFontの相対指定について基準・推奨設定方法も教えて下さい。

font要素のsize属性へ指定できる値は1から7までの数字。
(%値は指定できない。)

もしくは、+1や-1など。
font要素しか使用できないなら、相対値で指定したいならこっちになる。

HTML 4.01仕様書(邦訳) FONT要素
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

仕様書にも書いてありますが、font要素の使用は推奨しません。

推奨する方法は、下記ぐらいしかありません。

・ルート要素に文字の大きさの指定はしないこと。
正しい知識を得たい人の爲のCSS2リファレンス font-size(フォントの大きさ)
http://hp.vector.co.jp/authors/VA022006/css/font …

・相対的な単位を使用すること。(pxは例外として使用しないこと)
正しい知識を得たい人の爲のCSS2リファレンス 相対的な単位
http://hp.vector.co.jp/authors/VA022006/css/data …


> 普通、相対値の場合 100% が普通の大きさというか基準の大きさになると思うのですが

違います。
相対とは、継承されてきた値を基準としてます。
ですので、100% = 「基準の大きさ」にはなりません。

下記のソースを表示してみればわかると思いますが、どちらも同じ大きさになります。
<p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p>
    • good
    • 0
この回答へのお礼

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

> ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか?

確かに、特定の要素にスタイルを記述しているのでCSSを使っておりました。失礼しました。


> font要素しか使用できないなら、相対値で指定したいならこっちになる。

font要素で相対値で指定する場合でも、%値で指定できておりますので

> font要素のsize属性へ指定できる値は1から7までの数字。
> (%値は指定できない。)

> もしくは、+1や-1など。

というのが、よくわかりません。

> 相対とは、継承されてきた値を基準としてます。
> ですので、100% = 「基準の大きさ」にはなりません。

僕の場合だとこの継承されてきた値というのは、各ユーザーエージェントの環境に依存
しているデフォルトの文字の大きさということになりますよね。

<p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p>

以上のソース、表示すると確かに両方とも同じ大きさになりました。
推奨設定方法も教えて下さり、ありがとうございました。

お礼日時:2010/06/20 10:35

■FONT-SIZEの相対指定


いちおう我流ですが。。

FONTのデフォルトサイズはブラウザに依存します。
また絶対値として、PX指定した場合でも、ブラウザによっては拡大ができます。

**
さて、今回は%指定ということですので、まず、bodyで80%を指定してみてください。
この指定で、<p>タグのサイズを決めておきます。

あとは、この設定をベースに、各タグで大きさを指定してください。
大きくしたいタグ h1 h2 h3 h4 など。。その都度に。。

<h2 style="font-size:90%;">見出しタグ</h2> など。。

もし、具合がわるいなら、bodyの指定値を変更すれば全体が変わると思います。


(しかし。。4%では、見えないと思いますよ。)

この回答への補足

追記です。

確かに4%では、読めないほど小さく表示されてしまいました・・・

補足日時:2010/06/20 10:06
    • good
    • 0
この回答へのお礼

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

style="font-size:90%;" のようにスタイルでフォントのサイズを決めるのは、思いつきませんでした。<body>タグで相対値を入力しなくても、以下のようにシステムという文字を囲む<td>タグ内でフォントサイズを100%で入力すると普通の大きさで表示されました!

<tr>
<td valign="top" style="font-size:100%;">
<!--フォントサイズを相対値で指定-->
<a href=>システム</a>
</td>
</tr>

お礼日時:2010/06/20 10:02

ひょっとして Internet Explorer を使って表示させていませんか。


Microsoft社のブラウザは正式なHTMLに対応していないので誤動作します。
Firefox や Opera など他のブラウザで表示させてみてはいかがでしょう。

この回答への補足

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

Firefoxを使って表示させているのですが、うまくいきません…

補足日時:2010/06/20 03:21
    • good
    • 0

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