2026年4月16日
HTML リストとは？ul・ol・liの基本
ウェブページでよく見る「・りんご・バナナ・みかん」のような箇条書きや、「1. 起きる 2. 顔を洗う」のような番号付きリストは、HTMLのリストタグで作られています。
HTML リストには主に2種類あります。ul（アンオーダードリスト）と ol（オーダードリスト）です。どちらも <li> タグで各項目を書きます。
ulタグ：箇条書きリスト（順番なし）
<ul>（Unordered List）は、順番に意味がない箇条書きリストを作ります。各項目の先頭に「・」が表示されます。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>▶ プレビュー
👉 HTMLで画像を表示する方法も参考にしてください。
olタグ：番号付きリスト（順番あり）
<ol>（Ordered List）は、順番に意味がある番号付きリストを作ります。各項目に自動で番号がつきます。
<ol>
<li>HTMLを学ぶ</li>
<li>CSSを学ぶ</li>
<li>JavaScriptを学ぶ</li>
</ol>▶ プレビュー
start 属性で開始番号を変えられます。
<ol start="3">
<li>3番目から始まる</li>
<li>4番目</li>
</ol>リストのネスト（入れ子）
リストの中にリストを入れることができます。これを ネスト（入れ子） といいます。
<ul>
<li>フロントエンド
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>バックエンド
<ul>
<li>Python</li>
<li>Ruby</li>
</ul>
</li>
</ul>🔥 headタグに書くべき内容で実践してみましょう。
CSSでリストをデザインする
/* デフォルトのスタイルをリセット */
ul {
list-style: none; /* 「・」を消す */
padding: 0;
}
/* カスタムリスト */
ul li {
padding: 8px 16px;
border-bottom: 1px solid #e5e7eb;
}
ul li::before {
content: '✅ '; /* 独自のマーカー */
}💡 HTMLタグ一覧【よく使う20選】で基礎を確認できます。
リストの使い分け
HTMLには3種類のリストがあります。場面に応じて使い分けましょう。
順序なしリスト（ul）
項目に順番がないときに使います。「・」（ビュレット）で表示されます。好きなものリスト、材料一覧、メニュー項目などに使います。項目の順番を入れ替えても意味が変わらないなら、ulを使いましょう。
順序ありリスト（ol）
項目に順番があるときに使います。「1. 2. 3.」のように番号がつきます。手順の説明、ランキング、レシピの作り方などに使います。順番を入れ替えると意味が変わるなら、olを使いましょう。
定義リスト（dl）
用語とその説明をセットで表示するときに使います。dtタグで用語を、ddタグで説明を書きます。用語集やFAQ（よくある質問）に向いています。
リストの入れ子（ネスト）
リストの中にさらにリストを入れることができます。これを「入れ子」または「ネスト」と呼びます。
たとえば「好きな食べ物」リストの中に「和食」「洋食」のサブカテゴリを作り、それぞれの中に具体的な料理名を並べる、といった使い方ができます。
入れ子にするときは、liタグの中に新しいulタグまたはolタグを書きます。何段階でも入れ子にできますが、3段階以上になると読みにくくなります。2段階までに抑えるのがおすすめです。
リストをCSSでカスタマイズする
リストの見た目はCSSで自由に変えられます。
マーカーを変える
list-style-typeプロパティで、リストの先頭記号を変えられます。disc（黒丸）、circle（白丸）、square（四角）、none（なし）などが指定できます。
マーカーを消してオリジナルデザインにする
list-style: none;でマーカーを消して、代わりに絵文字やアイコンを表示する方法もあります。ナビゲーションメニューを作るときは、リストのマーカーを消してリンクを横並びにするのが定番です。
余白を調整する
リストにはデフォルトでpadding-leftが設定されています。左の余白が大きすぎると感じたら、padding-left: 0;で消すか、好きな値に変えましょう。
リストでよくあるミス
ミス1：ulやolの直下にli以外を書く
ulタグやolタグの直接の子要素はliタグだけです。pタグやdivタグを直接入れるのは間違いです。テキストや他のタグはliタグの中に書きましょう。
ミス2：liタグの閉じ忘れ
liタグの閉じタグを忘れると、リスト項目の区切りがおかしくなります。開始タグを書いたら、すぐに閉じタグも書く癖をつけましょう。
ミス3：リストを使うべき場面で使っていない
箇条書きにすべき内容をpタグで「・」を手打ちしている人がいます。これはHTMLとして正しくありません。箇条書きにはul・liタグを使いましょう。スクリーンリーダーが「リストです」と認識してくれるので、アクセシビリティも向上します。
ミス4：ナビゲーションにリストを使わない
ナビゲーションメニューはリスト（ul・li）で作るのが標準的な方法です。見た目はCSSで横並びにできます。divやspanで作るよりも、構造的に正しいHTMLになります。
リストはシンプルですが、ウェブページのあらゆる場面で使われる重要なタグです。しっかり使いこなしましょう。
まとめ
- ✅ ul：順番なしの箇条書きリスト
- ✅ ol：順番ありの番号付きリスト
- ✅ li：リストの各項目
- ✅ リストの中にリストを入れてネストできる
- ✅
list-style: noneでデフォルトのマーカーを消せる
HTMLの基礎はHTML入門で復習できます。リストの余白調整はmarginとpaddingの違いを参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLセマンティックタグ入門 — リストとセマンティクス
- marginとpaddingの違い — リストの余白調整
- CSSのdisplayプロパティ — リストの横並び表示
- CSS Flexbox入門 — ナビゲーションのレイアウト
- HTMLリンクの作り方 — リスト内のリンク