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

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>タグで囲んだものしか配置できないので注意が必要です。

olタグの意味と使い方

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

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

<ol>タグの中にも<li>タグで囲んだものしか配置できないので注意しましょう。

liタグの意味と使い方

liタグは「list item」の略で、olタグやulタグで囲まれたリストの中の1つ1つの項目を指します。

<li>タグ単体で使うことはなく、必ず<ul>タグや<ol>タグとセットで使わなければなりません。

箇条書きの入れ子

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

ulタグを使う場面

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

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

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

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

olタグを使う場面

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

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

箇条書きのデザインを変えてみる

基本的な意味や使い方がわかったところで、CSSを使った簡単なデザインの変え方をご紹介します。

ulタグのデザインを変える

箇条書きの先頭につくマークをCSSで簡単に変えることができます。以下の「値」の部分を好きなデザインのものに変えましょう。

olタグのデザインを変える

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

箇条書きのリストマークを消す

リストマークを消したいという時は、値を「none」にすれば何も表示されなくなります。

まとめ

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

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

をご紹介しました。

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

ul・ol・liタグの使い方や意味、デザインの変え方についてお悩みの方は、ぜひ参考にしてみてください。