Webページ制作において活用頻度の高いタグの一つが、箇条書きやメニュー表示などに使うリストタグです。
HTMLのリストタグ（箇条書きタグ）の組み合わせは「ulとli」、「olとli」の2つだけですが、装飾の仕方やリストタグ内でのタグの使い方にはいくつかのルールがあり、これを知っておくことでWebページを格段に綺麗に分かりやすくすることができます。
ここではリストタグの種類(ul､li､ol)、書き方、正しい使い方や注意点について分かりやすく解説していきます。
Contents
リストタグ(箇条書きタグ)とは？
リストタグは、箇条書きや番号付きリストを作成するときに使用します。情報を箇条書きにすることで視覚的に分かりやすくする効果があり、ナビゲーションバーなどにもよく使われています。
箇条書きはul（unordered list）タグ、番号付きリストはol（ordered list）タグを使います。
ulタグ、olタグいずれにおいても、リストにする項目はliタグで囲みます（<li>〇〇</li>）。liは「list item」の略で、リストの項目を表示するために使用するタグです。
リストタグ（箇条書きタグ）の種類、書き方
リストタグ(箇条書きタグ)を使わなくてもbrタグで同じように改行することもできますが、リストタグは項目をリスト化（箇条書きに並べること）し、構造化することを目的としますが、brタグは単に文章を改行することを目的とします。
検索エンジンに伝える内容も異なり、リストタグは検索エンジンの評価に影響を与えますが、brタグは検索エンジンの評価に影響はありません。文章の改行目的にリストタグが使用されると、検索エンジンに誤解を与えサイトの評価を下げる恐れがありますので使い方には注意が必要です。
| タグ | 用途 | 特徴 |
|---|---|---|
| ul | 順序を意識しないリストの作成 | リスト項目の順序に意味がない |
| ol | 順序のあるリストを作成 | リスト項目の順序に意味がある |
| li | リストの項目をを表示させるための要素 | 必ずulタグまたはolタグ内で使用 |
| br | 文章の改行 | 見た目を改行するだけ |
(1)マーク付きのリスト（箇条書き）
マーク付きのリスト（箇条書き）を表すulタグは、項目の順番を気にせずに箇条書きにして並べたいときに使います。
リスト内の項目はulタグの入れ子にしたliタグで定義します。
| <ul> <li>りんご</li> <li>バナナ</li> <li>いちご</li> </ul> |
上記のHTMLの場合、ブラウザには自動的に次のように要素の前に黒丸「●」が付いたリストが表示されます。
|
デフォルトではリスト項目の先頭に黒丸などの記号が付きますが、CSSを用いて他の種類の記号や画像に変更することができます(CSSによる装飾方法は後述)。
箇条書きの項目数を増やしたい時は、liタグの数を自由に増やせます。
(2)番号付きのリスト（箇条書き）
料理のレシピのように、項目の順序に意味があるリスト（箇条書き）にはolタグ（ordered list）を使用します。liタグの使い方はulタグと同じです。
| <ol> <li>りんご</li> <li>バナナ</li> <li>いちご</li> </ol> |
上記のHTMLの場合、数字を記述しなくてもブラウザには次のように自動で番号付きのリストが表示されます。
|
箇条書きの項目数を増やしたい時は、liタグの数を自由に増やせます。
(3)リストタグ（箇条書きタグ）の入れ子
リストタグ（箇条書きタグ）は入れ子にして階層構造を持たせることができます。
入れ子にするには、liタグの中にさらにulタグやolタグを配置します。
| <ul> <li>北海道</li> <li>東北地方 <ul> <li>青森県</li> <li>岩手県</li> <li>秋田県</li> <li>福島県</li> <li>山形県</li> <li>宮城県</li> </ul> </li> <li>中部地方 <ul> <li>新潟県</li> <li>富山県</li> <li>…県</li> </ul> </li> </ul> |
⇓
ブラウザ上での表示：
|
入れ子にしたリストは、階層によって先頭の記号が決められています。
ulタグの場合、外側のリスト（1階層目）は黒丸、内側のリスト（2階層目）は白丸が表示されます。
外側を白丸、内側を黒丸などデフォルトと違う記号にするには、CSSによる装飾が必要です。
olタグの中にulタグ、ulタグの中にolタグといったように、異なる種類のリストを入れ子にすることもできます。
olタグの中にulタグを入れ子にした例
| <ol> <li>材料を用意する <ul> <li>じゃがいも</li> <li>玉ねぎ</li> <li>人参</li> </ul> </li> <li>下ごしらえをする</li> <li>調理する</li> </ol> |
⇓
ブラウザ上での表示：
|
ulタグの中にolタグを入れ子にした例
| <ul> <li>材料を用意する <ol> <li>じゃがいも</li> <li>玉ねぎ</li> <li>人参</li> </ol> </li> <li>下ごしらえをする</li> <li>調理する</li> </ul> |
⇓
ブラウザ上での表示：
|
入れ子にする階層の数に制限は設けられていませんが、階層が深くなり過ぎると視覚的に分かりづらくなるため、2〜3階層以内にとどめておきましょう。
リストタグ（箇条書きタグ）の書き方 応用編
リストタグ（箇条書きタグ）を応用してデザインを変更する方法を紹介します。
type属性を使って装飾する方法とCSSを使って装飾する方法があります。
(1)type属性によるリストタグ（箇条書きタグ）の装飾
リストタグ（箇条書きタグ）のtype属性は、項目の先頭に表示する記号を変更するために使用します。指定できる値はタグの種類によって決められています。
- olタグで使用できるtype属性の値
- 「a」・・・英小文字（a, b, c…）
- 「A」・・・英大文字（A, B, C…）
- 「i」・・・小文字のローマ数字（i, ii, iii…）
- 「I」・・・大文字のローマ数字（I, II, III…）
- 「1」・・・数字（1, 2, 3…）※デフォルト値
- ulタグで使用できるtype属性の値
- 「disc」・・・黒丸（●）※デフォルト値
- 「circle」・・・白丸（○）
- 「square」・・・四角（■）
olタグで使用できるtype属性の値
①HTMLサンプル（type=”a“）
| <ol type=”a“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
②HTMLサンプル（type=”A“）
| <ol type=”A“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
③HTMLサンプル（type=”i“）
| <ol type=”i“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
④HTMLサンプル（type=”I“）
| <ol type=”I“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
⑤HTMLサンプル（type=”1“）
| <ol type=”1“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
ulタグで使用できるtype属性の値
①HTMLサンプル（type=”disc“）
| <ul type=”disc“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
②HTMLサンプル（type=”circle“）
| <ul type=”circle“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
③HTMLサンプル（type=”square“）
| <ul type=”square“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
HTML5では、olタグのtype属性はサポートされていますが、ulタグのtype属性は非推奨です。type属性の代わりにCSS（list-style-type）を使用してください。
(2)CSSによるリストタグ（箇条書きタグ）の装飾
リストタグ（箇条書きタグ）はCSSを使用して装飾することもできます。行頭の記号を変更したりリストを横並びで表示するなど、デザインの幅を広げられます。
liタグの点を消す方法
liタグの先頭に自動で付与される記号は、親のリストタグに list-style:none; と指定することで非表示にできます。
| <ul style=”list-style: none;“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
※list-style:none; を指定しない場合の表示
|
liタグの先頭を他の記号に変更する方法
liタグの先頭には、親がulタグの場合は黒丸、olタグの場合は数字がデフォルトで付与されますが、親のリストタグに list-style-type を指定すると他の記号に変更できます。
| <ul style=”list-style-type:square;“> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
※list-style-type を指定しない場合
|
olタグの list-style-type には、次のような値が設定できます。
| 設定値 | 説明 | 表示内容 |
|---|---|---|
| decimal | 1から始まる数値 | 1, 2, 3… |
| decimal-leading-zero | 先頭がゼロ埋めされた数値 | 01, 02, 03… |
| lower-roman | ローマ数字（小文字） | ⅰ, ⅱ, ⅲ… |
| upper-roman | ローマ数字（大文字） | Ⅰ, Ⅱ, Ⅲ… |
| lower-greek | ギリシャ文字（小文字） | α, β, γ… |
| hiragana | ひらがな（五十音順） | あ, い, う… |
| hiragana-iroha | ひらがな（いろは順） | い, ろ, は… |
| katakana | カタカナ（辞書順） | ア, イ, ウ… |
| katakana-iroha | カタカナ（いろは順） | イ, ロ, ハ… |
| cjk-ideographic | 漢数字 | 一, 二, 三… |
| lower-latin | アルファベット（小文字） | a, b, c… |
| upper-latin | アルファベット（大文字） | A, B, C… |
これら以外にも、世界各国の代表的な言語などで表現可能です。すべての設定値を確認したい場合はMDN Web Docsというサイトのlist-style-typeページの値の項目を調べてみてください。
liタグを横並びにする方法
リストタグは箇条書きとして使うだけでなく、Webサイトのスライダーやメニューとして使われることも少なくありません。その際にリストを横並びにする必要も出てきます。
リストを横並びにするときは、liタグに対して display: inline; を指定します。
| <ul> <li style=”display: inline;“>リストの1番目</li> <li style=”display: inline;“>リストの2番目</li> <li style=”display: inline;“>リストの3番目</li> </ul> |
⇓
ブラウザ上での表示：
|
※display: inline; を指定しない場合
|
リストタグの種類に関わらず、display: inline; で横並びにしたリストは、項目先頭の記号や番号が表示されません。
次の例のようにCSSの擬似要素（詳細は別記事で解説）を使用すると、横並びにした状態で記号を付けることができます。
| <head> <style> li.inline-list { display: inline; position: relative; margin-right: 1em; } li.inline-list::before { content: “●”; } </style> </head> <body> <ul> <li class=”inline-list”>リストの1番目</li> <li class=”inline-list”>リストの2番目</li> <li class=”inline-list”>リストの3番目</li> </ul> </body> |
⇓
ブラウザ上での表示：
|
※擬似要素では、olタグのような自動連番（1,2,3…）は実現できません。
liタグに改行を入れる方法
リスト項目の中で改行させたいときは、brタグを使います。
| <ul> <li>リストの1番目改行なし</li> <li>リストの2番目<br>改行あり</li> <li>リストの3番目改行なし</li> </ul> |
⇓
ブラウザ上での表示：
|
brは「break」の略で、HTMLで改行を意味するタグです。brタグは単体で使用されるため、終了タグの記述は必要ありません。
リストタグ（箇条書きタグ）の正しい使い方
リストタグ（箇条書きタグ）の記述の仕方にはルールがあり、正しい使い方、書き方をしない限り検索エンジンがWEBページを正確に理解できません。SEOの観点からも問題です。
(1)ulタグ・olタグの直下には必ずliタグを配置する
HTMLの仕様上、ulタグやolタグの直下にはliタグしか入れられないことになっています。次のようにaタグやpタグなど他のタグや文字を<li>と</li>の間以外に配置するのはルール違反です。
×ダメな例
| <ul> <a href=”index.html”><li>リストの1番目</li></a>⇐ルール違反 <p>リストの2番目</p>⇐ルール違反 <li>リストの3番目</li> </ul> |
| <ul> <li> <ul> <li>リストの1番目</li> <li>リストの2番目</li> </ul> </li> <p>リストの3番目</p>⇐ルール違反 <a href=”index.html”>リストの4番目</a>⇐ルール違反 </ul> |
ulタグやolタグの直下や<li>と</li>の間以外に文字を直接入れるのもNGとされています。
| <ul> リストの見出し⇐ルール違反 <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
| <ul> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> リストの見出し⇐ルール違反 </ul> |
なお、liタグの中に他のタグを入れるのは問題ありません。
| <ul> <li><a href=”index.html”>リストの1番目</a></li> <li><p>リストの2番目</p></li> <li>リストの3番目</li> </ul> |
liタグの上にリストの見出しを入れたい時は？
liタグの上にリストの見出しを入れたい時は、次の2つの方法があります。
①ulタグの上にhタグやpタグで見出しを付ける
②リストを入れ子にして親リストに見出しを入れる
①ulタグの上にhタグやpタグで見出しを付ける
| <h2>リストの見出し</h2> <ul> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
| <p>リストの見出し</p> <ul> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> |
②リストを入れ子にして親リストに見出しを入れる
| <ul> <li><h2>リストの見出し</h2> <ul> <li>リストの1番目</li> <li>リストの2番目</li> <li>リストの3番目</li> </ul> </li> </ul> |
(2)liタグ内に他のタグを入れるときの適切なケース
liタグの中には、a・br・div・h1〜h6・img・p・ul・dl・span・strongなど、さまざまな種類のタグを入れ子にすることができます。リスト項目を装飾したり、liタグの中に複雑な構造のコンテンツを展開したい場合、次の例のようにdivタグを活用する方法が最適です。
リスト項目を装飾する
装飾したい部分をdivタグで囲み、CSSを指定して文字色などを変更します。
| <ul> <li> <div style=”color:pink;”>❤︎</div>ハート </li> <li> <div style=”color:red;”>◆</div>ダイヤ </li> <li> <div style=”color:blue;”>♠︎</div>スペード </li> <li> <div style=”color:green;”>♣︎</div>クローバー </li> </ul> |
⇓
ブラウザ上での表示：
|
リスト項目内に複雑な構造のコンテンツを配置する
単純なテキストのみではなく、複雑な構造のリストを作成するときもdivタグが有用です。次の例では、リンクや画像など複数の要素をdivタグでグループ化しています。
| <ul> <li style=”list-style:none;”> <div> <h1>最新おすすめ商品</h1> <h2>新型ワイドテレビ</h2> <p>商品名：有機ELテレビ REGZA 2025年式</p> <ul> <li>出荷台数<span style=”color:red;”><strong>100万台</strong></span>突破！</li> <li>一番売れている人気のテレビです</li> </ul> <dl> <dt>4K超高画質</dt> <dd>細部までくっきり映し出し、映画やスポーツ観戦に最適！</dd> <dt>ネット動画対応</dt> <dd>YouTubeやNetflixなど多彩なサービスに対応。<br>動画アプリの追加も可能です。</dd> </dl> <img src=”img/tv.png” alt=”テレビ”> <p><a href=”#”>商品詳細はこちら</a></p> </div> </li> <!– 他のリスト項目も同じように作成 –> </ul> |
⇓
ブラウザ上での表示：
liタグ内にdivタグを入れる際、divタグを過度に使用するとリストの目的が分かりにくくなり、セマンティクス（HTML要素の意味）が崩れてしまう可能性があります。
HTMLのセマンティクスは、SEOやアクセシビリティの観点で重要な概念です。レイアウトや装飾の都合でどうしても必要な場合のみ、divタグを使うようにしましょう。
(3)pタグの直下にリストタグを入れない
段落とリストを組み合わせて使う場合、以下の構造は誤りとなります。理由は、pタグの直下にulタグを配置することがコンテンツモデルに違反しているためです。
| <p>重要なポイントは、 <ul>⇐ルール違反 <li>A</li> <li><p>B</p></li> <li>C</li> </ul> の3つです。 </p> |
HTMLにはコンテンツモデルと呼ばれる定義があり、各要素（タグ）の中にどの要素を入れることができるか、あらかじめルールとして決められています。
コンテンツモデルを無視してHTMLを記述すると、ブラウザに正しく解釈されず表示が崩れたり、SEOに悪影響を及ぼすリスクが生まれます。
今回の例では、HTMLを次のように変更することで違反を回避できます。
| <p>重要なポイントは、</p> <ul> <li>A</li> <li><p>B</p></li> <li>C</li> </ul> <p>の3つです。</p> |
なお、上記の「<li><p>B</p></li>」のように、liタグの中にpタグなどを含めることは、リストの各項目の詳細な説明や装飾に有効です。HTMLの標準仕様にも準拠しています。
全体を一つの段落として扱いたい場合は、pタグを使用する代わりにdivタグを使う方法も考えられます。(Web技術の標準化団体「W3C」もこちらの方法を推奨しています)
| <div>重要なポイントは、 <ul> <li>A</li> <li><p>B</p></li> <li>C</li> </ul> の3つです。 </div> |
(4)リストタグを多用して冗長にならないよう注意する
簡単に項目が整理できて便利なリストタグですが、同じWebページ内で多用しすぎると情報が煩雑になり、ユーザーにとって重要な情報が埋もれやすくなります。
SEOの観点から見ても、リストタグの使いすぎは質の低いコンテンツと判断されて検索結果に影響を与える可能性がありますので、適切な場面で使用するよう心がけてください。
liタグで利用できる属性
liタグには次の属性を使うことができます。
| 属性 | 内容 |
|---|---|
| value | olタグ内で使用した場合に、リスト項目の番号を変更する |
| type | リスト項目の先頭に表示する記号を変更する |
| グローバル属性 | idやclassなど、すべてのHTML要素で共通の属性 |
※liタグのtype属性は、リスト項目に対して個別に記号を指定できて便利ですが、HTML4.01から非推奨となりました。同様の装飾はCSSにて行ってください。
value属性
通常、olタグ内のリスト項目の番号は自動的に振られますが、value属性を指定すると任意の番号に変更することができます。
※value属性には数値しか指定できません。
| <ol> <li>リストの1番目</li> <li value=”10″>リストの2番目</li> <li>リストの3番目</li> </ol> |
⇓
ブラウザ上での表示：
|
value属性を指定した後に続くliタグは、value属性で指定された番号に続く番号が割り振られます。
リストタグ（箇条書きタグ）の必要性
リストタグを使うことにより、関連性のある項目をグループ化し、箇条書きにして視覚的にも分かりやすく表示できます。
見た目だけ気にするのであれば、pタグで項目を並べたり文章をbrタグで改行させても箇条書きを表現できますが、箇条書きをリストタグで構造化することで、検索エンジンにHTML文書の意味（箇条書きが要約であり強調したい部分である）をより正しく伝えられるようになります。