未知の苦HTML解道 つまず紀行! <ホームページ作成支援>










改行



段落









 HOME >> 実践HTML >> フォント >> フォントサイズ
 ★ フォントサイズの指定
   単位指定 << >> 絶対サイズまたは相対サイズ

フォントサイズの指定は、ピクセル、% 等々の 単位指定(絶対値・相対値) または、絶対サイズまたは相対サイズ

但し、HTML定義「HTML4.01 Transitional」では、フォント要素・属性は、非推奨

ブロックレベル要素の中に、FONT要素とその属性値を書き加えると、初期設定のフォントスタイルを変更することができます。

要素(タグ)に追加した属性の値は、二重引用符(ダブルクォーテーションマーク" ")で括ります。


フォントサイズを変更する

[初期設定値12pxを相対値指定の"3"に変更]

 未知の苦HTML解道 ・・・ >>  未知の苦HTML解道


□ソース表示

<P>未知の苦HTML解道</P>

<P><font size="3">未知の苦HTML解道</font></P>


 

 ◆フォントサイズの単位にまつわる喧々囂々(けんけんごうごう)

書体のサイズ=フォントサイズの単位は、一般的にピクセル、または(割合による)単位が使われていると思われますが、様々な見解があるようです。

フォントサイズの単位を絶対値指定のpt(ポイント)などを指定すると、コンピュータが使われている様々な使用環境(OS、ブラウザ、画面解像度、ブラウザ個々の設定など)により、表示が異なったり、相対値単位の%などを指定すると、使用モニタの画面領域に追従するため、これもまた閲覧環境によっては、思い通りに表示されないと言う指摘もあるようです。

最終的なフォントサイズの判断は、ホームページ制作者の裁量にゆだねられ、こうするという決まりがないことが、フォント単位論争の根底にあるものと思われます。

◆フォントサイズの指定1 
  単位指定・・・絶対値指定または相対値指定


フォントサイズの単位 絶対値指定
単位の呼称 作 例 作例のサイズ
pt (ポイント) 未知の苦HTML解道 SIZE="11pt"
cm (センチメートル) 未知の苦HTML解道 SIZE="0.4cm"
mm (ミリメートル) 未知の苦HTML解道 SIZE="4mm"
in (インチ) 未知の苦HTML解道 SIZE="0.15in"
pc (パイカ) 未知の苦HTML解道 SIZE="0.9pc"

フォントサイズの単位 相対値指定
単位の呼称 作 例 作例のサイズ
1〜7の数値  未知の苦HTML解道 SIZE="3"

1〜7の相対数値指定における標準値は"3"

相対数値1
相対数値2
相対数値3
相対数値4

相対数値5


相対数値6


相対数値7


em  未知の苦HTML解道 SIZE="1.2em"

em=Emphasis(強調)
大文字のMの高さを基準にした文字の大きさ

ex ・・・IE  未知の苦HTML解道 SIZE="2.5ex"
ex ・・・NN  未知の苦HTML解道 SIZE="2ex"

ex=exheight(エックスハイト)・・・活字 x の Height (高さ)
小文字のxの高さを基準にした文字の大きさ

px (ピクセル)  未知の苦HTML解道 SIZE="15px"
 (パーセント)  未知の苦HTML解道 SIZE="120%"

注:以下、最後尾に至る記事中に出没するNN=ネットスケープ
またはネスケ云々の記述はNNブラウザのサポート終了
(2008年2月)に伴い読み飛ばして下さい。{2015.11.18加筆}

◆フォントサイズの指定2
  サイズ指定・・・絶対サイズまたは相対サイズ


 
絶対サイズ指定相対サイズ指定の比較表
絶対size 作 例 相対size 作 例
xx-small 未知の苦HTML解道 -3 未知の苦HTML解道
 *NN=NG
x-small 未知の苦HTML解道 -2 未知の苦HTML解道
small 未知の苦HTML -1 未知の苦HTML
親サイズ
medium
未知の苦HTML
 IEは英数字=太字
親サイズ
4
未知の苦HTML
 NNはfont-size=3で
 左のmediumと同等

-
未知の苦HTML
 IEはfont-size=4で
 左のmediumと同等
large 未知の苦html
 IEは全文字=太字
+1 未知の苦html
 IEは全文字=太字
x-large 未知の +2 未知の
xx-large html +3 html
    larger 未知の苦HTML
    smaller 未知の苦HTML解道

■フォントサイズの指定 <BASE-FONT要素+値>

 相対サイズの数値指定 >> BASE-FONT要素

但し、HTML定義「HTML4.01 Transitional」では、BASE-FONT要素は非推奨要素です。

幾つかあるフォントサイズ指定の中で、BASE-FONT要素は非推奨ながら、敢えて作例してみます。

フォントサイズ指定の数値指定は、初めに、"BASE-FONT要素"とその値を設定します。
基準となるフォントサイズを設定し、その数値を基点(ベース)に

 フォントサイズを (+1)、あるいは、(−1)

などと具体的な数値を指定します。

BASE-FONT要素は終了タグ不要 

基準設定値の数値と、プラスマイナスした結果が、最小1,最大7
BASE-FONT要素は、空要素タグのため、終了タグ不要

相対サイズ"数値指定"の作例に指定したBASE-FONTサイズは"4"

作例の中から、相対サイズ"数値指定−3"のソースは、次のとおりです。

<BASEFONT SIZE="4">
<FONT SIZE="-3">未知の苦HTML解道</FONT>

 ★ BASE-FONT要素 >> スタイルシート代替記述

BASEFONTタグ >>  未知の苦HTML解道

スタイルシート >> 未知の苦HTML解道


★ BASE-FONT要素 >> スタイルシート代替記述のソース表示

BASEFONTタグ

<BASEFONT SIZE="2">
<FONT SIZE="+2" COLOR="#000000"
 FACE="Arial Black">未知の苦HTML解道</FONT>

スタイルシート代替記述

<spanstyle="font-size:18px; color:#000000;
 font-family:Arial Black;">未知の苦HTML解道</span>

 

■フォントサイズの指定 <スタイルシートに設定>

 キーワード指定、相対指定は"スタイルシ−ト"に設定します。

スタイルシート設定のポイント

絶対サイズ"xx-small〜xx-large"=キーワード指定
相対サイズ"larger"、"smaller"=相対指定

例えば "larger、 smaller"を指定したフォントサイズは、親要素(親タグ)の値に対し、その値より "大きく" または、"小さく" する相対指定になります。

□作例とソース表示

"larger、 smaller"用に初期設定した親要素とその値は<FONT SIZE="2">

作例は、相対サイズ"larger指定"です。

(作例は代替記述です。代替記述については、後述の青枠内をご覧下さい。)

<font size="2">
<span style="font-size:larger;">未知の苦HTML解道</span>
</font>

 

 IEとネスケの違い

IEとネスケでは、ブラウザが異なるため、"絶対サイズ指定と相対サイズ指定"の表示に、多少の差が出ます。
(詳細は上述の絶対サイズと相対サイズの比較表参照

考え方をフォントサイズの太さに視点を変えると、表示の違いをさほど気にすることもない、スタイルシート属性のfont-weight属性による指定の方法があります。

 >> font-weight属性


HTML定義「HTML4.01 Transitional」では、FONT要素(face、size、color)やBASE-FONT要素の記述は、非推奨要素・属性のため、スタイルシートの設定を推奨しています。

■HTML4.01非推奨要素属性

WEB for beginner 作成支援
 TOP | Reference | HTML非推奨要素・属性 >>
 □ 非推奨とされる要素と属性

非推奨要素属性をHTML文書内に代替記述するときは[style属性]に[font要素の属性とその値]を、インラインスタイルで、直接記述します。

◇代替記述例

例えば、フォントサイズを絶対サイズ指定の"x-large"にすると

IE NN同等表示"x-large"


□ソース表示

<p style="font-size : x-large ;">
IE NN同等表示"x-large"</p>

BODY全体に反映させるときは・・・

body { font-size : x-large ; }


■スタイルシートで良く使われる単位 >> Web frontier



  実用ツール

HTML文法検証
HTML文書の文法チェックと採点

CSS文法検証
W3C CSS 検証サービス

IT用語辞典
IT用語検索
<< Back | ホーム | ▲Page Top | Next フォントスタイル
Base template by WEBMAGIC  Copyright © 未知の苦HTML解道, all right reserved, since 2004. 8.25