第1章　ホームページ基礎知識

2001年5月6日

7.フォントサイズについて

(1)ブラウザの標準フォントサイズについて

多くの場合、WebページはInternetExplorerやNetscape Communicatorで見ます。そして、それぞれのブラウザには、Mac版とWindows版があります。このブラウザでは、初期設定や環境設定で「標準フォントサイズ」が設定されています。

標準フォントサイズ

それに対し、2000年に登場したMac版のIE 5ではブラウザで表示される文字の大きさが16ポイントが設定されています。Netscape6でも16ポイントが標準になっています。

以前のMac版のInternet Explorer 4.5やNetscape Communicato4.7では、12ポイントが標準設定でした。そのために過去、Macで作成されたWebぺーじでは、12ポイントにあわせてデザインされていました。今後は、ブラウザの解像度は96dpi(1インチの長さに96個のドット(点))で16ポイントが基準になってきますから、ひとまわり大きな16ポイントのフォントで見られることを想定しデザインする必要があります。

なぜ16ポイントが標準になったのかは、W3Cという標準団体が決めたというのが大きいと思います。また、Macでは12ポイントのフォントが標準(初期設定)でしたが、ここに解像度ということがからんできます。Macの画像解像度は72dpiを基準にしています。1インチあたり72個の点です。対してWindowsは96dpiを基準にしています。この差、72/96=1.33ドット分、同じ1ポイントでも、Windowsが大きくなります。よく使われる12ポイントというフォントの大きさでは、12×1.33=15.96で16ポイントとなっている計算になっています。少なくとも12ポイントや16ポイントが標準設定されたブラウザがしばらく混在することになりますから、そういうことを考えてデザインすることが大事だと思います。

(2)相対フォントサイズ

PageMillではフォントの大きさは相対的に-2、-1、0、+1、+2、+3、+4で表されます。できれば、W3Cでも推奨されていますが、この相対的なサイズでフォントの大きさを変更せずに「見出し」で文字の大きさを変更しておけば、後にCSSという機能を使って、フォントを制御する際に便利です。

(3)MacとWindowsで求A通なフォントについて

WindowsではMS Pゴシック、MacではOsakaが標準フォントになっています。求A通に使えるフォントは、「Arial」「Arial Black」「Courier」「Courier New」「Times New Roman」「Comic Sans MS」などの一部の欧文フォントだけです。

(4)絵文字フォントの一覧表について

Wingdingsなどの絵文字を利用すると簡単にアイコンが作成できます

下の画像は、OSAKAフォントと同じ「1234〜」から始まったフォントをWingdings等のフォントで表示した例です。例えばWingdingsのフォントで「1」をタイプするとフォルダーのアイコンになります。下の画像をクリックすると少しだけ拡大します。

(5)編集スタイルについて

PageMillには、多くの編集スタイルがあります。これらHTMLの歴史はもともと技術文書や学術文書ですのでその名残です。

それぞれの意味や役割は下記の通りです。

(a)テレタイプ

等幅フォントで表示されます

(b)サンプル

等幅フォントで表示され、別の文書からサンプルとして取り出した文字列を表します。

(c)キーボード

同じ等幅フォントで表示されますが、パソコンからの入力文字を表します。

(d)コード

等幅フォントで表示されます。これはプログラムであることを表します。

(e)変数

斜体で表示されます。プログラムの変数を表します。