記事内に商品プロモーションが含まれる場合があります
今回はHTMLのul、ol、liタグにより箇条書きを作る方法をイチから解説します。順序を問わないリストにはul、手順や順位など順序が意味を持つリストにはolを使います。これらのタグをうまく活用すれば、より見やすいWEBサイトやブログになるはずです。
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の違いは？
つまりこの２つの違いは以下のようになります。
- ul：順序を問わない箇条書き。通常は黒ポチで表示
- ol：順序が意味を持つ箇条書き。通常は番号付きで表示
見た目のマーカーはCSSで変えられますが、ulとolは内容の意味に合わせて選びます。装飾や余白を指定するCSSは、どちらも同じように使えます。
2. 箇条書きの装飾を変える
このまま箇条書きを使っても良いのですが、少し味気ないですよね。ここからは箇条書きの見た目を変える方法を紹介します。ulでもolでもCSSの書き方は変わりません。
2-1.ボックスのまわりを線で囲う
ul, ol {
border: 2px dashed skyblue;
}まずは箇条書きのボックスを線で囲ってみましょう。線で囲うには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;
}今度は箇条書きボックスの背景色を変えてみましょう。背景色を変えるには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.箇条書きの文字色を変える
ul li, ol li {
color: #43acff;
}文字色を変えるときには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で箇条書きをおしゃれに↓ この記事で紹介しているデザイン一覧
3. 箇条書きのマーカー表示を変える
ulの黒ポチや、olの番号の表示のさせ方はlist-style-typeプロパティにより変えることができます。たとえばul {list-style-type: square}とすると以下のようにポチが四角くなります。
<ul>
<li>HTMLとCSSを勉強しよう</li>
<li>HTMLとCSSの基本</li>
<li>WEBデザインを学ぼう</li>
</ul>ul {
list-style-type: square;
}
また、ol{list-style-type: upper-latin}とすると1、2、3…という番号の表示をA、B、C…に変えることができます。
<ol>
<li>サルワカへようこそ</li>
<li>ありとあらゆることを</li>
<li>分かりやすく図解します</li>
</ol>ol {
list-style-type: upper-latin;
}
その他にも「あ、い、う、え、お…」とひらがなで表示させるなどlist-style-typeではたくさんのマーカー種類を選ぶことができます。こちらの記事でそれらの種類を詳しく解説しているので、気になる方は是非目を通してみてください。
【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変えるマーカーを消す方法
ulとolどちらもlist-style-type: noneを指定すると黒ポチや番号などのマーカーが非表示になります。Safariでも支援技術にリストとして伝わるよう、この例ではrole="list"を付けています。
<ol role="list">
<li>この箇条書きの</li>
<li>ポチを</li>
<li>消します</li>
</ol>ol {
list-style-type: none;
}
4.箇条書きまわりの余白を調整する
箇条書きの余白の調整方法は少し奥が深いので、別の記事でまとめました。適度な余白を作ることでグッと見やすさが向上するはずです。
【HTML&CSS】箇条書きの余白とインデントの調整方法5. liタグの中で改行する方法
通常のwhite-space: normalでは、HTMLソース内で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の使い方はこちらの記事で解説しています。
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>というような書き方をするわけですね。
ちなみにこの記事の目次もolとulの箇条書きの入れ子で作られています。
最後に
この記事のポイントをまとめておきます。