古い要素 − 文字に関する書式設定
|
古い要素 − 文字に関する書式設定 |
|
|
|
| | |
ここで説明するHTML要素は廃止予定で、将来はHTMLの規格からはずされることになっています。ここで説明する要素はHTMLを構造的な言語と見た場合、一番ひどく「汚染」された部分にあたります。ですからこの要素をWebで使用することに反対する人たちのサイドから激しい挑戦と煽動があります。ここで取り扱う要素はカスケーディング・スタイルシート（CSS）のような書式設定のための言語がまだなかった時代の暫定的な解決法です。
ですからネットスケープ
3.x など古いブラウザーを使用する場合は、ここで解説する要素は必ずしも道を外れているとは言えません。しかしもしみなさんがこれから新しく勉強するのでしたら、スタイル記述の勉強をやめるのではなく、ここに書いてある事を勉強するのをやめておいた方がいいでしょう。代わりに同じ効果を発揮する スタイルシートによる文字の書式設定を勉強する方が意味があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>フォント、文字のサイズ、文字の色</title>
</head>
<body>
<p>
<font size="7">非常に大きなテキスト</font><br>
<font size="1">非常に小さなテキスト</font><br>
<font size="+1">普通よりやや大きめのテキスト</font><br>
<font size="-2">普通よりかなり小さ目のテキスト</font>
</p>
<p>
<font color="#FF0000">真っ赤なテキスト</font><br>
<font color="#00C000">あおいテキストといっても、緑色です。</font><br>
<font color="#0000FF">あおいテキスト。青色です。</font>
</p>
<p>
<font face="Avalon,Wide Latin">Avalonというフォントを使ったテキスト、
あるいは、 Avalon がない場合は Wide Latinで表示されます。</font>
</p>
<basefont size="2" color="#CC00CC" face="Verdana">
<h2>何が来るでしょうか。</h2>
<p>
普通より小さなサイズで、色は紫、フォントはVerdanaです。</p>
</body>
</html>
|
<font>...</font> で文字の書式設定をする範囲を区切ります。この要素は
インライン要素
だけを含むことができ、 ブロックレベル要素を入れることはできません。例えばテキストの段落をマークアップしたい場合は、font
要素を <p>...</p>
の間に記述しなければなりません。いいかげんな使い方をしてもブラウザーはそれほど規則にうるさく反応しませんが、HTMLの規則にのっとった書き方ではありません。
開始タグ <font> の中に属性を使って文字の書式設定ができます。
size= で文字の大きさを決めます(font size = 文字の大きさ)。値は数字で
1 から 7
の間、あるいは普通とされる大きさからプラス、あるいはマイナスでいくつという数を挙げます。普通とされる大きさは 3 です。
</font> でそのサイズの文字の範囲を終了します。<font size=...>
という記述は相対的な大きさを示しています。例えば <font size=5> といっても、ユーザーが 12Pt
の文字を設定した場合と 9Pt の文字を設定した場合では、異なる大きさになります。<font size=...>
で決める文字の大きさは段落のタイプによっても違ってきます。
<font color=...> で文字の色を決めます(font color = 文字の色)
。使用できるのは HTMLの色の定義で決められた色です。
<font face=...> でフォントの種類を決めます(font face =
フォントの種類)。値として1つ、あるいはそれ以上のフォントの名前を挙げることができます。いくつものフォントを挙げる時は、間をカンマで区切ります。いくつものフォントを挙げた場合WWWブラウザーはまず最初に挙げてあるものを表示しようとします(例では
Avalon)。このフォントがサイト訪問者のPCにインストールされていない場合、2つ目のフォントを使おうと試みます(例では
Wide Latin)
。サイト製作者が挙げたフォントが訪問者の方で用意されていない場合はこの記述は効果を発揮しません。テキストは訪問者のPCにインストールされているフォントで表示されます。フォントの名前はきちんと書いてください。例えばMSウインドウズではインストールされたフォントとその正確な名称はコントロールパネルから知ることができます。
文字の書式設定の2つ目の要素は basefont 要素です。これはスタンドアローン・タグで、ここで定義された書式設定は次の
basefont 要素が現れるまでファイルの中の全ての要素に有効になります。次の basefont
が来ない場合は文書の最後まで有効です。属性と値の書き方は font 要素と同じです。
font 要素は HTML3.2、basefont は HTML4.0
です。<font> と<basefont>
の開始タグにはいくつもの属性を記入することができます。size=、color=、face=
を混ぜて使えます。ネットスケープ 4.x は <basefont color=> と <basefont
face=> をサポートしていません。
XHTML に合うようにする場合は、basefont
要素を中身なしでマークアップします。その時スタンドアローン・タグを <basefont size="2" />
と書いてください。
|
カスケーディング・スタイルシート（CSS）で全てのブロックレベル要素とインライン要素を希望通りに書式設定することができます。スタイルシート（CSS）を使用する場合まずどうやって スタイルシートで書式設定をするかを知らなければなりません。それを理解すればスタイルシートの属性が使用できるようになります。
この章のテーマにとって重要なのは 文字の書式設定です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>フォント、文字のサイズ、文字の色 − スタイルシート（CSS）による文字の書式設定</title>
</head>
<body>
<p>
<span style="font-size:250%">非常に大きなテキスト</span><br>
<span style="font-size:50%">非常に小さなテキスト</span><br>
<span style="font-size:1.2em">普通よりやや大きめのテキスト</span><br>
<span style="font-size:0.8em">普通よりかなり小さ目のテキスト</span>
</p>
<p>
<span style="color:#FF0000">真っ赤なテキスト</span><br>
<span style="color:#00C000">あおいテキストといっても、緑色です。</span><br>
<span style="color:#0000FF">あおいテキスト。青色です。</span>
</p>
<p>
<span style="font-family:Avalon,Wide Latin">Avalon というフォントを使ったテキスト、
あるいは、Avalon がない場合は Wide Latinで表示されます。</span>
</p>
<div style="font-size:70%; color:#CC00CC; font-family:Verdana">
<h2>何が来るでしょうか。</h2>
<p>
普通より小さなサイズで、色は紫、フォントは Verdanaです。
</p>
</div>
</body>
</html>
|
この例で得られる効果はおおよそその前の例で得られるものと同じです。しかし font と
basefont の要素を使っていません。スタイルシートの書式設定を段落の中で行う場合は 一般的なインライン要素span を使います。それ以外の場所ではスタンドアローンタグ <basefont>
の代わりに 一般的なブロックレベル要素の
div の中で書式設定を行います。この時 span 要素や div
要素に使用したい書式のクラスを挙げ、文字の大きさ、色など具体的な指示はクラスとしてスタイルシートの中に書きます。
|
|
 |
横線
|
 HTML Tips
TOP |
© 2006
