文字のいろいろ
文字の大きさを変えよう
文字の大きさをを変えるには<font>（フォント）タグを使います。
<font>HTMLを書いてみよう。</font>
大きさは数字で指定します。指定するためには数字だけを入力してもコンピューターは何の数字かわかりません。 そこで<font>タグの中にsizeと入力します。
<font size="">HTMLを書いてみよう。</font>
"（ダブルコーテーション）のなかに数字を入力して大きさを指定します。
大きさを 2 にするのであれば
<font size="2">HTMLを書いてみよう。</font>
HTMLを書いてみよう。
と入力します。指定出来る数字は1〜7までです。
サイズ指定していません。 |
→ | サイズ指定していません。 |
<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です。 |
それでは実際に書いてみましょう。
『HTMLを書いてみよう。』の文字の大きさを 5 で表示してみて下さい。
<font size="5">HTMLを書いてみよう。</font>
では次は『HTMLを書いてみよう。』の文字の大きさを 2 で表示してみて下さい。
<font size="2">HTMLを書いてみよう。</font>
数字を変えると文字の大きさが変わりましたか？
では文章の一部分だけを変えてみましょう。
『HTMLを書いてみよう。』の「HTML」の文字の大きさを 6 で、
それ以外は大きさの設定なしで表示してみて下さい。※設定がない場合はブラウザの設定に依存します。
<font size="6">HTML</font>を書いてみよう。
文字に色をつけてみよう
文字の大きさを変える時は size を使いましたが、文字に色をつける時はcolor（カラー）
を使います。
たとえば文字の色を青にしたい場合は
<font color="blue">HTMLを書いてみよう。</font>
HTMLを書いてみよう。
付けたい色の名前を"（ダブルコーテーション）のなかに入力するだけです。
世の中に色は数えきれないくらいあります、下の表に一部ですが色と名前をのせておきます。カラーパレットの左側が色の名前です。
| white | black | gray | lightgrey | ||||
|---|---|---|---|---|---|---|---|
| blue | skyblue | steelblue | midnightblue | ||||
| red | maroon | orange | yellow | ||||
| pink | hotpink | purple | magenta | ||||
| green | darkgreen | greenyellow | olive |
それでは実際に書いてみましょう。
『HTMLを書いてみよう。』の文字の色を 赤色 にしてみて下さい。
<font color="red">HTMLを書いてみよう。</font>
『HTMLを書いてみよう。』の文字の色を 緑色 にしてみて下さい。
<font color="green">HTMLを書いてみよう。</font>
色の名前を変えていろいろ試してみましょう。
大きさを変え色も付ける
それでは文字の大きさと文字の色を組み合わせて使ってみましょう。
文字の大きさを変えさらに色を変える場合は
<font size="5"><font color="red">HTML</font></font>を書いてみよう。
HTMLを書いてみよう。
と入力しても出来ますが<font>〜</font>を2回書かなくてはいけません。めんどうです。
そこで<font>の中に size も color もいっしょに入れてしまいましょう。
<font size="5" color="red">HTML</font>を書いてみよう。
HTMLを書いてみよう。
とスペースを空けて続けて書くことができます。
では実際に書いてみましょう。
出来ましたか？
『HTMLを書いてみよう。』の『書いて』の文字の大きさを 5 色を 黄色 で表示してみて下さい。
HTMLを<font size="5" color="yellow">書いて</font>みよう。
次のページでは文字を装飾（そうしょく）する方法を見ていきましょう。