【 HTML入門 】ul・ol・liタグで番号ありorなしのリストを作ろう

この記事では箇条書き（リスト）を作る上で欠かせない、HTMLのul・ol・liタグについて解説します。

これらの要素を使いこなすことで、WEBサイトやブログが圧倒的に見やすくなります。

ul・ol・liタグとは？

liタグを、ulまたはolタグで挟むことで、箇条書き（リスト）を作ります。

ulとolの違いは番号付の箇条書きになるかどうかで、ulの場合は番号がないリスト（順不同リスト）になりますが、olの場合は番号つきのリスト（順序付きリスト）になります。

ulタグ

番号がないリスト（順不同リスト）を表示します。

以下のように、項目を列挙したい時に使います。リストの項目として、li要素を最低1つは配置しなければいけません。

HTML

<ul>
  <li>パラオ</li>
  <li>モルディブ</li>
  <li>沖縄</li>
</ul>

関連するCSSプロパティ

ul要素と一緒によく使われるCSSプロパティがあります。

指定することで、リストの見た目を変えてくれます。

list-style-type

li要素のマーカーに関する指定をします。

list-style-typeに指定できる値は以下の通りです。

CSS

ul{
  list-style-type: circle;
}

list-style-position

リストの先頭に表示するマーカーの表示位置を指定します。

list-style-positionに指定できる値は以下の通りです。

CSS

ul{
  list-style-position: outside;
}

olタグ

番号がついているリスト（順序付きリスト）を表示します。

番号つきで項目を列挙したい時に使います。リストの項目として、li要素を最低1つは配置しなければいけません。

HTML

<ol>
  <li>石垣島</li>
  <li>宮古島</li>
  <li>竹富島</li>
</ol>

関連するCSSプロパティ

ol要素と一緒によく使われるCSSプロパティがあります。

指定することで、リストの見た目を変えてくれます。

list-style-type

リストの先頭に表示するマーカーに関する指定をします。

list-style-typeに指定できる値は以下の通りです。

CSS

ol{
  list-style-type: upper-alpha;
}

list-style-position

リストの先頭に表示するマーカーの表示位置を指定します。

list-style-positionに指定できる値は以下の通りです。

CSS

ol{
  list-style-position: outside;
}

入れ子にする方法

リストの中にリストを入れることができます。

例えばul要素の中のli要素にol要素を入れると以下のように表示されます。

HTML

<ul>
  <li>パラオ</li>
  <li>モルディブ</li>
  <li>沖縄
    <ol>
      <li>石垣島</li>
      <li>宮古島</li>
      <li>竹富島</li>
    </ol>
  </li>
</ul>

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の2点です。

HTML関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。