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タグで囲むという使い方をする。
<ul>
<li>1つ目のリスト</li>
<li>2つ目のリスト</li>
<li>3つ目のリスト</li>
</ul>
また、ulタグの中にはliタグで囲んだものしか配置できないので注意が必要。
olタグの意味と使い方
olタグとは**「Ordered List」**の略で、番号順のリストを表す。料理の手順のように、順番に読んで欲しい項目やメニューに使用する。
使い方はulと同じで、大枠をolタグで囲んだ後に中の1つ1つのリストをliタグで囲む。
<ol>
<li>卵を割る</li>
<li>卵を混ぜる</li>
<li>フライパンで焼く</li>
</ol>
olタグの中にもliタグで囲んだものしか配置できないので注意。
liタグの意味と使い方
liタグは**「list item」の略で、olタグやulタグで囲まれたリストの中の1つ1つの項目**を指す。
liタグ単体で使うことはなく、必ずulタグやolタグとセットで使わなければならない。
<ul>
<li>1つ目のリスト</li>
<li>2つ目のリスト</li>
<li>3つ目のリスト</li>
</ul>
箇条書きの入れ子
「箇条書きの中にさらに箇条書きを入れる」というように入れ子にすることもできる。その場合、以下のようにliタグの中に入れ子にした箇条書きのタグを入れる。
<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で簡単に変えることができる。以下の「値」の部分を好きなデザインのものに変えてみよう。
li{
list-style-type: 値;
}
| 値 | 説明 | 見た目 |
|---|---|---|
| disc | 黒丸 | ● |
| circle | 白丸 | ◯ |
| square | 黒四角 | ◼️ |
olタグのデザインを変える
数字の他にアルファベット・ひらがな・カタカナなどがある。ul同様に、「値」の部分を好きなデザインのものに変えよう。
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」**にすれば何も表示されなくなる。
li{
list-style-type: none;
}
まとめ
以上、HTMLで箇条書きをする時に使うul・ol・liタグについて
- ul、ol、liタグの持つ意味と使い方
- ul、olタグが実際によく使われている場面
- 簡単な箇条書きのデザインの変え方
を紹介した。
箇条書きは、わかりやすい文章を書くために必須なテクニックである。箇条書きをうまく使えば、よりわかりやすいWebページになるはず。
ul・ol・liタグの使い方や意味、デザインの変え方について悩んでいる人は、ぜひ参考にしてほしい。
かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。
【ウェブカツ公式WEBサイト】
https://webukatu.com/