リスト

普通の箇条書き

リストというのはいわゆる箇条書きのことです。

サイトを作っていると、なにかを縦に並べて表示させたいときがあるでしょう。 メニューなんかがいい例です。

わかりやすい例として、「果物リスト」を作るとします。

果物といえばりんご、みかん、もも、バナナ、メロン…これは私がパッと思いついた だけのもので、別に何でも構いません。 これをHTMLで箇条書きにすると以下のようになります。

箇条書きにしてリストを作るには、UL要素とLI要素を組み合わせて使います。 さっきの例ですと、以下のようにして使います。

<ul>
<li>りんご</li>
<li>みかん</li>
<li>もも</li>
<li>バナナ</li>
<li>メロン</li>
</ul>

このように、UL要素はリスト全体を囲うための要素です。 一方LI要素はリストの中の一つ一つの項目を表す要素です。 つまり、LI要素は必ずUL要素の中に書かなければいけません。 たまに単独でLI要素だけ書いてる人がいますがそれは間違いです。

なにも指定しないと、上の例のように、各LI要素の項目に黒い丸がつきますが、 スタイルシートで消したり、他の記号や画像に変えることができます。

スタイルシートを使わなくてもtype属性というもので同じようなことができるのですが、 おすすめできる方法ではないのでここではあえて説明しません。

順序つきのリスト

UL属性で作ったリストは各項目に順番はありませんが、何か決まった順番があるものを リストにしたくなることがあるかもしれません。 例えば料理の手順などはどうでしょうか。 そういう場合はOL要素でリストを作ると便利です。

  1. 水を入れる
  2. みりんを大さじ一杯
  3. 塩こしょうを少々

このように、LI要素で作った項目の頭に1から順番に数字がついて表示されます。

上の例の書き方は下のようになります。

<ol>
<li>水を入れる</li>
<li>みりんを大さじ一杯</li>
<li>塩こしょうを少々</li>
</ol>

UL要素と同じように、OL要素もtype属性でLI要素の頭につく番号を「1,2,3…」以外に「A,B,C… 」や「i,ii,iii」などにすることができますが、やはりスタイルシートで同じようなことができるので、 ここでは省きます。

用語を解説するためのリスト

ここまで普通のリスト（UL要素）、番号つきのリスト（OL要素）の 二つのリストの作り方を説明してきましたが、もう一つリストを作るための要素があります。

これはちょっと上で説明したリストとは違うもので、何かの用語と、それを解説するためのリストを 作るための要素です。

これだけではなんのことかわからないと思うので、実際に例をあげて説明します。

p
段落を作る
em
強調する
strong
より強調する
a
ハイパーリンク
img
画像を埋め込む

各項目ごとに、なにかの用語の名前と、その解説がありますよね。

今までのおさらいになって一石二鳥でしょう（笑）？

どうやってタグを書いているかというと、下のようなります。

<dl>
<dt>p</dt><dd>段落を作る</dd>
<dt>em</dt><dd>強調する</dd>
<dt>strong</dt><dd>より強調する</dd>
<dt>a</dt><dd>ハイパーリンク</dd>
<dt>img</dt><dd>画像を埋め込む</dd>
</dl>

まずDL要素でリスト全体を作ります。 そしてDT要素で解説する用語の名前、そして次にDD要素でその用語の解説を書きます。 つまり、DL要素のリストの項目は、DT要素とDD要素がセットにならないといけないということです。

実際に書いてみよう

では今まで説明した三つのリストをエディタに書いてみましょう。 まずはお約束どおりh2要素で「リストの種類」と書いてください。 ではUL要素から書きましょう。UL要素を書く前に、h3の見出しで「普通のリスト」 と書いてください。

次にUL要素を書きます。LI要素の項目は、さっきは果物だったので、今回は「チーズ」 「バター」「クリーム」「ヨーグルト」の乳製品にしましょう（笑）。

ちなみに、今まで説明した要素とは違って、UL要素などのリストは、 P要素の中に書くことはできません。

UL要素が書けたらh3要素で「番号つきリスト」と書いて、OL要素のリストを書いてください 。各項目は「ホップ」、「ステップ」、「ジャンプ」とでも しておきましょう。

最後はh3で「用語解説のリスト」と見出しを書いて、その下にDL要素のリストを書きましょう。 DT要素に入れる用語はこのページにふさわしく（笑）、「ul」、「ol」、「dl」、 DD要素の解説はそれぞれ「普通のリスト」、「番号つきリスト」、 「用語解説のリスト」 とします。

これらをすべて書くと下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

中略

<h2>リストの種類</h2>

<h3>普通のリスト</h3>
<ul>
<li>チーズ</li>
<li>バター</li>
<li>クリーム</li>
<li>ヨーグルト</li>
</ul>

<h3>番号つきリスト</h3>
<ol>
<li>ホップ</li>
<li>ステップ</li>
<li>ジャンプ</li>
</ol>

<h3>用語解説のリスト</h3>
<dl>
<dt>ul</dt><dd>普通のリスト</dd>
<dt>ol</dt><dd>番号つきのリスト</dd>
<dt>dl</dt><dd>用語解説のリスト</dd>
</dl>

表示例

へてむるクリエイターの場合

右クリックして「タグの挿入」、「箇条書き」か、 タグパレットの「テーブル/箇条」から、三種類とも挿入することができます。 UL要素は「箇条書き」、OL要素は「箇条書き/番号付き」、 DL要素は「箇条書き/用語解説」です。

後で追加したいときのために、LI要素や、DTとDD要素だけを入れることもできます。もちろん UL要素やDL要素の外で使ってはいけません。

HOME