FujiPro「ウェブマスター」

FujiMan Production - ウェブマスター -

ホームページ制作講座 for Windows
文字効果(1)

トップページ＞ウェブマスター＞ホームページ制作講座＞文字効果(1)

■お手軽な文字効果

　タグの使い方に慣れる意味で、さきほど入力した文字に細工をしてみましょう。

sample01.html

<HTML>
<BODY>
FujiMan Productionのホームページ
</BODY>
</HTML>

　さきほど入力したメモ帳に赤字の部分を追加してみましょう。

　保存するファイル名は、そのまま「try.html」でいきましょう。同じ名前で保存した場合は、ブラウザをリロード（再読込）するだけで確認できます。

　ここでは説明しやすくするために「sample01.html」とか「sample02.html」のように保存するファイル名を変えていますが、あなたが試される場合は、「try.html」で保存してください。それが楽だと思います。

　さあ、どうなりましたか？　

そうです、～は文字を太字(Bold)にするタグだったのです。

sample02.html

<HTML>
<BODY>
FujiMan Productionのホームページ
</BODY>
</HTML>

　こんどは、さきほどの「B」の部分を「I」に変えてみましょう。
　どうなりましたか？　

～はどうやら斜体(Italic)にするタグのようですね。

sample03.html

<HTML>
<BODY>
FujiMan Productionのホームページ
</BODY>
</HTML>

では、これはどうでしょうか？・・結果を想像してみてください。

　タグで指定するのは、「最初と最後」の部分・・・つまり、その間にはさまれた部分であることを考えてみれば分かりますよ。

　～ではさまれている部分は「FujiMan Production」の文字ですから、ここは「斜体」になるのは分かりますね。
　～ではさまれているのは「FujiMan Productionのホームページ」の文字ですから、ここは「太字」になります。
　「FujiMan Production」は両方のタグの指示を受けて、「斜体」であり「太字」になります。どうでしょう、分かるかな？

　このように、効果を与えたい部分の前後をタグではさむことで、その効果を出すことができます。その範囲は他のタグの影響を受けることは、一部を除いてありません。

　他にも文字効果に関連するタグが下記のようにありますから、いろいろと試してみてみるといいでしょう。

**文字に効果を与えるタグの一覧**
タグ	意味	使用例	表示結果
<B>	太字	<B>強調だぞ</B>	強調だぞ
<I>	斜線	<I>学術名</I>	学術名
<U>	下線	<U>はいここ大切</U>	はいここ大切
<S>	取消線	<S>期限切れ</S>	~~期限切れ~~
<SMALL>	小さい文字	<SMALL>ここだけ小さく</SMALL>	ここだけ小さく
<BIG>	大きい文字	<BIG>ここ大きく</BIG>	ここ大きく
<SUP>	肩付き文字	1k(キロ)は10<SUP>3</SUP>	1k(キロ)は10³
<SUB>	下付き文字	水分子はH<SUB>2</SUB>O	水分子はH₂O

<-RETURN