![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
この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件)
- 最新から表示
- 回答順に表示
No.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>
No.4
- 回答日時:
あなたが我流でどんなルールほ決めようと勝手ですが、それを他者が期待通りに解釈せよ・・なんて無理です。
・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 … )
を再読してください。
与えられた条件で、あなたが期待される表示結果を得ることは全く持って不可能です。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
初心者ということですが、ウェブの世界では初心者も経験者も全く平等です。初心者が作成したページだから、そのように解釈して表示しようなんてしてはくれません。
必要なことは、変なマニュアル(を参考にされているようですが)ではなく、まっとうなものをきちんと学んでください。必要なら仕様書を必ずチェックする。その繰り返ししかありません。
ご回答ありがとうございます。
> ・CSSは、使わない。
確かに部分的にCSSを適用していました。CSSを使わない限り、フォントサイズは調整
できないみたいですね。
> それ以外にもXHTMLなのに、非推奨のfont要素、alignやvalign,font-sizeの非推奨属性があるのはなぜ?
やりたいことが、その非推奨以外に何をどう使えば良いのかわからなかったので使用しています。
教えていただいたリンク先を参考にもう一度考えてみます。
No.3
- 回答日時:
> ・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>
ご回答ありがとうございます。
> ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか?
確かに、特定の要素にスタイルを記述しているのでCSSを使っておりました。失礼しました。
> font要素しか使用できないなら、相対値で指定したいならこっちになる。
font要素で相対値で指定する場合でも、%値で指定できておりますので
> font要素のsize属性へ指定できる値は1から7までの数字。
> (%値は指定できない。)
> もしくは、+1や-1など。
というのが、よくわかりません。
> 相対とは、継承されてきた値を基準としてます。
> ですので、100% = 「基準の大きさ」にはなりません。
僕の場合だとこの継承されてきた値というのは、各ユーザーエージェントの環境に依存
しているデフォルトの文字の大きさということになりますよね。
<p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p>
以上のソース、表示すると確かに両方とも同じ大きさになりました。
推奨設定方法も教えて下さり、ありがとうございました。
No.2
- 回答日時:
■FONT-SIZEの相対指定
いちおう我流ですが。。
FONTのデフォルトサイズはブラウザに依存します。
また絶対値として、PX指定した場合でも、ブラウザによっては拡大ができます。
**
さて、今回は%指定ということですので、まず、bodyで80%を指定してみてください。
この指定で、<p>タグのサイズを決めておきます。
あとは、この設定をベースに、各タグで大きさを指定してください。
大きくしたいタグ h1 h2 h3 h4 など。。その都度に。。
<h2 style="font-size:90%;">見出しタグ</h2> など。。
もし、具合がわるいなら、bodyの指定値を変更すれば全体が変わると思います。
(しかし。。4%では、見えないと思いますよ。)
ご回答ありがとうございます。
style="font-size:90%;" のようにスタイルでフォントのサイズを決めるのは、思いつきませんでした。<body>タグで相対値を入力しなくても、以下のようにシステムという文字を囲む<td>タグ内でフォントサイズを100%で入力すると普通の大きさで表示されました!
<tr>
<td valign="top" style="font-size:100%;">
<!--フォントサイズを相対値で指定-->
<a href=>システム</a>
</td>
</tr>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
全角半角含めて等幅で表示したい
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
API Sleep関数について
-
テーブルの中のフォントサイズ...
-
<pre>にフォントを・・・。
-
<input type="file"> の幅
-
指定の文字だけ色を変える
-
Format 関数 表示書式指定文字...
-
jquery.validationEngine.jsカ...
-
ホームページビルダー作成HPがi...
-
iframe 文字化け
-
このhtmlソースのFontの相対指...
-
テキストエリア内の文字の装飾
-
テーブル内のフォントの指定は...
-
HTMLで特定の文字だけ色を変え...
-
タグの大文字と小文字
-
<pre>のフォントサイズを指定す...
-
文章の一部分だけ文字色を変え...
-
CSSで14px/1.4の部分の記述は正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
WEBサイトの作成で、imgタグに...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
全角半角含めて等幅で表示したい
-
ホームページビルダー作成HPがi...
-
テキストファイルの行を指定し...
-
background-color: #ddd;の意味...
-
リンク文字
-
Format 関数 表示書式指定文字...
-
fontサイズ指定の ”-(マイナ...
-
HTMLで特定の文字だけ色を変え...
-
CSSを一部無効にしたい
-
指定の文字だけ色を変える
-
上付き文字と下付き文字を同時...
-
Excel VBA メール作成について ...
-
遊明朝のプロポーショナルフォ...
-
テキストエリア内の文字の装飾
-
jquery.validationEngine.jsカ...
-
テキストボックス途中で切れて...
おすすめ情報