【HTMLで箇条書き】ul・ol・liタグの使い方まとめ

1. HTMLタグ「ul」「ol」「li」での箇条書きの作り方

HTMLではul、ol、liの3つのタグを使って箇条書き（リスト）を作ることができます。まずはこれらのタグの基本的な使い方を解説していきます。

1-1. 「ulとli」または「olとli」のセットで使う

基本的にul&liのセット、またはol&liのセットで使います。

こちらの図はulとliを使うときの書き方です。箇条書きの1つ1つの文はliタグではさみます。複数のliタグの前後はulタグではさみます。

liタグは何回使ってもOKです。箇条書きの項目数分だけ増やしましょう。これを実際にHTMLコードを書いてブラウザで表示してみます。

ulとliの箇条書き

<ul>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ul>

このようにulとliを使うと、各項目の先頭が黒ポチの箇条書きとなります（この黒ポチのデザインは変えることができます）。

olとliの箇条書き

ulのかわりにolを使うと以下のように番号付の箇条書きになります。

<ol>
  <li>1つめの項目</li>
  <li>2つめの項目</li>
  <li>3つめの項目</li>
</ol>

各項目の左側に1、2、3と番号の入った箇条書きが出来上がりました。

1-2. ulとolの違いは？

つまりこの２つの違いは以下のようになります。

どちらもHTMLとCSSでの取り扱い方法はほとんど変わりません。そのためセットで使い方をおさえてしまうのが得策です。

ちなみにulはUnordered List（順序のない箇条書き）の略、olはOredered List（順序ありの箇条書き）の略です。

2. 箇条書きの装飾を変える

このまま箇条書きを使っても良いのですが、少し味気ないですよね。ここからは箇条書きの見た目を変える方法を紹介します。ulでもolでもCSSの書き方は変わりません。

2-1.ボックスのまわりを線で囲う

まずは箇条書きのボックスを線で囲ってみましょう。線で囲うにはulもしくはolに対してborderプロパティを指定します。例として、2pxの水色の破線で囲ってみましょう。

<ol>
  <li>HTMLとCSSを勉強しよう</li>
  <li>HTMLとCSSの基本</li>
  <li>WEBデザインを学ぼう</li>
</ol>

ol {
  /*2px 水色 破線を指定*/
  border: 2px skyblue dashed; 
}

箇条書きが水色の点線で囲まれました。

2-2.背景色を変える

今度は箇条書きボックスの背景色を変えてみましょう。背景色を変えるにはulもしくはolに対してbackgroundプロパティで色を指定します。例としてうすい水色（カラーコード#f3fbff）を指定します。

<ol>
  <li>HTMLとCSSを勉強しよう</li>
  <li>HTMLとCSSの基本</li>
  <li>WEBデザインを学ぼう</li>
</ol>

ol {
  background: #f3fbff;
  border: 2px skyblue dashed;
}

箇条書きの背景色が変わり、なんとなくかわいい雰囲気になりました。

2-3.箇条書きの文字色を変える

文字色を変えるときにはcolorプロパティをliタグに対して指定します。ちなみにliタグのCSSを指定するときは基本的にul li {〜}というような書き方をします。これは「ulタグの中のliタグ」という意味の指定ですね。

<ol>
  <li>HTMLとCSSを勉強しよう</li>
  <li>HTMLとCSSの基本</li>
  <li>WEBデザインを学ぼう</li>
</ol>

ol {
  background: #f3fbff;
  border: 2px skyblue dashed;
}
ol li {
  /*olの中のliの文字色を変える*/
  color: #43acff;
}

文字色が変わりさらにポップな雰囲気がでました。

2-4. もっとオシャレな箇条書きにしたければ…

こちらの記事でオシャレな箇条書きのデザイン例を紹介しています。CSSコードをコピペしてそのまま使えるので、是非ご参考にしてみてください。

コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

↓ この記事で紹介しているデザイン一覧

5. liタグの中で改行する方法

箇条書き文の中でenterキーを押しても改行されません。もし1つの箇条書きの中で改行したい場合は、以下の方法を取りましょう。

方法1. brタグを使う

<br>は改行用のタグですね。以下の例のようにタグを挿入した部分で文が改行されます。

<ul>
  <li>brタグを<br>使うことにより<br>改行できます。</li>
  <li>使いすぎに注意しましょう。</li>
</ul>

方法2. 文章内の一部をdisplay:blockにする

display: blockを指定した要素の前後には改行が入ります。これを活用することで文章中に改行を入れることができます。

<ul>
  <li>displayを<span class="new_line">blockにして</span>改行できます。</li>
  <li>使いすぎに注意しましょう。</li>
</ul>

.new_line {
  display: block;
}

↑文章の一部をspanタグで囲みdisplay: blockを指定しました。この前後に改行が入るわけですね。ちなみにCSSのdisplayの使い方はこちらの記事で解説しています。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

6. 複数のul、olを入れ子にする方法

箇条書きの中にさらに別の箇条書きを入れる（＝入れ子にする）こともできます。階層構造を作ることができるわけですね。

ulの箇条書きの中に別のulをいれることもできますし、ulの中にolを入れることもできます。実際にコードを見てみるのが分かりやすいですね。

<ul>
 　<li>アプリ</li>
  <li>WEBデザイン
  <ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  </ol>
  </li>
 　<li>イラスト</li>
</ul>

このようにliタグの中に別のolやulの箇条書きを入れることで入れ子にすることができます。<li>文<ol>別の箇条書き〜</ol></li>というような書き方をするわけですね。

最後に

この記事のポイントをまとめておきます。