文字を飾ってみよう

HTMLには、文字の見た目を変えるための要素がたくさんあります。

ここではその中でもよく使われている要素を解説します。

文字の大きさ、色などを変えるFONT要素

FONTという要素があります。開始タグは、終了タグはです。

ですがこのfontというタグで文字を挟んだだけではなんの効果もありません。開始タグに大きさや色を変えたりするための属性を書く必要があります。

文字のサイズを変更してみよう

文字の大きさを変えるには、「size」という属性を使います。開始タグをと書きます。"と"の間には1から7までの数字を入れることができます。 なにも指定していない場合は、3が標準のサイズになります。

実際に書いて試してみましょう。

HTMLが長くなってきたので、中略します。前回の続きにh2要素で「FONT要素の練習」と書いて、その下にh3要素で「文字のサイズを変えてみる」と書き、さらにその下にp要素で以下のように書いてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

中略

<h2>FONT要素の練習</h2>
<h3>文字のサイズを変えてみる</h3>
<p>
<font size="1">サイズ1</font>
<font size="2">サイズ2</font>
<font size="3">サイズ3</font>
<font size="4">サイズ4</font>
<font size="5">サイズ5</font>
<font size="6">サイズ6</font>
<font size="7">サイズ7</font>
</p>
</body>
</html>

表示例

FONT要素を使った部分はサイズ1から7まで、以下のように表示されるはずです。

文字の色を変えてみよう

文字の色を変えるには、color属性を使用します。例えば赤い色にしたい場合には、 と開始タグを書きます。青なら、です。

このようにして、 black、 silver、 gray、 white、 maroon、 red、 purple、 fuchsia、 green、 lime、 olive、 yellow、 navy、 blue、 teal、 aqua の16種類の色を指定することができます。

ですが、もちろんHTMLで使える色の種類はこれだけではありません。これ以外の色も使いたい場合は16進数という特殊な数字の書き方を使わなければいけません。

例えば、これで と書くのと同じ意味になります。 は、と表します。

このように、何通りもの16進数を当てはめることで、数え切れないくらいの色を表すことができます。が、こんなものは覚えようと思っても簡単に覚えられるものではありません。 そこで、どの16進数でどんな色が表示されるのかがわかる表を作ってみました。是非参考にしてください。

実際に書いて表示させてみよう

それではcolor属性を使ったFONT要素も、実際に書いて表示させてみましょう。

さっきのsize属性を使って書いた段落の続きに、H3の見出しで今度は「文字の色を変えてみる」と書いて、さっきと同じようにP要素の中に、アルファベットで書ける16色を書いてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

中略

<h3>文字の色を変えてみる</h3>
<p>
<font color="black">black</font>
<font color="silver">silver</font>
<font color="gray">gray</font>
<font color="white">white</font>
<font color="maroon">maroon</font>
<font color="red">red</font>
<font color="purple">purple</font>
<font color="fuchsia">fuchsia</font>
<font color="green">green</font>
<font color="lime">lime</font>
<font color="olive">olive</font>
<font color="yellow">yellow</font>
<font color="navy">navy</font>
<font color="blue">blue</font>
<font color="teal">teal</font>
<font color="aqua">aqua</font>
</p>
</body>
</html>

表示例

へてむるクリエイターの場合

右クリックして「タグの挿入」の「フォントスタイル」にある「文字のサイズと色」か、タグパレットの「カスタム」の左から三番目か「フォント」の一番左のアイコンをクリックすると、文字サイズや文字色を選ぶためのウィンドウが出てきます。

色を変えたいとき、へてむるクリエイターなら、自分でタグに色のアルファベットや16進数を打ち込まなくても、ソフトで色を選ぶだけでOKです。

こういう点では、自力でメモ帳で打ち込むよりも、へてむるクリエイターのようなhtmlエディタは非常に優れているといえます。

実は使えないFONT要素

ここまで長々と説明しましたが、実はFONT要素はあまりおすすめできるものではありません。 無意味に文字を大きくしたり、必要以上にカラフルな使っているホームページは、大体は見づらいものです。

そもそもなんで文字を大きくしたり、色を変えたりするかというと、ページの見出しにしたり、特定の部分を強調したいからということが多いので、それならば見出しはH要素、他の部分は強調するためのEM要素、STRONG要素とCSS(スタイルシート)を組み合わせて使えばいいのです。

br要素と同じく、できるだけこれを使わずにスタイルシートを使ってサイトを作ることが初心者から抜け出す一歩といえるでしょう。