リストを使う

ここの目次にも使っているリストの使い方を説明します。リストには順不同リスト・順序付きリスト・定義リストの3種類があります。

目次

• 順不同リスト
• 順序付きリスト
• 定義リスト

順不同リスト

ときどき、論文のように文章だけが延々と続くページに出会うことがあります。あれってとっても読みにくいですよね。そこでリストを活用して読みやすい文章にしましょう。

普通の箇条書きリストをつくるにはli要素とul要素を使います。ul要素はブロックレベル要素です。それぞれの項目が<li>〜<li>、リスト全体が<ul>〜<ul>です。(ulはUnordered List(順序のないリスト)、liはList Item(リストの項目)を意味しています。)

<ul>
  <li>Windows 95</li>
  <li>Windows 98</li>
  <li>Windows 2000</li>
  <li>Windows XP</li>
</ul>

順序付きリスト

1. 2. 3. …とリストの頭に番号を振りたい場合は、さっきのul要素をol要素に変えるだけです。ol要素も同じくブロックレベル要素です。(olはOrdered List(順序のあるリスト)です)

<ol>
  <li>パソコン本体の電源を入れる</li>
  <li>Windowsが起動するのを待つ</li>
  <li>ログイン画面でユーザー名とパスワードを入力</li>
  <li>デスクトップが表示される</li>
</ol>

<ul>
  世界三大珍味
  <li>キャビア</li>
  <li>フォアグラ</li>
  <li>トリュフ</li>
</ul>

定義リスト

順不同リスト、順序付きリストのほかに定義リストというリストもあります。これは定義、つまり言葉の意味を示すときに使います。

定義リストはdl要素、dt要素、dd要素という三つの要素をセットで使います。dl要素はブロックレベル要素です。次のように使います。

<dl>
  <dt>用語</dt>
    <dd>説明</dd>
  <dt>用語</dt>
    <dd>説明1</dd>
    <dd>説明2</dd>
</dl>

<dt>〜</dt>が説明される言葉、<dd>〜</dd>が説明です。そして全体を<dl>〜</dl>で囲みます。dd要素やdt要素は複数あってもOKです。(dtはDefinition Term(定義する用語)、ddはDefinition Description(定義の説明)、dlはDefinition List(定義リスト)の略です。)

<dl>
  <dt>マウス</dt>
    <dd>画面上の矢印(ポインタ)を動かすための機器</dd>
  <dt>キーボード</dt>
    <dd>コンピュータにアルファベットや数字を入力するための装置</dd>
    <dd>ピアノやオルガンの鍵盤</dd>
</dl>

「定義リスト」って何か難しそうな名前だし、あまり使い道がなさそうな気がしますよね。でもそんなことはありません。これでページのメニューやリンク集をつくることができます。

<dt>〜</dt>の言葉にa要素でリンクを張って、ページのメニューをつくってみましょう。

<dl>
  <dt><a href="profile.html">自己紹介</a></dt>
    <dd>作者について</dd>
  <dt><a href="works.html">作品</a></dt>
    <dd>いろんなイラスト</dd>
  <dt><a href="link.html">リンク</a></dt>
    <dd>関連サイトへのリンク</dd>
</dl>

名前は「定義リスト」でも使い方は自由なわけです。

<p>
世界三大珍味とは
<ul>
  <li>キャビア</li>
  <li>フォアグラ</li>
  <li>トリュフ</li>
</ul>
のことです。
</p>

<p>
  世界三大珍味とは
</p>
<ul>
  <li>キャビア</li>
  <li>フォアグラ</li>
  <li>トリュフ</li>
</ul>
<p>
  のことです。
</p>

まとめ

• <ul><li>項目</li><li>項目</li></ul>で順不同リストになる
• <ol><li>項目</li><li>項目</li></ol>で順序付きリストになる
• <dl><dt>用語</dt><dd>説明</dd></dl>で定義リストになる
• リストは段落(<p>〜</p>)の外で使う

とても簡単でした。次回は表をつくります。

Information