Lesson6: 文字を装飾してみよう


 今回のレッスンでは、文字の装飾を教えます。
 文字の装飾といえどもいろいろあります。今回は長いですよ!

 それから、ここからのレッスンでは<font></font>タグを使います。
 これを基本として、さらにどんどん装飾していきましょう!


文字の大きさを変えてみよう


 それでは最初に文字の大きさを変えて見ましょうか。
 文字の大きさはすごく自由に変えられます。

 どうでしょうか。
 タグはこんな感じです。

 一文字一文字変えたのですごくタグが長くなっていますが、普段なら文章ごとやるものです。
 あんまりやるとウザがられます。

 このサイズを指定している数字の部分は、相対的な大きさを表しています。
 数字で指定するのがめんどくさい!という方は


 を使うと手っ取り早く大きくしたり小さくしたりできます。


文章を強調しよう


 文章の中で「この部分だけ強調したい!」ということはありませんか?
 そういうときは、太字(Bold)斜体(Italic)下線(Underline)を使うと楽にできます。



 すごくシンプルです。ちなみにこれは入れ子構造にすることによって、合わせて使うことができます。
 こういったふうに。
 さっきのフォントサイズ変えも一緒に使うと
 こんなふうになります。


文字の色を変えてみよう


 次は文字色を変えてみましょう。
 文字色を変えるタグは以下のとおりです。

 Lesson4で紹介したカラーコード表を見て、好きな色を選んで””の中に入れてください。
 そして<font></font>の間に文字を入れると、
文字の色が変わります。
 ちなみにタグは以下のとおりですよ。

 参考にしていろいろ遊んでみるといいかもしれません。
 ただし、背景と比べて見づらい色とかにすると意味がないのでちょっと考えたほうがいいかもしれませんね。


フォントを変えてみよう


 今まで表示していた文字は、ブラウザのデフォルトフォントだと思います。
 デフォルトフォントをいじっている方はちゃんとそれになっているはず。
 それでは強制的にフォントをいじってみましょう。
 WindowsやMacにデフォルトで入ってるフォントならよっぽどのことがない限り大丈夫なはずです。
 初心者にやさしいホームページ講座

 どうでしょうか。HG丸ゴシックM-PROがフォントとして入ってる方にはちゃんとフォントが変わって見えたはずです。

 ちなみに英字フォントを指定して日本語で書いてみるとどうなるでしょうか?
 初心者にやさしいホームページ講座
 How to Homepage to Begginer
 どう見えましたか?おそらく日本語のほうは何も変わってないかと思います。  フォントを指定するときは気をつけましょう。


まとめ


 いかがでしたか?
 これまで紹介したfontタグは全部いっしょくたに使うことができます。
初心者にやさしいホームページ講座

 さらにこのタグにリンクタグをかぶせることもできます。
 強調したい文字に使ってみるのもいいですね。

 ページ単位で指定する方法はあるのですが、それはまた別の機会に。
 あくまで初心者向けなので、これ以上の方法は違うページでご紹介します。


→ Lesson7へ