リストの表示

ここではリストタグについて説明をします。箇条書きや手順などのリストを作るときに使用します。箇条書きにしたいときは、pタグなどでやらずにこのリストタグを使用してください。

リストタグの種類

箇条書きといっても・（なかぐろ）で表示するものや、数字で表示するものなど種類がありますよね？
同じように、htmlでも使用するリストの種類によって記述してほしいタグがあります。その種類について説明します。

箇条書きリスト

箇条書きには<ul>タグを用います。ここでいう箇条書きとは「●」「◆」「★」などの行頭文字が項目の頭についているもの です。実際の記述例を見てみましょう。

<ul>
  <li>リスト１<li>
  <li>リスト2<li>
  <li>リスト3<li>
</ul>

上記のようにulタグの子要素として、liタグを用います。ulタグ直下の子要素としてはliタグしか使えないので注してください。これを表示してみると、

このようになります。行頭文字はCSSで変更可能です。個々の要素が並列の関係の時はulタグを使用しましょう。

連番リスト

手順など順番が重要となるリストを作成するときに使用します。行頭文字が、1，2，3,…と数字になっているようなものです。その使い方を見ていきましょう。

<ol>
  <li>リスト１<li>
  <li>リスト2<li>
  <li>リスト3<li>
</ol>

箇条書きリストの時と同じように、olタグの子要素にはliタグを使用します。こちらも直下の子要素としてはliタグしか使用できないので注意してください。これを表示してみると、

このように表示されます。

定義リスト

項目と説明文をリスト化して表示したいときに使用するリストタグです。まずは使い方をご覧ください。

<dl>
  <dt>リスト1</dt>
  <dd>リスト1の説明分をここに記載してください。</dd>
  <dt>リスト2</dt>
  <dd>リスト2の説明分をここに記載してください。</dd>
  <dt>リスト3</dt>
  <dd>リスト4の説明分をここに記載してください。</dd>
</dl>

このようにdtタグで項目を、dlタグでその内容を記載します。先に述べた箇条書きや連番リストのように、dlタグの直下にはdtとdlのみをそれぞれ1つ以上記載しなければいけません。これが表示されると、

このようになります。また、1つのdtタグに対し2つのddタグを使用することも可能です。コードと表示は以下のようになります。

<dl>
  <dt>リスト1</dt>
  <dd>リスト1の説明分をここに記載してください。</dd>
  <dd>リスト1の二つ目説明分をここに記載してください。</dd>
  <dt>リスト2</dt>
  <dd>リスト2の説明分をここに記載してください。</dd>
</dl>