戻る
文字に色をつけよう!
'02/05/06

 ホームページの簡単な基礎はできました。次に、文字の装飾をしていきましょう。
 文字の装飾。つまり、文字を大きくしたり色を変えたり、強調、斜体等のことです。

 はじめに。文字の大きさや色を変える<font>での記述は、まだ使うことはできるのですが、今後消えていく予定のタグです。
 今後これら色やサイズの変更は、<font>のHTMLではなく、スタイルシートで記述しようというのが現在の考え方です。

 スタイルシートは後々行うとして、今回は、簡単に、この<font>を使って説明していきます。

 文字の装飾には、いくつかの種類があります。その中でも良く使われるのが、「太字」、「斜体」、「下線」と「文字の色」や「文字の大きさ」です。
 「太字」、「斜体」、「下線」のタグは、ワード等ワープロソフトのツールバーでも良く見かける「<B>(Bold)」、「<I>(Italic)」、「<U>(Underline)」になります。
 それぞれ、
<b>ここに文字を入力</b> … ここに文字を入力
<i>ここに文字を入力</i> … ここに文字を入力
<u>ここに文字を入力</u> … ここに文字を入力
と、なります。
 終わりのタグ(</〜〜>)を忘れると、どこまでも続いてしまうので、忘れないようにしましょう!
 以下を「ex004.html」として保存してブラウザで実行して見てください。
---- ex004.html ----
<html>
<head>
<title>文字の装飾</title>
</head>
<body>
<b>太字の文字はタイトルで?</b><br>
<i>斜体は引用の時に使うかな?</i><br>
<u>下線は…強調かな?</u><br>
</body>
</html>
 では、太字で斜体の文字や、斜体と下線の文字はどう表現するでしょう。
 以下を「ex005.html」として保存し、ブラウザで実行してください。
---- ex005.html ----
<html>
<head>
<title>文字の装飾</title>
</head>
<body>
<b><i>太字と斜体</i></b><br>
<i><u>斜体と下線</u></i><br>
</body>
</html>
 以上のように、タグは入れ子にして使うこともできます。

 では、次に文字の色や大きさを変えて見ましょう。
 最初に紹介した<font>タグを使用します。fontは書体という意味で、文字の色を変えたいときは<font color="red">赤色</font>というように、color(カラー)を指定します。また、大きさを変えたいときは、<font color="2">小さく</font>というように、size(サイズ)を指定します。
 まず、文字の色から始めましょう。
 文字に色をつけるときは色を指定すれば良いのですが、英語で表現する方法と、16進数表記で表現する方法があります。
 例えば、
<font color="red">赤色の文字</font> … 赤色の文字
<font color="#ff0000">赤色の文字</font> … 赤色の文字
は、両方とも同じ「赤」を表します。
 英語と16進数、どちらを使用しても構わないのですが、英語の表示だとブラウザによって多少色に違いが出たり、認識しないことがあるので注意してください。
 16進数を簡単に説明すると、#ff0000の最初の#は「16進数ですよ」ということを宣言し、最初の2桁"ff"は、赤色。次の2桁"00"は緑色。最後の2桁"00"は、青色を表しています。
 それぞれの色をどの程度の強さで表示するか、そのバランスですね。
 例えば、#000000の場合、黒くなり、逆に#ffffffだと白になります。
 16進数ですから、0から9までと、aからfまでで表示します。
 ←濃い---------------------薄い→
「0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f」
 この<font>も、終わりのタグを忘れるとずーっと、同じ色で表示されてしまいます。

 最後に、文字の大きさです。文字の大きさは、数字でサイズを決めます。
<font size="1">1の大きさ</font> … 1の大きさ
<font size="2">2の大きさ</font> … 2の大きさ
<font size="3">3の大きさ</font> … 3の大きさ(標準サイズ)
<font size="4">4の大きさ</font> … 4の大きさ
<font size="5">5の大きさ</font> … 5の大きさ
<font size="6">6の大きさ</font> … 6の大きさ
<font size="7">7の大きさ</font> … 7の大きさ

 サイズは3が標準サイズとなり、最大7まで大きくなります。
 また、現在のサイズが3の場合、<font size="+1">+1のサイズ</font>とすると、+1のサイズつまり4の大きさで表示されます。同じように+2や、-1なども可能です。

 <font>以外にも、<small></small>や<big></big>というタグもあります。
 では、文字の大きさと色を同時にしたい場合はどうすれば良いでしょうか。
 もちろん、入れ子にしても構いません。
 しかし、もっと簡単な方法があります。
<font color="#0000ff" size="2">小さな青い文字</font> … 小さな青い文字
 このように、colorとsizeを一緒に指定することができます。
 以下を「ex006.html」として保存してください。
---- ex006.html ----
<html>
<head>
<title>文字装飾まとめ</title>
</head>
<body>
<i>'02/05/05</i><br><br>
<font color="#ff0000" size="5"><b>文字の装飾</b></font><br>
文字の装飾で、文字を強調し目立たせることで、<br>
重要な部分を引き立てることができます。<br>
例えば、<br>
<br>
<i>エンタープライズ艦内</i><br>
<font color="#dc143c"><b>ピカード</b></font>「報告!」<br>
<font color="#EEDD22"><b>データ</b></font>「ロミュランです、艦長。」<br>
といった具合(笑)
</body>
</html>
 他にもタグの組み合せを変えたり、いろんな色を使ってみてください。

-トップ-


2002/05/04
http://www.geocities.co.jp/Hollywood-Theater/4449/
作成者:stingo(スティンゴ) stingo@yahoo.co.jp