凡人の部屋(bonjin.com)
悩めるウェブマスター Index
文字の大きさ(フォントサイズ)と行間の固定
  •  基本的には、プラウザでユーザーが文字の大きさ変更することができないので、Web制作者にとっては禁じ手ですが、「bonjin.com」では、サイズ固定のインラインフレーム内に表示させるファイルと固定サイズで開く、新しいウィンドウに使用しています。
 文字の大きさ行間の固定

 デザイン重視のサイトで、プラウザの表示→文字のサイズを最大にしても豆のような判読不能な小さい文字のサイトがあります。見る人の自由を奪う、余り好ましくない設定ですが、画像を配置したりして、デザイン上どうしてもフォントサイズを固定する場合は、下記のタグを<head>と</head>の間に挿入して下さい。



<style type="text/css">
<!--
body,td {
font-size: 12px;
line-height: 18px;
}

-->
</style>

上記設定だと、プラウザで「表示→文字の大きさ標準(中)」でみる場合の<font size="2">または<font size="-1">と同じサイズになります。行間は、18px-12px=6pxで、6ピクセル固定となります。


他に使える単位は
px ピクセル

pt ポイント

in インチ

cm センチ

mm ミリ

pc パイカ 1pc=12pt



pt」は、ポイント(1pt=1/72インチ)です。Windowsでは画面解像度が96dpi、マックでは72dpiで表示されるため、マックで見る方が大きく見えます。したがって絶対指定になりません。

 フォントサイズを固定するだけ

 フォントサイズを固定するだけだと


<style type="text/css">
<!--
body, td {
font-size: 12px;
}
-->
</style>


 相対指定の単位(ユーザーがサイズ変更できる)

 フォントサイズをひとまわり小さくしたい場合は「%」で指定するのがベターでしょう!


フォントサイズ90%行間150%
<style type="text/css">
<!--
body, td {
font-size : 90%;
line-height : 150%;
}
-->
</style>

上記設定は、このページでも使用している設定で、気持ち(1割引!)字を小さく、行間は少し広めのすっきりサイズで気に入っています。見る人が文字が「小さい」「大きい」と思ったら、相対サイズ指定なのでプラウザで大きさの変更が可能な、見る人の自由を奪わない設定です。