ul・ol・liで箇条書きを作る方法｜初心者向けにわかりやすく解説

Webページで「箇条書き」を作るために使うのが、ul・ol・li の3つのタグです。

ブログの記事構造や説明文で非常に多く使うタグですが、初心者のうちは「どれを使うのが正解か？」と迷いがちです。

この記事では、ul / ol / li の意味と使い分け、基本構造、実用例、注意点 を初心者向けにわかりやすく説明します。

ul・ol・li とは？

リスト（箇条書き）を作るためのタグ。

<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

順番に意味のない箇条書き を作るときに使います。

<ul>
  <li>特徴1</li>
  <li>特徴2</li>
  <li>特徴3</li>
</ul>

Webサイトで最もよく使うリスト形式です。

作業手順など、順番が意味を持つ ときに使用します。

<ol>
  <li>メールアドレスを入力</li>
  <li>パスワードを入力</li>
  <li>登録ボタンを押す</li>
</ol>

番号は自動で振られるため、手作業で数字を書く必要はありません。

ul と ol の中にしか使えないタグ です。

<ul>
  <li>メリット1</li>
  <li>メリット2</li>
</ul>

li は「点」「番号」「矢印」のように見えますが、
これは CSSが自動で付けている“装飾” です。

状況	使うタグ
順番に意味がない	ul
手順・流れ・順位など、順番に意味がある	ol

判断基準は 「順番が必要か？」 だけです。

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

<ul>
  <li>準備するもの
    <ul>
      <li>スマホ</li>
      <li>充電器</li>
    </ul>
  </li>
</ul>

<ol>
  <li>商品を選ぶ
    <ul>
      <li>色を選択</li>
      <li>サイズを選択</li>
    </ul>
  </li>
</ol>

箇条書きは CSS を使うと簡単にデザインできます。

ul, ol {
  list-style: none;
  padding-left: 0;
}

ul li {
  padding-left: 20px;
  background: url(icon.png) no-repeat left center;
}

<li>項目</li>  ← NG

番号は HTML側で自動生成されます。

→ リストが複雑になり読みにくくなる
→ 解説文は li の外に書く方が読みやすい

箇条書きは Web記事の読みやすさに直結するため、HTML初心者は必ず覚えておきたい基本タグです。

ul・ol・li は、HTMLタグの中でも特に使用頻度が高い基本要素です。
正しく使えるようになるだけで、文章の読みやすさが一段と向上します。
まずは「順番の有無」で ul と ol を使い分けることから慣れていきましょう！

この記事が役に立ったら、いいね！お願いします！