初心者のためのホームページ作り 第6号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

バックナンバーはこちらから → 第1号 第2号 第3号 第4号 第5号 目次

プレーンテキスト版

<第6号>マガジンのおさらい
まず、記事から抜書きでおさらいします。

                  毎週金曜日配信 What's New 2002/6/21
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題■フォントのコントロール

◆Web上でフォントをコントロールする・・フォントの大きさ(font-size属性)
簡単に7つの大きさを指定してみましょう、
 HTML4.01では<font>タグは非推奨とされており廃止予定になっていますので、
当講座では、使用しません。これについては詳しく後述してあります。

基本的な大きさとして下記の7つがあります。
xx-large、x-large、large、medium、small、x-small、xx-small

また、フォントサイズを現在の大きさから、largerなら1段大きく、smaller な
ら1段小さくさせることもできます。

●Tips
主なブラウザでは、デフォルト(初期設定値)のフォントサイズと同じ大きさに
なるのは、small となっています。しかし、標準規格においては medium がデフ
ォルトのフォントサイズであるとされており、実際に Netscape6.0ではこれに従
い、small ではなく midium がデフォルトサイズと同じになります。

では、HTML文書を作って確かめましょう。
テキストエディタを立ち上げて下記のようにタイプしてHTML文書を作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>フォントの大きさ1</title>
<style type="text/css">
<!--
p.test1 { font-size: xx-large }
p.test2 { font-size: x-large }
p.test3 { font-size: large }
p.test4 { font-size: medium }
p.test5 { font-size: small }
p.test6 { font-size: x-small }
p.test7 { font-size: xx-small }
span.lg { font-size: larger }
span.sm { font-size: smaller }
-->
</style>
</head>

<body>
<p class="test1">xx-large</p>
<p class="test2">x-large</p>
<p class="test3">large</p>
<p class="test4">medium</p>
<p class="test5">small</p>
<p class="test6">x-small</p>
<p class="test7">xx-small</p>
<p class="test4">初心者の<span class="lg">ため</span>の
<span class="sm">ホームページ作り</span>

</body>
</html>  Sample
上記HTML文書の実行時に、あなたのブラウザのフォントの大きさの設定を色々と変えてみてください。その設定に比例して文字の大きさが変わります。

◆Web上でフォントをコントロールする・・フォントの大きさ(font-size属性)

スタイルシートにおけるフォントの大きさの単位
mm、cm、in、pt、pc、px、em、ex、% などがあります。詳しく説明しますと、
スタイルシートにおけるフォントの単位
単位 説明
mmミリメートル
cmセンチメートル
inインチ(1インチ=約25mm)
ptポイント
pcパイカ(1pc=12pt)
em大文字のMの高さを基準にした1文字の大きさ
ex小文字のxの高さを基準にした1文字の大きさ
pxピクセル
%パーセント

pt はポイントで、フォントサイズを示す一般的な単位です。pc は12ポイントを 1pc とするフォントサイズを示します。mm、cm、in、pt、pc は環境などに左右されない絶対値による指定となります。

それに対し、em、ex、px、% はユーザーの画面サイズなどに合わせて相対的に変化する単位です。em ex は要素内のフォントの高さを1とします。emは大文字のMの高さを基準となり、exは小文字の x の高さを基準になります。ただし、emについてはfont-size属性を指定したときに限って、親要素のフォントサイズを基準にします。また、px(ピクセル)はモニター画面上の1ピクセルを意味します。

%は属性によって、何に対する割合かは異なりますが、多くの場合は親要素を基準とした割合となります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
それでは実際に試してみましょう。
テキストエディタを立ち上げて下記のようにタイプして、HTML文書を作成します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<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">
<!--
body     { background-color: #fff; 
      font-size: 12pt; 
           color: #000 }
p.test1 { font-size: 8mm }
p.test2 { font-size: 1cm }
p.test3 { font-size: 1in }
p.test4 { font-size: 16pt}
p.test5 { font-size: 1pc }
p.test6 { font-size: 16px }
p.test7 { font-size: 1em }
p.test8 { font-size: 1ex }
p.test8 { font-size: 150% }

-->
</style>
</head>

<body>
<p class="test1">フォントサイズは8mm</p>
<p class="test2">フォントサイズは1cm</p>
<p class="test3">フォントサイズは1in</p>
<p class="test4">フォントサイズは16pt</p>
<p class="test5">フォントサイズは1pc</p>
<p class="test6">フォントサイズは16px</p>
<p class="test7">フォントサイズは1em</p>
<p class="test8">フォントサイズは1ex</p>
<p class="test9">フォントサイズは150%</p>
</body>
</html>

入力が終わったらHTML文書として保存します。小文字で
test_03.html と拡張子 .htmlを忘れないようにしてください。
保存できたら HTML文書test_03.html をダブルクリックしてブラウザを立ち上げ
ます。  Sample

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ここでのbody要素で、フォントサイズを12ポイントとしました。これは親要素として設定したもので、em、ex、% で相対的に大きさを決める元のサイズになります。もし、これを設定しなかった場合は、ブラウザのデフォルト(初期値)の大きさになります。

上記のHTML文書をブラウザで表示したフォントの大きさが、あなたの環境でのそれぞれの大きさになります。この大きさは決して絶対的なものではありません。 例えば「絶対値」であるポイントやミリ、センチでもユーザの画面の大きさやブラウザの設定に依存します。

また、ピクセルやemでも、同じように画面の大きさやブラウザに依存してしまうのが実情です。また、OSの違いによっても大きさが異なってきます。 実際、どの単位でどれくらいの大きさに設定するのか、非常に難しいのが本音です。もしかしたら設定しない方がいいかもしれません。何とも厄介なのがフォントの設定です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆Web上でフォントをコントロールする・・フォントの種類(font-family属性)
フォントの書体も設定することができますが、これも「絶対的」なものはありま
せん。デザイン上、どうしても文字の種類を決めたくても、それを見るユーザ側
で、同じフォントを持っていなければ表示されません。

とりあえず、フォントの種類の設定をしてみましょう。
 なお、使用するフォントはマイクロソフト社製の Web用フォントです。
Windows 及び Macintoshでは、OSのバージョンによっては、あらかじめインス
トールされていますが、無い場合、下記のフォントのインストールがマイクロソ
フトのサイトから無料でダウンロードできます。

Free downlaods-True-Type core fonts for Web
http://www.microsoft.com/typography/fontpack/default.htm

テキストエディタで、新たにHTML文書を作成します。下記のようにタイプしてく
ださい。

<html lang="ja">
<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">
<!--
body    { background-color: #fff; 
          color: #000 }
p       { font-size: 12pt }
p.test1 { font-family: "Times New Roman" }
p.test2 { font-family: Verdana }
p.test3 { font-family: Impact }
p.test4 { font-family: "Cosmic Sans MS" }
p.test5 { font-family: "Andale Mono" }
p.test6 { font-family: "Courier New" }
p.test7 { font-family: "MS ゴシック",Osaka,sans-serif }
-->
</style>
</head>

<body>
<p class="test1">Times New Roman</p>
<p class="test2">Verdana</p>
<p class="test3">Impact</p>
<p class="test4">Cosmic Sans MS</p>
<p class="test5">Andale Mono</p>
<p class="test6">Courier New</p>
<p class="test7">日本語</p>
</body>
</html>
  Sample
注:入力に際して、「MS ゴシック」の間のスペースは半角スペースです。
MSは全角英字です。

入力が終わったらHTML文書として保存します。半角小文字で
test_04.html と拡張子 .htmlを忘れないようにしてください。
保存できたら HTML文書test_04.html をダブルクリックしてブラウザを立ち上げ
ます。それぞれ設定したフォントの種類が表示されているハズです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

フォントの種類を指定するには font-family 属性を使います。フォントの種類を複数用いる場合は 「 , 」カンマで区切って記述します。またフォント名に空白がある場合、例えば「Times New Roman」や「MS ゴシック」のようなものはダブルコーテーションで囲む必要があります。これがないと、ブラウザ側で判断できない場合もあります。

上記英文のフォント名は Windows と Macintshで共通して表示できますが、残念ながら日本語に共通するフォントは、今のところありません。

p.test7 { font-family: "MS ゴシック",Osaka,sans-serif }
この記述は、ブラウザが持つフォント名が左から参照され、適したものが選ばれます。
 MS ゴシック=Windows用
 Osaka = Macintosh用
 sans-serif = どちらもない場合、ゴシック体のフォントが選ばれます。

その他に、
 serif = 明朝系フォント
 monospace = 固定ピッチフォント(等幅フォント)があります。
  Sample

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆Web上でフォントをコントロールする・・フォントの装飾
フォントを装飾して字体をコントロールします。フォントを太字にするタグ <b>
タグや、イタリック体にする <i>タグがありますが、これらのタグは物理タグな
ので、使わないほうがいいといわれています。
それでもHTML4.01Strictなのは何故?(物理タグについては後述してあります)

 フォントの装飾として、タグとスタイルシートよる記述をします。

<strong>〜</strong> 太字になります。
<em>〜</em> 強調文字になります。(ブラウザによっては斜体になります)
<span style="font-weight:bold">〜</span> 太字になります。
<span style="font-style:italic">〜</span> 斜体になります。

さっそくHTML文書を作ってみましょう。
テキストエディタで下記のようにタイプしてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<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">
<!--
body    { background-color: #fff; 
          color: #000
          font-size: 12pt }
p#test1 { font-weight: bold }
p#test2  { font-style: italic }
-->
</style>
</head>

<body>
<strong>これは太字です</strong>
<p id="test1">これも太字です</p>
<em>強調文字です</em>
<p id="test2">イタリック体です</p>

</body>
</html>

入力が終わったらHTML文書として保存します。半角小文字で
test_05.html と拡張子 .htmlを忘れないようにしてください。
保存できたら HTML文書test_05.html をダブルクリックしてブラウザを立ち上げ
ます。それぞれ設定したフォントの字体が表示されているハズです。  Sample

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆何故、フォントの設定は難しいのか?
フォントの大きさの設定については、色々論議があるようです。Windows環境とMacintosh ではデフォルトの大きさが異なり、一概に共通の大きさを決められない要因があります。

画面に表示される文字の大きさは、マシンに設定されている画面解像度に基づいています。その単位は、dpi(ドット・パー・インチ)、またはppi(ピクセル・パー・インチ)という単位を用います。これらは、1インチの長さにいくつドット(ピクセル)が収まるかを表しています。

Macintosh や、多くのDTP用ソフトウェアがサポートする基本的な画面解像度は 72dpi(1インチ当たり72ドット)という単位に基づいて画面表示を行っていますが、Windowsでは、96dpiという解像度を基にしています。したがって、フォントサイズの指定によく用いられる「pt=ポイント」という単位は、1pt=72分の1インチなので、Macintosh ではそのまま1pt=1ドットという計算になりますが、Windowsでは1pt の表示のため画面上(96÷72=)1.33ドット分が必要になります。
このことにより、例えば、18ptを指定した文字の高さは、Macintoshの画面上では18ドットの高さになりますが、Windows の画面ではその1.33倍の、24ドット分の高さで表示されます。この差は文字サイズが大きくなるにつれ広がってしまいます。

最近でこそブラウザの解像度が両方とも、96dpi になっていますが、少し前までは、Macintoshが72dpiで設定されていますので、これらのブラウザに対する配慮が必要になってきます。アメリカはともかく、日本では Macintoshユーザは15%以上といわれています。

フォントの大きさを設定する上で、決して制作者自身のモニター画面では決められないものがあります。最近のノートパソコンの普及に伴い、画面サイズがまちまちになっています。このへんもフォントの大きさを決定する上での難しさになっています。

◆<font>タグの使用について
<font>タグはHTML3.2 まで利用されてきた便利なタグです。ただし、文字の大きさは7段階までしかなく、細かな設定ができない欠点があります。それでもフォントの大きさや種類を簡単にコントロールすることができます。このタグなしでの Webページデザインは考えられませんでした。私も当たり前のようにこれを使い続けたものでしたが、ある日突然(正確には1997年12月)、<font>タグは使わないようにしましょう、と勧告されました。

それは、HTML4.0 以降の W3Cの規格では<font>タグは過去のもの、これから先は使わないことが望ましい、将来的な規格に含まれない、とされたのです。

非推奨の原因は、<font>タグが物理タグであるということです。物理タグというのは、ユーザのハード環境に依存してしまう性格があり、HTMLの文書を論理的な構造とする精神から外れてしまうということから、このタグを使うのを控えるように勧告されています。

また、インターネット愛好家には、ブラウザに自分の独特のスタイルシートを利用している人たちがいます。その時に、<font>タグは、ユーザースタイルシートとの親和性が無く、画面がメチャクチャになる危険性があります。<font>タグはスタイルシートによるマークアップができないのです。つまり、融通が利かな いのです。

もちろん現在のブラウザでもこのタグはサポートされていますが、正統派を目指すうえで、あえてこのタグの使用方法は掲載いたしません。ご理解ください。


Copyright(C) 2002-2003 banban@scollabo.com