HTMLで箇条書きする方法！ul・ol・liタグの意味と使い方を解説　byウェブカツ

HTMLで箇条書きをしたい時は、**ul・ol・li**の3つのタグを使って表現する。

ただし、**「3つもタグがあるけど具体的にどう使い分けるの？」**と思った人も多いのではないだろうか。

そこで今回はul・ol・liタグについて、

- ul、ol、liタグの意味と使い方
- ul、olタグがよく使われる場面
- 箇条書きのデザインの変え方

を紹介する。

- ul、ol、liタグの使い分けを知りたい
- 箇条書きのデザインの変え方を知りたい

という人は、ぜひ参考にしてほしい。

HTMLでul・ol・liを使って箇条書きする
-----------------------
HTMLで箇条書きしたい時に、ul・ol・liタグを使って表現する。

ただし、実際に使うときは別々に使うのではなく

- 「ul」「li」のセット
- 「ol」「li」のセット

のどちらかのパターンになる。まずは**「ul・li」「ol・li」はそれぞれワンセットで使う**ということを覚えておこう。

ol・ul・liタグの違い
-------------
それでは、具体的にol・ul・liはそれぞれ何が違うのかを紹介する。

### ulタグの意味と使い方
ulタグとは**「Unordered List」**の略で、**順不同リスト**という意味。順番の関係ない箇条書きのリストなどに使われる。

以下のように**大枠をulタグ**で囲み、中の**1つ1つのリストをliタグ**で囲むという使い方をする。

```html:html
<ul>
<li>1つ目のリスト</li>
<li>2つ目のリスト</li>
<li>3つ目のリスト</li>
</ul>
```
また、ulタグの中には**liタグで囲んだものしか配置できない**ので注意が必要。

### olタグの意味と使い方
olタグとは**「Ordered List」**の略で、**番号順のリスト**を表す。料理の手順のように、順番に読んで欲しい項目やメニューに使用する。

使い方はulと同じで、**大枠をolタグ**で囲んだ後に中の**1つ1つのリストをliタグ**で囲む。

```html:html
<ol>
<li>卵を割る</li>
<li>卵を混ぜる</li>
<li>フライパンで焼く</li>
</ol>
```
olタグの中にも**liタグで囲んだものしか配置できない**ので注意。

### liタグの意味と使い方
liタグは**「list item」**の略で、olタグやulタグで囲まれた**リストの中の1つ1つの項目**を指す。

liタグ単体で使うことはなく、必ずulタグやolタグとセットで使わなければならない。

```html:html
<ul>
<li>1つ目のリスト</li>
<li>2つ目のリスト</li>
<li>3つ目のリスト</li>
</ul>
```

### 箇条書きの入れ子
「箇条書きの中にさらに箇条書きを入れる」というように入れ子にすることもできる。その場合、以下のように**liタグの中に入れ子にした箇条書きのタグ**を入れる。

```html:html
<ul>
<li>HTML</li>
<li>CSS
<ol>
<li>flex</li>
<li>float</li>
</ol>
</li>
<li>JavaScript</li>
</ul>
```

ulタグを使う場面
---------
ulタグは、順番の関係ない箇条書きのリストに使うのはもちろん、**ナビゲーションメニュー**や**画像のスライドショー**などにも使われる。

パッと見は箇条書きのように見えないが、1つ1つの写真をliタグで囲ったり、CSSを使ってリストが横並びになるようにしたり、リストマークを削除したりして見た目を整えている。

正しくulタグを使用すると、検索エンジンに箇条書きであることが伝えられ、Webページ自体の評価も上がる。

ulタグを使って表現できそうな箇所ではどんどん使ってみよう。

**ulタグを使う場面**

- 箇条書き
- ナビゲーションメニュー
- スライドショー

olタグを使う場面
---------
olタグは、たとえば**料理の作り方の手順**のように、箇条書きの順番に沿って内容を伝えたい時に使う。そのため、ulタグよりは使う頻度が少ない。

順番が意味を持つリストで正しくolタグを使えば、検索エンジンにも「これは何かの手順なんだな」と理解してもらうことができる。

**olタグを使う場面**

- 料理の作り方の手順
- 何かの手順など順番が意味を持つリスト

箇条書きのデザインを変えてみる
---------------
基本的な意味や使い方がわかったところで、CSSを使った簡単なデザインの変え方を紹介する。

### ulタグのデザインを変える
箇条書きの先頭につくマークをCSSで簡単に変えることができる。以下の「値」の部分を好きなデザインのものに変えてみよう。

```css:css
li{
list-style-type: 値;
}
```

値      | 説明  | 見た目
------ | --- | ---
disc   | 黒丸  | ●  
circle | 白丸  | ◯  
square | 黒四角 | ◼️ 

### olタグのデザインを変える
数字の他にアルファベット・ひらがな・カタカナなどがある。ul同様に、「値」の部分を好きなデザインのものに変えよう。

```css:css
li{
list-style-type: 値;
}
```

値                    | 説明           | 見た目       
-------------------- | ------------ | ----------
decimal              | 数字           | 1, 2, 3   
decimal-leading-zero | 0から始まる数字     | 01, 02, 03
lower-roman          | ローマ字（小文字）    | ⅰ, ⅱ, ⅲ   
upper-roman          | ローマ字（大文字）    | Ⅰ, Ⅱ, Ⅲ   
cjk-ideographic      | 漢数字          | 一, 二, 三   
lower-latin          | アルファベット（小文字） | a, b, c   
upper-latin          | アルファベット（大文字） | A, B, C   
hiragana             | ひらがな         | あ, い, う   
hiragana-iroha       | ひらがな（いろは）    | い, ろ, は   
katakana             | カタカナ         | ア, イ, ウ   
katakana-iroha       | カタカナ（いろは）    | イ, ロ, ハ   
lower-greek          | ギリシャ文字（小文字）  | α, β, γ   

### 箇条書きのリストマークを消す
リストマークを消したいという時は、値を**「none」**にすれば何も表示されなくなる。

```css:css
li{
list-style-type: none;
}
```

まとめ
---
以上、HTMLで箇条書きをする時に使うul・ol・liタグについて

- ul、ol、liタグの持つ意味と使い方
- ul、olタグが実際によく使われている場面
- 簡単な箇条書きのデザインの変え方

を紹介した。

箇条書きは、わかりやすい文章を書くために必須なテクニックである。箇条書きをうまく使えば、よりわかりやすいWebページになるはず。

ul・ol・liタグの使い方や意味、デザインの変え方について悩んでいる人は、ぜひ参考にしてほしい。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/)