■ フォント

コンテンツの基本となるテキストはフォントによって表現されます。簡単なようで実は奥が深いフォントに関する手法をできる限り掲載しました。

できることであれば、フォントの作法を遵守し、広くアクセシビリティに富んだバリアフリーのページを作成することを強く望みます。

文字の大きさを設定する

文字の大きさを変える設定は2つあります。

<font size="5">  (非推奨)
<p style="font-size:larger">  (CSSの設定:推奨)
body { font-size: medium }    (CSSの設定:推奨)

font要素は物理タグと呼ばれるもので、ユーザの環境に影響します。現在は非推奨とされる要素で、使用することを避けるよう求められています。

font要素では、1〜7までの7つの大きさが指定できますが、スタイルシートの大きさの設定ははるかに多様です。

CSSによるフォントサイズの指定(相対値)
サイズの指定大きさ
xx-smallxx-small
x-smallx-small
smallsmall
smallersmaller
mediummedium
largerlarger
largelarge
x-largex-large
xx-largexx-large
em1em
ex3ex
%120%
px12px
CSSによるフォントサイズの指定(絶対値)
サイズの指定大きさ
pt12pt
in0.2in
mm5mm
cm1cm

フォントのサイズを指定する場合には、ユーザ側の環境を考慮して、なるべく相対値を選ぶことを強くお奨めします。絶対値では、ユーザ側でフォントの大きさを変えることができなくなり、お年寄りにとって見えにくい結果を及ぼす場合があります。

文字の色を設定

文字の色を変える設定も2通りあります。

<font color="red">  (非推奨)
<p style="font-color:#f00">  (CSSの設定:推奨)
h1 { color: #f00 }           (CSSの設定:推奨)

色コードは16進数のほかに全16色のカラーネーム(ColorName)による設定が可能です。また、CSSでの16進数はRGB3桁による記述もできます。

文字の書体を設定

フォント名を指定して表現する方法も2通りあります。

<font face="Verdana">  (非推奨)
<p style="font-family:Verdana">  (CSSの設定:推奨)
div { font-family: Verdana }     (CSSの設定:推奨)

フォント名を設定しても、ユーザ側で同じフォントがない場合には、ブラウザのデフォルトで表示されます。できればスタイルシートを用いて、複数設定することが望まれます。

CSSによるフォント名の指定(絶対値)
フォント名表示機能実際の表示
serif明朝体明朝体のフォント
sans-serifゴシック体ゴシック体のフォント
monospace等幅体等幅のフォント
OsakaMac用ゴシック体Osakaのフォント
MSP ゴシックWin用ゴシック体MSP ゴシックのフォント

なお、フォント名に空白があるもの、例えば「Times New Roman」や「Cosmic Sans MS」のようなフォントは必ずダブルコートで囲む必要があります。また、カンマで区切ることにより複数設定できます。

p { font-family: "Time New Roman",serif }

文字を強調する

文字を強調させる場合の手法は幾つかあります。

<b>文字の強調</b>           文字の強調
<strong>文字の強調</strong>   文字の強調
<em>文字の強調</em>           文字の強調

なお、<b> は物理要素と呼ばれるもので、むしろ <strong> を使うことを強くお奨めします。

スタイルシートによる文字の強調は以下の通りです。

<p style="font-weight:bold">
p { font-weight: bold }

文字に抹消線をつける

文字に抹消線をつける要素は以下の通りです。

<s>抹消線つき文字</s>               抹消線つき文字  (非推奨)
<strike>抹消線つき文字</strike>     抹消線つき文字  (非推奨)
<del>抹消線つき文字</del>           抹消線つき文字 (推奨)

s要素、strike要素共に非推奨とされています。できるだけ del要素を使うようにしましょう。なお、3者ともまったく同じ表示になります。

スタイルシートによる文字の抹消線は以下の通りです。

<p style="text-decoration:line-through">
p { text-decoration: line-through }

文字に下線をつける

文字に下線をつける方法は、2通りあります。

<u>下線付き文字</u>                  下線付き文字  (非推奨)
<span style="text-decoration:underline">   下線付き文字  (推奨)


This Page is HTML4.01 Valid! 初版更新日 2003年1月4日
Copyright(C) 2002-2003 banban@scollabo.com