【HTML】リストを使いこなそう！箇条書きリスト（ul）、番号リスト（ol）、定義リスト（dl）の作り方

コーディング作業をしていて、サイト内にリストを作成したいという場合はよくありますよね？

リストとはいっても、種類は様々で、カスタマイズ性も高いです。

今回は、HTMLでリストを作成する方法とカスタマイズ（装飾）する方法をご紹介します。

お助け猫

今回の記事は、次のような方にお勧め！
・リストの作り方を徹底的に知りたい方

・リストにはどんな種類があるのか知りたい方
・リストを装飾したい方

色々なリストの作り方

冒頭でも軽く触れていますが、リストには様々な種類があります。

これらのリストは、それぞれ使うHTMLタグが異なります。それでは、順番に見ていきましょう。

箇条書きリスト

箇条書きリストとは、下記のようなごく普通のリストです。

• りんご
• お肉
• お魚

HTMLでの書式は、次のようになります。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>

箇条書きリストを作成する場合は、ulタグとliタグがセットで使われます。ulタグで、各項目のliタグを囲むような書式となります。liタグは、何個でも追加する事が出来ます。

ulタグは、li以外を子要素にすることはできず、他のタグを使う事ができない点に注意です。

箇条書きリストは、デフォルトでリスト項目の先頭に「・」がつきます。

番号付きリスト

番号付きリストとは、下記のような順序があるものを表現したい時に使うリストです。

1. 〇〇駅東口を出て右折
2. そのまま直進
3. 到着

道案内とか、料理のレシピを紹介する際によく使われます。

番号付きリストを、HTMLで表現したい時は、次のようになります。

<ol>
  <li>〇〇駅東口を出て右折</li>
  <li>そのまま直進</li>
  <li>到着</li>
</ol>

番号付きリストを作成する場合は、olタグとliタグがセットで使われます。olタグで、各項目のliタグを囲むような書式となります。liタグは、何個でも追加する事が出来ます。

olタグは、li以外を子要素にすることはできず、他のタグを使う事ができない点に注意です。ulタグとほぼ同じですね。

定義リスト

定義リストとは、下記のような見出し語とセットにする時に使うリストです。

■HTML

ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の事。

■CSS

カスケーディング・スタイル・シート(Cascading Style Sheets)の事。

キーワードと説明を組み合わせて箇条書きにしたい時に使います。

定義リストを、HTMLで表現したい時は、次のようになります。

<dl>
  <dt>【HTML】</dt>
  <dd>ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の事。</dd>
  <dt>【CSS】</dt>
  <dd>カスケーディング・スタイル・シート（Cascading Style Sheets）の事。</dd>
</dl>

定義リストを作成する場合は、dlタグとdtタグとddタグの3セットで使われます。dtタグでキーワードを、ddタグで説明を書いたら、dlタグで囲むという形です。dl、ddタグは何度でも追加する事が出来ます。

CSSを適用しない限り、ddタグの部分が字下げ（インデント）して表示されます。

リスト装飾のテクニックのご紹介

お悩みさん

リストのデフォルトのデザインなんかしっくり来ないな・・。装飾する為のテクニックを知っておきたいな。

そんな方の為に、覚えておくと良い、リストの装飾テクニックをいくつかご紹介します。

では、順番に解説していきます。

箇条書きリストの先頭につくマークの変更

箇条書きリスト（ul）の先頭につくマーク（・）を変更したい場合は、ulタグに対して、CSSでlist-styleプロパティを適用させます。ist-styleプロパティとは、箇条書きの各項目の先頭に表示されるマークを変更する際に使用されるプロパティです。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>

ul {
  list-style: none;
}

上記の例は、デフォルトでつく「・」のマークを無くしたい場合に適用させる場合の書き方です。list-styleプロパティの値を変更する事で、形を変更する事が出来ます。

色々な種類がありますので、それぞれお試しいただければと思います。

箇条書きリストのマークを画像に変更

リストのマークを画像にする事も可能です。こちらも、先ほど同様、list-styleプロパティを使用しますが、書き方が少し特殊です。

<ul>
  <li>りんご</li>
  <li>お肉</li>
  <li>お魚</li>
</ul>

ul {
  list-style: url(パスが入ります);
}

urlの括弧の中に表示させたい画像のパスを書く形式となります。指定するパスは、相対パスでも絶対パスでも問題ありません。

番号付きリストのナンバリングの変更

番号付きリスト（ol）では、デフォルトでは、「1」から順番に表示されますが、これをアルファベットなどに変更したい場合の指定方法です。こちらでも、list-styleプロパティを使用します。

<ol>
  <li>〇〇駅東口を出て右折</li>
  <li>そのまま直進</li>
  <li>到着</li>
</ol>

ol {
  list-style: lower-alpha;
}

上記の例は、番号の部分を英語に変更した場合の指定方法です。サンプルで使用している「lower-alpha」以外にも、色々値が存在します。

こちらも、色々な値がありますので、しっくりくるものをお選びいただければと思います。

定義リストのレイアウトの変更

定義リスト（dl）は、デフォルトでddタグの部分が字下げ（インデント）して表示されますが、CSSで調整可能です。

<dl>
  <dt>【HTML】</dt>
  <dd>ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の事。</dd>
  <dt>【CSS】</dt>
  <dd>カスケーディング・スタイル・シート(Cascading Style Sheets)の事。</dd>
</dl>

dl{
  overflow: hidden;
}
dt{
  float: left;
}
dd{
  margin: 0 0 1em 0;
}

overflowプロパティでフロートを解除し、floatプロパティで左フロートを適用、marginプロパティで下の余白を調整しています。

この指定をする事で、キーワード（dt）と説明（dd）を横に並べる事が可能です。

まとめ

リストは、コーディングでよく出てきますが、カスタマイズ性が高い事をご理解いただけましたでしょうか？

色々な装飾テクニックを知っていれば、WEB制作の幅も広がると思いますので、是非覚えていただければと思います。