超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap

■ HTML タグの続き

もう少し HTML タグについて見ていきましょう。

文章が多いページを作るときに欠かせないのが <p> タグと <div> タグです。これらは文章を1つの塊にするという役割があります。「1つの塊」ってわかりにくいですね。つまり「段落」です。

どちらも、同じ役割ですが、<p>〜</p> で挟まれた文章は、その文章の前後(上下)が1行空きます。<div>〜</div>で挟まれた文章の前後は空かないので、前の段落とくっつきます。

ちょっとやってみましょう。

<p align="left">
<font color="orange">
ある日森の中くまさんに出会った 花咲く森の道くまさんに出会った
</font>
</p>
<p align="center">
<font color="orange">
くまさんのいうことにゃお嬢さんお逃げなさい
</font>
</p>
<p align="right">
<font color="orange">
すたこらさっささぁのさぁ すたこらさっささぁのさぁ
</font>
</p>

ある日森の中くまさんに出会った 花咲く森の道くまさんに出会った

くまさんのいうことにゃお嬢さんお逃げなさい

すたこらさっささぁのさぁ すたこらさっささぁのさぁ

<div align="left">
<font color="orange">
ある日森の中くまさんに出会った 花咲く森の道くまさんに出会った
</font>
</div>
<div align="center">
<font color="orange">
くまさんのいうことにゃお嬢さんお逃げなさい
</font>
</div>
<div align="right">
<font color="orange">
すたこらさっささぁのさぁ すたこらさっささぁのさぁ
</font>
</div>

ある日森の中くまさんに出会った 花咲く森の道くまさんに出会った
くまさんのいうことにゃお嬢さんお逃げなさい
すたこらさっささぁのさぁ すたこらさっささぁのさぁ

こんな感じになりました。
違いわかった?
<p> タグは一行空いてるよね。
<div> タグは空いてない。


前のページの例にもあったけど、いくつかのタグを重ねて書くことで、書いたタグの属性(性質)を全部表すことができます。

<marquee> タグを使えば、文字をスクロールさせることができます。

<marquee>腰痛はつらいぞ!運動不足だな</marquee>

腰痛はつらいぞ!運動不足だな

これは、<marquee> タグだけですね。
さらに、これまで出てきたいくつかのタグを重ねてみます。

<marquee>
<i>
<b>
<font size="3" color="orange">
腰痛はつらいぞ!運動不足だな
</font>
</b>
</i>
</maquee>

腰痛はつらいぞ!運動不足だな

ってな感じになります。開始タグ(文字列の前のタグ)と終了タグ(文字列の後のタグ。閉じタグ)の順番は適当でも表示されますが、開始タグの逆順で終了タグを書いた方が、あとからわかりやすいです。


■このページに出てきたタグ■

タグ名 プロパティ 説明
<p>〜</p> 段落を作る。前後が1行空く。
<div>〜</div> 段落を作る。
<marquee>〜</marquee> 右から左へスクロール
<i>〜</i> 斜体文字

プロパティと値については、説明したものだけ書いています。
<p>〜</p> タグや <div>〜</div> タグ、<marquee>〜</marquee> タグにもプロパティと値はありますが、機会があったら説明します。