ホームページ作成ちょー入門

page 1 / 2 / 3 / 4

2.5.見出しを作ろう

ファイルを次のように変えてみましょう．赤で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
<H1>ねこマニアのホームページへようこそ．</H1>
<H2>ねこマニアのホームページへようこそ．</H2>
<H3>ねこマニアのホームページへようこそ．</H3>
<H4>ねこマニアのホームページへようこそ．</H4>
<H5>ねこマニアのホームページへようこそ．</H5>
<H6>ねこマニアのホームページへようこそ．</H6>
</BODY>
</HTML>

次のようになれば成功です．

ねこマニアのホームページへようこそ．

「H1」~「H6」は見出しであることを表すタグです．数字が大きいほど，見出し文字は大きくなります．また，段落を表す「P」と同様，「align」のオプションが使えます．「align="center"」とすれば中央に，「align="left"」とすれば左に，「align="right"」とすれば，右に見出しが揃えられます．オプションが記述されていない状況では，左揃えになります．

2.6.文章を箇条書きにしよう

ファイルを次のように変えてみてください．赤，緑，青で表示されている部分が，主な変更・追加箇所です．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
<UL>
<LI>ねこマニアのホームページへようこそ．
<LI>ねこマニアのホームページへようこそ．
<UL>
<LI>うさぎマニアのホームページへようこそ．
<LI>すなめりマニアのホームページへようこそ．
</UL>
<LI>ねこマニアのホームページへようこそ．
</UL>
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．
- うさぎマニアのホームページへようこそ．
- すなめりマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．

箇条書きリストを表示するには，まずリスト全体を<UL>と</UL>で囲み，その間に項目を，あたまに「LI」のタグをつけて，並べていきます．また，上の例のように，リストの間に，さらにリストを指定してやると（青い方のULね），サブリストを表示することができます．

もうすこしつづけましょう．今度は，上の「UL」タグを「OL」に変えてみましょう．どうなりましたか？

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
<OL>
<LI>ねこマニアのホームページへようこそ．
<LI>ねこマニアのホームページへようこそ．
<OL>
<LI>うさぎマニアのホームページへようこそ．
<LI>すなめりマニアのホームページへようこそ．
</OL>
<LI>ねこマニアのホームページへようこそ．
</OL>
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．
1. うさぎマニアのホームページへようこそ．
2. すなめりマニアのホームページへようこそ．
ねこマニアのホームページへようこそ．

もうわかりましたね．「OL」タグは，番号つきリストを表示させるためのタグです．必要に応じて使い分けましょう．

2.7.水平線を入れよう

次は簡単です．次のように段落（P）と段落の間に次の「HR」タグを入れてみましょう．

<HTML>
<HEAD>
<TITLE>ねこマニアのホームページ</TITLE>
</HEAD>
<BODY bgcolor="#ffeedd" text="#996600" link="#ff9900" vlink="#cc9966" alink="#ffcc00">
<P>ねこマニアのホームページへようこそ． </P>
<HR>
<P>うさぎマニアのホームページへようこそ．</P>
</BODY>
</HTML>

次のように表示されれば成功です．

ねこマニアのホームページへようこそ．

うさぎマニアのホームページへようこそ．

このように，「HR」タグは水平線を表示するタグです．改行タグ「BR」と同様に，「/<…>」とセットではなく，それだけで水平線の機能を果たします．

次ページへ

page 1 / 2 / 3 / 4