初級第２章

初級第２章：文字の表示＆アレンジ

ＨＴＭＬ言語では当然ながら文字をそのまま入力しても表示してくれません。
そこで登場するのが＜ＦＯＮＴ＞タグです。
この＜ＦＯＮＴ＞タグを使うことで、文字の大きさや色指定、さまざまなフォントタイプを使用することが出来ます。
まず、フォントタグを勉強する前に＜ＢＯＤＹ＞タグを勉強しましょう！

例１：＜BODY bgcolor="black"＞ソースサンプルを見る

このbgcolor="black"の部分に注目して下さい。
「bgcolor」はbg＝バックグラウンドの略ですから「画面全体の背景色」を表しています。
bgcolor=blackな訳ですから、背景色は「黒色」になります。
blackの部分に任意の色を指定しましょう。
もし壁紙に画像を使用する場合には、出来るだけ壁紙画像に近い色を設定することも一つのマナーです。

例２：＜BODY bgcolor="black" link="red" alink="blue" vlink="yellow"＞ソースサンプルを見る

さて、今度は赤字部分の記述が増えています。
link＝初期のリンク文字色を表しています。
alink＝クリック時のリンク文字色を表しています。
vlink＝クリック済みのリンク文字色を表しています。
“red”　“blue”　“yellow”の部分にはそれぞれ任意の色を指定しましょう。

さて、冒頭でも紹介したように文字を表示する時には＜FONT＞タグを使用します。
例をあげながら順を追って見ていきましょう！

例１：＜FONT size="6"（又は+3）＞

まず、文字のデフォルト（標準）では無条件で「３」になります。
この例では文字サイズを「６」に設定しました。
デフォルトは３なので「＋３」でも"６"でもどちらも同じ意味になります。

サイズ６はこの大きさです！

↑で紹介したように、文字デフォルトが３なので、文字サイズを小さくする時は２～１、あるいは－１～－２に設定すれば良い訳です。
同時に大きくする場合は４～７、あるいは＋１～＋４で設定します。
文字サイズのバリエーションは１～７まで使用可能です。

例２：＜FONT size="6" color="blue"＞

今度は「color="blue"」の部分が増えています。
お分かりの通り、文字サイズ６にプラスして文字色をブルーにしてみました。
サンプルは以下の通りです。

こんな感じです！

こんな風にサイズやカラーをさまざまに組み合わせることによって独自のイメージを生み出すことが出来ます。
いろいろな組み合わせを楽しみましょう！

★＜ＦＯＮＴ＞タグ内のカラー指定について★

↑ではすべて「カラーの色名」を表記してきましたが、カラーコードを使用する方法もあります。
カラーコードを使用する場合には必ずカラーコードの前に「＃」マークをつけましょう。
カラーの色名をじかに表記する場合には「＃」マークは必要ありません。

♪色見本はこちら♪

★★文字の表示エリアの指定について★★

文字を表示する場所も指定することが出来ます。
例えばタイトルは画面の真ん中に表示したいですよね？
右詰にしたいのか左詰にしたいのか、あるいは真ん中に揃えたいのか。
その指定の仕方を学んでみましょう！

＜P align="center"＞

このタグを冒頭に付け加えることによって、文字は勝手に真ん中に表示されます。
表示エリアは全部で３種類。
"center"の部分を左にしたい場合は"left"。
右にしたい場合は"right"です。

左寄せです♪＜P align="left"＞

真ん中です♪＜P align="center"＞

右寄せです♪＜P align="right"＞

これ以外にも、文字を装飾する方法があります。
例えば「文字を斜めに傾ける」や「文字をデフォルトより太くする」、「文字にアンダーラインをつける」などなど。
例をあげながらやってみましょう！

種類１：＜B＞　～　＜/B＞

この＜B＞タグは、文字をデフォルト（標準）より若干太く表示します。
太くしたいエリアの最後には必ず忘れずに＜/B＞タグで閉じましょう。
「～」の部分に任意の文字を入れます。
例を見てみましょう。

例：太字のサンプルです！

若干文字が太く表示されているのが分かりますか？
強調表示したい場合などに便利です。

種類２：＜I＞　～　＜/I＞

次は「傾いた文字」を学びましょう。
＜I＞タグを文頭に使うことによって、勝手に文字が傾いたように表示されます。
やはり「～」の部分に任意の文字が入ります。
文末は必ず＜/I＞タグで閉じましょう。

例：斜体のサンプルです！

文字が斜めに傾いていますね？
ちょっとした遊び感覚で使えると思います。
ぜひ試してみましょう！

種類３：＜U＞　～　＜/U＞

このタグは「文字にアンダーラインを付ける」時に使います。
やはり強調表示の一つです。
「～」の部分に任意の文字が入ります。やはりこれも文末はスラッシュタグで閉じましょう。

例：アンダーラインのサンプルです！

このように、文字の強調表示だけでも３タイプの楽しみ方があります。
いろいろ組み合わせても更にバリエーションが広がりますよね。
もちろん上記の３タイプのタグを１行全部に使うことも可能です。
とにかく試してみましょう！

文字の表示については、以上が基本です。
なんとなく分かりましたか？
分からない場所があれば、掲示板でもメールでも遠慮なく質問して下さい。
それでは次の章に進みましょう！

　　　

例１：＜BODY bgcolor="black"＞ソースサンプルを見る
	ＨＴＭＬ言語では当然ながら文字をそのまま入力しても表示してくれません。そこで登場するのが＜ＦＯＮＴ＞タグです。この＜ＦＯＮＴ＞タグを使うことで、文字の大きさや色指定、さまざまなフォントタイプを使用することが出来ます。まず、フォントタグを勉強する前に＜ＢＯＤＹ＞タグを勉強しましょう！
	このbgcolor="black"の部分に注目して下さい。「bgcolor」はbg＝バックグラウンドの略ですから「画面全体の背景色」を表しています。 bgcolor=blackな訳ですから、背景色は「黒色」になります。 blackの部分に任意の色を指定しましょう。もし壁紙に画像を使用する場合には、出来るだけ壁紙画像に近い色を設定することも一つのマナーです。
例２：＜BODY bgcolor="black" link="red" alink="blue" vlink="yellow"＞ソースサンプルを見る
	さて、今度は赤字部分の記述が増えています。 link＝初期のリンク文字色を表しています。 alink＝クリック時のリンク文字色を表しています。 vlink＝クリック済みのリンク文字色を表しています。 “red”　“blue”　“yellow”の部分にはそれぞれ任意の色を指定しましょう。

例１：＜FONT size="6"（又は+3）＞
	さて、冒頭でも紹介したように文字を表示する時には＜FONT＞タグを使用します。例をあげながら順を追って見ていきましょう！
	まず、文字のデフォルト（標準）では無条件で「３」になります。この例では文字サイズを「６」に設定しました。デフォルトは３なので「＋３」でも"６"でもどちらも同じ意味になります。
サイズ６はこの大きさです！
	↑で紹介したように、文字デフォルトが３なので、文字サイズを小さくする時は２～１、あるいは－１～－２に設定すれば良い訳です。同時に大きくする場合は４～７、あるいは＋１～＋４で設定します。文字サイズのバリエーションは１～７まで使用可能です。
例２：＜FONT size="6" color="blue"＞
	今度は「color="blue"」の部分が増えています。お分かりの通り、文字サイズ６にプラスして文字色をブルーにしてみました。サンプルは以下の通りです。
こんな感じです！
	こんな風にサイズやカラーをさまざまに組み合わせることによって独自のイメージを生み出すことが出来ます。いろいろな組み合わせを楽しみましょう！
★＜ＦＯＮＴ＞タグ内のカラー指定について★
	↑ではすべて「カラーの色名」を表記してきましたが、カラーコードを使用する方法もあります。カラーコードを使用する場合には必ずカラーコードの前に「＃」マークをつけましょう。カラーの色名をじかに表記する場合には「＃」マークは必要ありません。
♪色見本はこちら♪

★★文字の表示エリアの指定について★★
	文字を表示する場所も指定することが出来ます。例えばタイトルは画面の真ん中に表示したいですよね？右詰にしたいのか左詰にしたいのか、あるいは真ん中に揃えたいのか。その指定の仕方を学んでみましょう！
＜P align="center"＞
	このタグを冒頭に付け加えることによって、文字は勝手に真ん中に表示されます。表示エリアは全部で３種類。 "center"の部分を左にしたい場合は"left"。右にしたい場合は"right"です。
左寄せです♪＜P align="left"＞
真ん中です♪＜P align="center"＞
右寄せです♪＜P align="right"＞

種類１：＜B＞　～　＜/B＞
	これ以外にも、文字を装飾する方法があります。例えば「文字を斜めに傾ける」や「文字をデフォルトより太くする」、「文字にアンダーラインをつける」などなど。例をあげながらやってみましょう！
	この＜B＞タグは、文字をデフォルト（標準）より若干太く表示します。太くしたいエリアの最後には必ず忘れずに＜/B＞タグで閉じましょう。「～」の部分に任意の文字を入れます。例を見てみましょう。
例：太字のサンプルです！
	若干文字が太く表示されているのが分かりますか？強調表示したい場合などに便利です。
種類２：＜I＞　～　＜/I＞
	次は「傾いた文字」を学びましょう。＜I＞タグを文頭に使うことによって、勝手に文字が傾いたように表示されます。やはり「～」の部分に任意の文字が入ります。文末は必ず＜/I＞タグで閉じましょう。
例：斜体のサンプルです！
	文字が斜めに傾いていますね？ちょっとした遊び感覚で使えると思います。ぜひ試してみましょう！
種類３：＜U＞　～　＜/U＞
	このタグは「文字にアンダーラインを付ける」時に使います。やはり強調表示の一つです。「～」の部分に任意の文字が入ります。やはりこれも文末はスラッシュタグで閉じましょう。
例：アンダーラインのサンプルです！
	このように、文字の強調表示だけでも３タイプの楽しみ方があります。いろいろ組み合わせても更にバリエーションが広がりますよね。もちろん上記の３タイプのタグを１行全部に使うことも可能です。とにかく試してみましょう！