楽の出来るホームページの作り方

このページは、XHTML 文書で箇条書きや、番号順のリストの書き方を説明したものです。このページで説明している要素を使ったサンプルを見ながら説明を読むと分かりやすいと思います。

---

箇条書きにする

文章を書いていて、多くのことをまとめて分かりやすく表現するのに、箇条書きを使うこともあると思います。メニューの項目などを書くときにも、よく使いますよね。XHTML 文書でも箇条書きを使うことが出来ます。箇条書きを書くには、ul 要素と li 要素を組み合わせて使います。次の例を見てください。ちなみに下の例は、「ウェブの箱」のアクセス解析の情報から、主要なブラウザを箇条書きにしたものです。

<ul>

    <li>Internet Explorer 4.x</li>

    <li>Internet Explorer 5.x</li>

    <li>Netscape 3.x</li>

    <li>Netscape 4.x</li>

    <li>Netscape 5.x</li>

</ul>

<ul>タグで囲んで ul 要素になっている部分は、箇条書きになります。そして li 要素の内容が、箇条書きの項目の内容になります。注意として、 ul 要素の中では、直接 li 要素以外の要素を書くことは出来ません。

---

番号順のリストにする

XHTML 文書では、箇条書きの先頭に数字を振って、番号順のリストにすることも出来ます。番号順のリストにするには、ul 要素ではなく、ol 要素を使います。書き方は、箇条書きとほとんど変わりません。次の例を見てください。先のブラウザの箇条書きを、アクセスの多い順に並べたものです。

<ol>

    <li>Internet Explorer 5.x</li>

    <li>Netscape 4.x</li>

    <li>Internet Explorer 4.x</li>

    <li>Netscape 5.x</li>

    <li>Netscape 3.x</li>

</ol>

<ol> タグで囲んで ol 要素になっている部分は、番号順のリストになります。そして li 要素の内容が、リストの項目の内容になります。ul 要素と同じく、 ol 要素の中でも、直接 li 要素以外の要素を書くことは出来ません。

---

定義リストにする

XHTML 文書では、定義リストと呼ばれるリストを使うことも出来ます。定義リストというのは、簡単な文章とその説明の文章の組み合わせがリストになったものです。辞書を想像すると、分かりやすいかもしれません。辞書は単語とその説明の組み合わせですよね。次の例を見てください。

<dl>

    <dt>Yahoo!</dt>

    <dd>

        初心者がまず最初に使うのはこの検索エンジンでは

        ないでしょうか。効果は高いですが、登録されるのが

        難しいです。

    </dd>

    <dt>Infoseek</dt>

    <dd>

        検索ロボットで自動で情報を集めてくるタイプの

        検索エンジン。登録の申し込みから2日程度で

        反映されるのは、好感が持てます。

    </dd>

    <dt>Lycos</dt>

    <dd>

        Infoseekと同じく、検索ロボットを使うタイプの

        検索エンジン。スパムに弱い感じがします。

    </dd>

</dl>

このように、何かを説明するのに便利なリストです。