便利なタグ
コメント
　<!--コメント-->
たくさんタグを書いていると何がなんだか分からなくなってきます。そんな時には、ＨＴＭＬファイルの中にメモを書いておくと良いです。コメントはブラウザには表示されません。


罫線を引く
　<hr>
区切りとして罫線を引きたいときは、<hr>タグを使います。この罫線は、ウィンドウの幅いっぱいに引かれます。終了タグはありません。


センタリング
　<center>〜</center>
タイトルなどの文字を中央に配置したいときは<center>タグを使います。


右に寄せたい
　<div align="right">〜<div>
文書の日付みたいに右に寄せて表示したい場合は、<div>タグのalignオプションにrightを指定します。rightの部分をleftにすれば左寄せ、centerにすればセンタリングになります。

パンダ<div>はdivision（区分、境界）で、<p>はparagraph（段落）の意味を表しています。これらのタグはレイアウトに関係なく文章の構造を表すためのものです。しかし、<p>を指定すると１行空くので、改行の変わりに使われることもあります。


　<ul><li>〜</li></ul>
このタグを使うと、先頭に・がついた箇条書きが簡単に作れます。 箇条書きリストの最初に<ul>タグを書き、 最後に</ul>を書きます。それぞれの項目の前に<li>タグを書きます。 この場合、項目ごとに自動的に改行されますので<br>タグは必要ありません。


サンプル.

<html>
<head>
<title>パンダの家</title>
</head>
<body>

箇条書きリスト<br>
<ul>
<li>パンダ</li>
<li>コアラ</li>
<li>ラッコ</li>
</ul>

</body>
</html>


番号リストを作ろう
　<ol><li>〜</li></ol>
先ほどの<ul>タグを <ol>タグに置き換えると番号リストになります。番号は１から順番にふられます。番号を直接書くのに比べて、間違いが防げます。

サンプル.

<html>
<head>
<title>パンダの家</title>
</head>
<body>

番号リスト
<ol>
<li>パンダ</li>
<li>コアラ</li>
<li>ラッコ</li>
</ol>

</body>
</html>


見出しの文字
　<h1>〜</h1>
　<h2>〜</h2>
　<h3>〜</h3>
　<h4>〜</h4>
　<h5>〜</h5>
　<h6>〜</h6>
見出しの文字を書くときに使うタグです。大きさは<h1>〜<h6>までの６段階で、<h1>が一番大きく、<h6>がもっとも小さい文字になります。<font>タグのSIZEの指定とは逆になりますので注意しましょう。
このタグも<p>や<div>と同様に文章の構造を表すタグです。文字サイズを指定したいだけのときは<font>タグを使います。

同じ働きのタグ

センタリングは<center>と<div align="center>、文字の大きさは<font>と<h1>と同じ働きをするタグがなぜ２種類もあるのかと不思議に思われることでしょう。本来ＨＴＭＬは文章の構造を表すものであり、レイアウトはブラウザに任せていました。しかし、インターネットの発達によりきれいなレイアウトが求められるようになり、レイアウトを指定するタグが追加されたのです。


最後に
これで20個のタグを覚えました。 これだけでも、かなりのページを作れるようになります。 しかし、タグとそのオプションはまだまだたくさんあります。たくさんのタグを知れば、より良いページが作れます。
よい勉強法のひとつとして、他人のホームページを真似するというのがあります。いいなと感じるページがあったら、どんどん取り入れてください。そのときにソースをじっくりと見て新しいタグやタグの使い方を学んでください。



メニューへ
 戻る