ul・ol・liタグで箇条書きを作る方法まとめ【HTML・CSS】

ul・ol・liで箇条書きを作る方法まとめ

今回はHTMLでul、ol、liタグにより箇条書きリストを作る方法をイチから解説します。これらのタグをうまく活用すれば、より見やすいWEBサイトやブログになるはずです。

1. ul、ol、liタグの使い方

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

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

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

箇条書きにはul(ol)とliを使う

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

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

ulとliのリスト

HTMLコード
<ul>
	<li>1つめの項目</li>
	<li>2つめの項目</li>
	<li>3つめの項目</li>
</ul>
ブラウザ表示
  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

このようにulliを使うと、各項目の先頭が黒ポチのリストとなります(この黒ポチのデザインは変えることができます)。

olとliのリスト

ulのかわりにolを使うと以下のように番号付のリストになります。

HTMLコード
<ol>
	<li>1つめの項目</li>
	<li>2つめの項目</li>
	<li>3つめの項目</li>
</ol>
ブラウザ表示
  1. 1つめの項目
  2. 2つめの項目
  3. 3つめの項目

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

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

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

  • ul:黒ポチの箇条書き
  • ol:番号付きの箇条書き

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

サルワカくんの顔(通常)
サルワカくん

ちなみにulUnordered List(順序のないリスト)の略、olOredered List(順序ありのリスト)の略です。

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

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

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

ul, ol {border :~}

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

HTMLコード
<ol>
	<li>HTMLとCSSを勉強しよう</li>
	<li>HTMLとCSSの基本</li>
	<li>WEBデザインを学ぼう</li>
</ol>
CSSコード
ol {
	border: 2px skyblue dashed; 
	/*2px 水色 破線を指定*/
	}
ブラウザ表示

破線で箇条書きボックスを囲む

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

2-2.背景色を変える

ul, ol {background :~}

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

HTMLコード
<ol>
	<li>HTMLとCSSを勉強しよう</li>
	<li>HTMLとCSSの基本</li>
	<li>WEBデザインを学ぼう</li>
</ol>
CSSコード
ol {
	background: #f3fbff;
	border: 2px skyblue dashed;
	}
ブラウザ表示

リストの背景色を変える

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

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

ul li, ol li {color :~}

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

HTMLコード
<ol>
	<li>HTMLとCSSを勉強しよう</li>
	<li>HTMLとCSSの基本</li>
	<li>WEBデザインを学ぼう</li>
</ol>
CSSコード
ol {
	background: #f3fbff;
	border: 2px skyblue dashed;
	}

ol li {color: #43acff;
	/*olの中のliの文字色を変える*/
}
ブラウザ表示

リストの文字色を変える例

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

2-4. もっとオシャレなリストにしたければ…

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

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

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

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

方法1. brタグを使う

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

HTMLコード
<ul>
	<li>brタグを<br>使うことにより<br>改行できます。</li>
	<li>使いすぎに注意しましょう。</li>
</ul>
ブラウザ表示
  • brタグを
    使うことにより
    改行できます。
  • 使いすぎに注意しましょう。

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

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

HTML
<ul>
	<li>displayを<span class="new_line">blockにして</span>改行できます。</li>
	<li>使いすぎに注意しましょう。</li>
</ul>
CSS
.new_line{
	display: block;
}
ブラウザ表示

  • displayをブロックにして改行できます。
  • 使いすぎに注意しましょう。

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

6.入れ子にする方法

サルワカ 🔊 4

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

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

HTMLコード
<ul>
  <li>アプリ</li>
  <li>WEBデザイン
	  <ol>
	    <li>HTML</li>
	    <li>CSS</li>
	    <li>Javascript</li>
	  </ol>
  </li>
  <li>イラスト</li>
</ul>
ブラウザ表示

ブラウザ表示例

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

箇条書きの入れ子例

ちなみにこの記事の目次もolulの箇条書きの入れ子で作られています。

最後に

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

まとめ
  • ulとliで黒ポチの箇条書きに
  • olとliで番号付きの箇条書きに
  • CSSでのデザインや余白の指定方法は基本的にどちらも同じ
  • ul, ol {border: ~}で枠をつける
  • ul, ol {background: ~}で背景色を変える
  • ul, ol {color: ~}で文字色を変える
  • list-style-typeで黒ポチや番号の表示を変える
  • paddingで箇条書きの隙間を指定する
  • brdisplay:blockで文章内で改行する
  • 箇条書きは入れ子にもできる
サルワカ