ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】箇条書き（ul, ol, li）に使えるタグについて解説

【HTML】箇条書き（ul, ol, li）に使えるタグについて解説

HTML/CSS

2022/08/23

2023/06/02

HTMLには見出しタグや段落タグなどさまざまなタグがあります。箇条書きをするときに使うタグはulタグ、olタグ、liタグの3つです。3つのタグにはそれぞれ役割があります。

この記事では、「HTMLの箇条書きに使えるタグ」について解説していきます。

この記事のゴールは「箇条書きで使えるタグの役割について理解し、適切に使い分けること」です。

いっしょに学習していきましょう。

この記事で身につく内容

HTMLの箇条書きで使うタグの基礎知識

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

箇条書きで使うulタグ：順序のないリストを表示する
箇条書きで使うolタグ：順序のあるリストを表示する
箇条書きに使うliタグ：リストの項目に使う
- チェックマークの箇条書きリストを作ってみよう
まとめ

箇条書きで使うulタグ：順序のないリストを表示する

箇条書きで使えるタグは、ulタグ、olタグ、liタグ、の3つです。ulタグは順序のないリストを表示する際に使用します。ulはUnordered Listの略です。

基本書式

<ul>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ul>

基本書式をそのままブラウザで表示すると次のようになります。

出力結果

ulタグは順序のないリストを表示するタグのため、ナンバリングがされません。ulタグで囲まれたliタグの先頭には「・」が付与されます。デフォルト表示では「・」が表示されますが、この記号はCSSのlist-styleプロパティで変更することができます。

例えば「・」の黒い丸点を、黒い四角の点に変更する場合は、次のように指定できます。

ul {
  list-style: square;
}

出力結果

list-styleプロパティはさまざまな値があり、リスト表示の文頭の部分を変更することができます。ただし、例えばチェックマークのような見た目を表示させる場合は、list-style: none; を適用して「・」を非表示にし、疑似要素などでスタイルをつくる必要があります。

ulタグは順序のないリストを表示するタグですが、list-styleプロパティで順序を付けることができます。

ul {
  list-style: decimal;
}

出力結果

箇条書きで使うolタグ：順序のあるリストを表示する

ollタグは順序のある番号付きのリストを表示する際に使用します。olはOrdered Listの略です。

基本書式

<ol>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ol>

基本書式でブラウザの表示を確認します。

出力結果

ulタグと違い、olタグはデフォルトでナンバリングされます。ulタグのときと同様に、list-styleで要素の頭の表示を変えることができます。

以下は要素の頭を「・」に変更したスタイルです。

ol {
  list-style: disc;
}

出力結果

箇条書きに使うliタグ：リストの項目に使う

liタグはLlist Iitemの略で、リストの項目に使うタグです。ulタグ、olタグの中で使用することができます。

liタグはulタグ、olタグに囲まれた状態で使用するため、liタグ単体で使用することはありません。

liタグはブロック要素です。liタグを横並びにする場合は、liタグにdisplay: inline; を指定するか、ulタグ（olタグ）にdisplay: flex; を適用します。

<ul>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ul>

<ol>
  <li>要素</li>
  <li>要素</li>
  <li>要素</li>
</ol>

ul {
  display: flex;
  list-style: none;
}

ol li {
  display: inline;
}

出力結果

チェックマークの箇条書きリストを作ってみよう

箇条書きのタグを使って、チェックマーク付きの箇条書きリストを作成してみましょう。

コードは次のようになります。

<ul>
  <li>短い文章の項目</li>
  <li>長い文章の項目長い文章の項目長い文章の項目長い文章の項目</li>
  <li>短い文章の項目</li>
</ul>

ul {
  width: 200px;
  list-style: none;
}


ul li {
  position: relative;
}

ul li:not(:first-child) {
  margin-top: 10px;
}

ul li:before {
  display: block;
  position: absolute;
  top: 6px;
  left: -18px;
  width: 10px;
  height: 5px;
  transform: rotate(-45deg);
  border-bottom: 1px solid red;
  border-left: 2px solid red;
  content: "";
}

出力結果

See the Pen チェックマーク by ZeroPlus (@zeroplus-programming) on CodePen.

ulタグにlist-style: none; を適用して、デフォルトで表示される「・」を非表示にします。

チェックマークは疑似要素で作成するので、liタグにposition: relative;を指定してください。

下記のスタイルで、最初のli要素「以外」の要素にmargin-topで余白を設けています。

ul li:not(:first-child) {
  margin-top: 10px;
}

チェックマークは下記の部分で、疑似要素で作成しています。

ul li:before {
  display: block;
  position: absolute;
  top: 6px;
  left: -18px;
  width: 10px;
  height: 5px;
  transform: rotate(-45deg);
  border-bottom: 1px solid red;
  border-left: 2px solid red;
  content: "";
}

position: absolute; でチェックマークの位置を指定。border-left, border-bottomでチェックマークを表現し、それをtransform: rotate(-45deg); で回転させます。