締切済み

このhtmlソースのFontの相対指定における問題点を教えて下さい。

2010/06/20 03:08

この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)

2010/06/20 21:00 回答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>

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/06/20 10:02 回答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-html401j/cover.html#toc ) REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc ) 　を再読してください。　与えられた条件で、あなたが期待される表示結果を得ることは全く持って不可能です。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 初心者ということですが、ウェブの世界では初心者も経験者も全く平等です。初心者が作成したページだから、そのように解釈して表示しようなんてしてはくれません。　必要なことは、変なマニュアル(を参考にされているようですが)ではなく、まっとうなものをきちんと学んでください。必要なら仕様書を必ずチェックする。その繰り返ししかありません。

質問者

お礼 2010/06/21 07:03

ご回答ありがとうございます。 > ・CSSは、使わない。確かに部分的にCSSを適用していました。CSSを使わない限り、フォントサイズは調整できないみたいですね。 > それ以外にもXHTMLなのに、非推奨のfont要素、alignやvalign,font-sizeの非推奨属性があるのはなぜ？やりたいことが、その非推奨以外に何をどう使えば良いのかわからなかったので使用しています。教えていただいたリンク先を参考にもう一度考えてみます。

key-child
ベストアンサー率54% (25/46)

2010/06/20 08:27 回答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-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>

質問者

お礼 2010/06/20 10:35

ご回答ありがとうございます。 > ソースを拝見すると、CSSを使用してますが、あなたの言うCSSとは何を指しているのですか？確かに、特定の要素にスタイルを記述しているのでCSSを使っておりました。失礼しました。 > font要素しか使用できないなら、相対値で指定したいならこっちになる。 font要素で相対値で指定する場合でも、%値で指定できておりますので > font要素のsize属性へ指定できる値は1から7までの数字。 > (%値は指定できない。) > もしくは、+1や-1など。というのが、よくわかりません。 > 相対とは、継承されてきた値を基準としてます。 > ですので、100% = 「基準の大きさ」にはなりません。僕の場合だとこの継承されてきた値というのは、各ユーザーエージェントの環境に依存しているデフォルトの文字の大きさということになりますよね。 <p style="font-size: 120%;">あいうえお<em style="font-size: 100%;">かきくけこ</em></p> 以上のソース、表示すると確かに両方とも同じ大きさになりました。推奨設定方法も教えて下さり、ありがとうございました。

noname#119957

2010/06/20 03:41 回答No.2

■ＦＯＮＴ-ＳＩＺＥの相対指定いちおう我流ですが。。ＦＯＮＴのデフォルトサイズはブラウザに依存します。また絶対値として、ＰＸ指定した場合でも、ブラウザによっては拡大ができます。 ** さて、今回は％指定ということですので、まず、bodyで80%を指定してみてください。この指定で、<p>タグのサイズを決めておきます。あとは、この設定をベースに、各タグで大きさを指定してください。大きくしたいタグ h1 h2 h3 h4 など。。その都度に。。 <h2 style="font-size:90%;">見出しタグ</h2>　など。。もし、具合がわるいなら、bodyの指定値を変更すれば全体が変わると思います。（しかし。。４％では、見えないと思いますよ。）

質問者

お礼 2010/06/20 10:02

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

質問者

補足 2010/06/20 10:06

追記です。確かに４％では、読めないほど小さく表示されてしまいました・・・

Cupper
ベストアンサー率32% (2123/6444)

2010/06/20 03:19 回答No.1

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

質問者

補足 2010/06/20 03:21

ご回答ありがとうございます。 Firefoxを使って表示させているのですが、うまくいきません…

関連するQ&A

“タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」よろしく、お願いします。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
CSSでフォントの大きさを指定するとき
CSSでフォントの大きさを相対指定したいのですが、Bodyでフォントサイズを８０％にすると、テーブルの中はもとのままの１００％の大きさです。そこで、Tableのフォントサイズも８０％にすると、0.8*0.8したようにさらに小さくなってしまいます。たとえば、下のようなページだと ----------------------------- <BODY> あいうえお<BR> <TABLE> <TR> <TD>アイウエオ<BR> <TABLE> <TR> <TD>aiueo<BR> </TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> ----------------------------- 「あいうえお」が８０％の大きさで、「アイウエオ」はさらに小さく、「aiueo」はゴミのように小さくなってしまいます。どのように指定すれば良いのでしょうか？よろしくお願いいたします。
- ベストアンサー
- CSS
Firefox2で縦方向に隙間が出来てしまいます。
Firefox2で縦方向に隙間が出来てしまい、修正方法がわかりませんでした。そのため、何かご存知の方がいらっしゃいましたら、アドバイスいただければと思います。【症状】下記のソースを実行すると、IE6、IE7、Safari3では「まみむめも」の行が男性の口の辺りにきます。一方Firefox2では「まみむめも」の行が男性の手の辺りに来ます。見た目的にはFirefox2では他の3つのブラウザと違い、縦方向に隙間が余分に入っているように見受けられます。【ソースコード(index.html)】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <style type="text/css">  </style> </head> <body> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td>あいうえお</td> </tr> <tr> <td>かきくけこ</td> </tr> <tr> <td>さしすせそ</td> </tr> <tr> <td>たちつてと</td> </tr> <tr> <td>なにぬねの</td> </tr> <tr> <td>はひふへほ</td> </tr> <tr> <td>まみむめも</td> </tr> </tbody> </table> </body> </html> どうかよろしくお願いします。
- ベストアンサー
- HTML
フォントと文字サイズの指定方法
HTML初心者です。どなたか助言ください。以下のソースのようなテンプレHTMLを変更しないといけなくなりました。以下のソース部分のフォントと文字サイズを指定するにはどのようにすればよろしいでしょうか？ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title><?=$item_title?></title> </head> <body> <div style="width:100%;text-align:center"> <div id="wrapper" style="margin:0px auto;font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#000;text-align:left;"> %IMAGES% <div class="sub_tit" style="padding-left:5px;height:25px;line-height:25px;border-left:solid 20px;color:#2214ff;font-size:25px;font-weight:bold;"> PRODUCT DETAILS </div> 　　＊＊＊＊以下で出力される文字のフォントと文字サイズを指定したい。 <p class="sub_text" style="padding-left:10px;padding-right:20px;"> %DESCRIPTION% </p> 　　＊＊＊＊ ......同じような内容が続く </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
Dreamweaver デザインビューの表示が変
DreamweaverCS4を使っていますが、デザインビューに、テーブルの一番上のセルに張った画像しか表示されません。ブラウザでプレビューすると綺麗に全体が表示されるのですが、デザインビューで編集がまったくできない状態なので困っています。表示→ライブビューをクリックすると、デザインビューにも綺麗に表示されますが、編集は効かない状態です。以下がhtmlのコードです。まだ作成途中ですが、この段階でもデザインビューには文字すら出てきません。無知な質問で申し訳ありませんが、どなたかご教授よろしくお願いします。 <!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" /> <meta http-equiv="content-script-type" content="text/javascript"> <meta name="keywords" content="aaa"> <meta name="description" content="aaaaaa" /> <title>あいうえおかきくけこ</title> <link href="style/common.css" media="all" rel="stylesheet" title="CSS" type="text/css" /> </head> <body> <div id="pageBody"> <table width="700" border="0" align="center"> <tr> <td><center> <img src="style/top_image_a.png" /> </center></td> </tr> <table width="700" border="0" align="center" cellspacing="0"> <tr> <td bgcolor="#97E1A3">このサイトは？</td> </tr> <tr> <td bgcolor="#E8FECF">あいうえお</td> </tr> </table> <table class="table001"> <tr> <td width="130" rowspan="2"><img src="style/Btn_info_a.bmp" /></td> <td width="570"><h2>このサイトのごあんない</h2></td> </tr> <tr> <td valign="top"><p>このサイトの説明です。</p></td> </tr> </table> </table> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
CSSでテーブルを中央にする方法
CSSでテーブルを中央にする方法を教えてくださいいろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css">  </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいますよろしくお願いします。
- ベストアンサー
- HTML
tableの分割画像　隙間について
いつもお世話になります。助かります。さてテーブル内画像分割についてお尋ねいたします。画像分割をいたしたく、４分割にphotoshopでスライスいたしました。確認画面では奇麗に表示されますが作業のサイトに収めるとcenterに縦に１ピクセルのぐらいのラインの隙間が入ります。サイト内の記述は.... 例えばこんな感じにしています。 <!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=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <linkrel="stylesheet"type="text/css"href="css/xx.css" /> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/sxxx.css"> <link rel="stylesheet" type="text/css" href="css/xxxxx.css" > <link rel="stylesheet" type="text/css"href="css/xxxxxxx.css" > <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <style type="text/css">  </style> </hade> <body>....................]........... ........省略......... <div id="photo"> <table border=0 cellspacing=0 cellpadding=0 > <tr> <td><img src="../13.jpg" width="263" height="114" alt""></td> <td><img src="../10.jpg" width="292" height="114"/></td> </tr> <tr> <td><img src="../11.jpg" width="263" height="91"/></td> <td><img src="../12.jpg" width="292" height="91"/></td> </tr> </table> </div>  です。他のものと競合するのでしょうか？どうしてこうなるのでしょうか？隙間をとり前に進みたいのですが教えて頂けませんか？お願いいたします。表現　伝え方に誤りがありますればご容赦くださいね。
- 締切済み
- その他([技術者向] コンピューター)
DOCTYPEをStrictにするとtdに余白が表示される
こんにちは。下記の様なhtmlを組み、枠を表示させてようとしているのですが、 DOCTYPEをStrictにすると、tdの上下に余白が表示されうまくいきません。枠の画像を上下左右の４つに分解し、ブラウザ上で合体させようとしています。どうしてもStrictで組みたいのですが、Strictでは無理なのでしょうか？ ★html★ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" charset="UTF-8" /> </head> <body> <table> <tr> <td colspan=3><img src="waku-top.jpg" /></td> </tr> <tr> <td><img src="waku-left.jpg" /></td> <td width=357px></td> <td><img src="waku-right.jpg" /></td> </tr> <tr> <td colspan=3><img src="waku-bottom.jpg" /></td> </tr> </table> </body> </html> ★css★ table{border:0;border-collapse:collapse;} tr,td{padding:0;} よろしくお願いします。
- ベストアンサー
- HTML
ホームページをセンターに表示したい！！
DreamweaverCS3を使ってホームページを作成しています。ホームページをセンターに表示したく、 marginをautoにしてもセンターに表示されません。いったい何が原因なのでしょうか？？ <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 中略 <style type="text/css"> td img {display: block;}body { margin:auto; } ↑この部分です。どなたかご教授下さい。
- ベストアンサー
- ホームページ作成ソフト
body要素
body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。どこが違うのでしょうか？ご教授ください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css">  </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML

このhtmlソースのFontの相対指定における問題点を教えて下さい。