■ フォントのコントロール

Webページにおけるフォントの扱いには、多くの制作者の悩むところです。ページを閲覧する人たちがどのようなフォントでどのくらいの大きさで使っているかを知るすべはありません。

また、スタイルシートでフォント名を設定をしたところで、閲覧者がそれに適応するものを持っていなかったら絵に描いた餅です。Webページのデザインに深く関わるフォントのコントロールは、ある意味で非常に困難であるといわざるを得ません。

■ スタイルシートにおけるフォントの大きさ

スタイルシートでは次のような単位が設定できます。

スタイルシートにおけるフォントの単位

単位	説明
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 は大文字の M の高さを基準となり、ex は小文字の x の高さを基準とします。ただし、em については font-size属性を指定したときに限って、親要素のフォントサイズを基準にします。また、px（ピクセル）はモニター画面上の１ピクセルを意味します。

% は属性によって、何に対する割合かは異なりますが、多くの場合は親要素を基準とした割合となります。相対値は、ユーザ側で自由に大きさを変更することができるので、できるだけフォントの大きさは相対地を指定するように心がけましょう。

下記に実際のフォントサイズがどれくらいなのかを検証しました。なお、親要素は特に設定していません。

実際のフォントサイズ

単位	実際のサイズ
15mm	15mm
1cm	1cm
1in	1in
12pt	12pt
1.5pc	1.5pc
2em	2em
1ex	1ex
16px	16px
250%	250%

■ スタイルシートにおけるフォントの種類

何も設定しなければ通常、ユーザが設定したフォントで表示されます。これはフォントサイズも同じです。フォントの書体もデザインを決定する場合の重要なポイントですが、はっきりいって、書体にばかりとらわれたデザインですと、悲惨なことになります。ユーザ環境は千差万別で、制作側で望んだフォントの種類は無視されるものだということを認識すべきでしょう。

それでもわずかながら望みはあります。それは明朝系かゴシック系か、固定ピッチフォント系かを設定することができます。これだけでもデザイン上、何とかなるものです。下記の状態であなたのブラウザは如何に表現しているでしょうか。

font-familyの設定

設定	実際の表示
明朝体 serif	明朝体系のフォント
ゴシック体 sans-serif	ゴシック体系のフォント
筆記体 cursive	筆記体系のフォント
装飾体 fantasy	Lectur for Begginer
等幅体 monospace	固定ピッチ系のフォント

下記に掲げるものは Windows と Macintosh、それぞれの OS環境にはじめからインストールされているフォントの一覧です。（ただし、OSのバージョンによって異なる）これを見ると、両方のOSに共通してインストールされている英語フォントがいくつかあります。

それは主に、米国 Apple社が Web用フォントに開発したものです。フォントの種類を指定する際は、できるだけこれらの中から選ぶようにするといいでしょう。また、これらのフォントは以下 の 米国 Microsoft社のサイトから無料でダウンロードできます。お試しください。

Free downloads-TrueType core fonts for Macintosh (全部英語です、念のため)

http://www.microsoft.com/typography/fontpack/defoult.htm

システムに標準でインストールされている主なフォント

フォントの系統	Macintosh	Windows	共通
英語サンセリフ系	Arial	Arial	○
	Arial Black	Arial Black	○
	Chicago
	Geneva
	Helvetica
	Impact	Impact	○
	Trebuchet MS	Trebuchet MS	○
英語セリフ系	Georgia	Georgia	○
	Palatino
	NewYork
	Times
	Times New Roman	Times New Roman	○
	Verdana	Verdana	○
英語草書体系	Cosmic Sans MS	Cosmin Sans MS	○
英語等幅系	Andale Mono	Andale Mono	○
	Courier
	Courier New	Courier New	○
	Monaco
		Lucida Console
		Small Fonts
絵文字と記号系	Symbol	Symbl	○
	Webdings	Webdings	○
	WingDings
日本語ゴシック系		MS P ゴシック
		MS UI Gothic
	Osaka
	中ゴシック体
	平成角ゴシック
日本語明朝系		MS P 明朝
	細明朝体
	平成明朝
日本語等幅ゴシック系		MS ゴシック
	Osaka等幅
日本語等幅明朝系		MS 明朝

PageTop / Home / Index / Next

初版公開日 2002年3月20日   最新更新日 2003年9月9日

Copyright(C) 2002〜2008 banban