今週のおさらい＜第６号＞/初心者のためのホームページ作り

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

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

バックナンバーはこちらから → 第１号第２号第３号第４号第５号目次

プレーンテキスト版

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

毎週金曜日配信　What's New 2002/6/21 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 　今週の課題■フォントのコントロール ◆Web上でフォントをコントロールする・・フォントの大きさ（font-size属性）簡単に７つの大きさを指定してみましょう、　HTML4.01ではタグは非推奨とされており廃止予定になっていますので、当講座では、使用しません。これについては詳しく後述してあります。基本的な大きさとして下記の７つがあります。 xx-large、x-large、large、medium、small、x-small、xx-small また、フォントサイズを現在の大きさから、largerなら１段大きく、smaller なら１段小さくさせることもできます。 ●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>フォントの大きさ１</title> <style type="text/css">  </style> </head> <body> xx-large x-large large medium small x-small xx-small 初心者のための ホームページ作り </body> </html> ">Sample

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

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

スタイルシートにおけるフォントの大きさの単位
mm、cm、in、pt、pc、px、em、ex、%　などがあります。詳しく説明しますと、

**スタイルシートにおけるフォントの単位**
単位	説明
mm	ミリメートル
cm	センチメートル
in	インチ（１インチ＝約25mm）
pt	ポイント
pc	パイカ（１pc＝12pt）
em	大文字のＭの高さを基準にした１文字の大きさ
ex	小文字のxの高さを基準にした１文字の大きさ
px	ピクセル
%	パーセント

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

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

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

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ それでは実際に試してみましょう。テキストエディタを立ち上げて下記のようにタイプして、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">  </style> </head> <body> フォントサイズは8mm フォントサイズは1cm フォントサイズは1in フォントサイズは16pt フォントサイズは1pc フォントサイズは16px フォントサイズは1em フォントサイズは1ex フォントサイズは150% </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では、ＯＳのバージョンによっては、あらかじめインストールされていますが、無い場合、下記のフォントのインストールがマイクロソフトのサイトから無料でダウンロードできます。 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">  </style> </head> <body> Times New Roman Verdana Impact Cosmic Sans MS Andale Mono Courier New 日本語 </body> </html> ">Sample 注：入力に際して、「ＭＳゴシック」の間のスペースは半角スペースです。ＭＳは全角英字です。入力が終わったらHTML文書として保存します。半角小文字で test_04.html　と拡張子 .htmlを忘れないようにしてください。保存できたら HTML文書test_04.html をダブルクリックしてブラウザを立ち上げます。それぞれ設定したフォントの種類が表示されているハズです。 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

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

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

p.test7 { font-family: "ＭＳゴシック",Osaka,sans-serif } この記述は、ブラウザが持つフォント名が左から参照され、適したものが選ばれます。　ＭＳゴシック＝Windows用　Osaka　＝　Macintosh用　sans-serif　＝　どちらもない場合、ゴシック体のフォントが選ばれます。その他に、　serif　＝　明朝系フォント　monospace　＝　固定ピッチフォント（等幅フォント）があります。 ">Sample ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ ◆Web上でフォントをコントロールする・・フォントの装飾フォントを装飾して字体をコントロールします。フォントを太字にするタグ タグや、イタリック体にする タグがありますが、これらのタグは物理タグなので、使わないほうがいいといわれています。それでもHTML4.01Strictなのは何故？（物理タグについては後述してあります）　フォントの装飾として、タグとスタイルシートよる記述をします。 ～　太字になります。 ～　強調文字になります。（ブラウザによっては斜体になります） ～　太字になります。 ～　斜体になります。さっそく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">  </style> </head> <body> これは太字です これも太字です 強調文字です イタリック体です </body> </html> 入力が終わったらHTML文書として保存します。半角小文字で test_05.html　と拡張子 .htmlを忘れないようにしてください。保存できたら HTML文書test_05.html をダブルクリックしてブラウザを立ち上げます。それぞれ設定したフォントの字体が表示されているハズです。 ">Sample ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆何故、フォントの設定は難しいのか？

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

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

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

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

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

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

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

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

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

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

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

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