悩む人HTMLでリストを作るとき、ulとolのどっちを使えばいいの？
悩む人リストタグの入れ子ってどう書くのが正解なんだろう…
Web制作を始めたばかりの方や、コーディングを効率化したい現役制作者の中には、こんな疑問やモヤモヤを感じたことがあるのではないでしょうか。
この記事では、HTML初心者から中級者までを対象に、ul・ol・liタグの役割、使い方、現場での活用法、さらにCSSを使ったデザインカスタマイズの方法までを徹底的に解説します。
「とりあえず使う」から「意味を理解して正しく使う」へ、リストタグをマスターして、読みやすく・美しく・検索エンジンにも強いHTML構造を一緒に目指しましょう。
かすがHTMLの書き方を初心者の方向けにわかりやすく解説している以下の記事もぜひチェックしてみてくださいね！
ul・ol・liタグの役割と違いが理解できる- HTMLにおけるリストの基本的な書き方が身につく
- ネスト（入れ子）を使ったリストの構造がわかる
- CSSでリストのデザインを自由にカスタマイズする方法が学べる
- グローバルナビゲーションや目次など、実務での具体的な使い方がわかる
- SEOやアクセシビリティに配慮したリストの正しい使い方が理解できる
HTMLのul・ol・liタグとは？
HTMLで情報を整理して表示したいときに欠かせないのが、「リストタグ」です。
中でも ul、ol、li は非常によく使われる基本要素。文章だけでは伝わりにくい情報も、リスト化することで一目で理解しやすくなります。
これらのタグの役割と関係性を正しく理解することで、HTMLの構造をより明確にし、ユーザーにも優しいページを作成できます。
ここでは、それぞれのタグが何を意味し、どのように使われるのかをわかりやすく解説していきます。
ul・ol・liタグの役割と違い
ul、ol、li は、HTMLにおいて「リスト（一覧）」を作成するためのタグです。それぞれのタグには役割があり、組み合わせて使用することで、意味のある構造をもったリストが作成できます。
- ulタグ（unordered list）：順序のないリストを作るタグです。箇条書きのように、要素の順番に意味がないときに使用します。
- olタグ（ordered list）：順序のあるリストを作るタグで、数字やアルファベットなどで自動的に番号が振られます。手順やランキングなど、順番に意味がある情報に適しています。
- liタグ（list item）：リストの中の各項目を示すタグで、
ulやolの子要素として使われます。単独では使わず、必ず親タグの中で使用するのがルールです。
かすがちなみに上の部分がまさにul・liを使ったリストになっていますよ！
例えば、HTMLで料理の材料をリスト化したい場合は ul タグを、作り方の手順を示したい場合には ol タグを使うと、意味が明確になります。
このように、ul、ol、li タグは、HTMLの基本構造の中でも重要な役割を果たしており、正しく使い分けることで、コンテンツの理解度が格段に向上します。
ul・ol・liタグの基本的な使い方
ul、ol、li タグの概要を理解したところで、ここからはそれぞれの基本的な使い方について具体的に見ていきましょう。
ただ知識として知っているだけでなく、実際に使いこなせるようになるためには、正しい構文や使用パターンを理解することが欠かせません。
ここでは各タグごとに、基本的なHTMLの記述例を交えながら解説していきます。
ulタグの使い方
ul タグは、順序が必要ないリストを作成する際に使用されます。例えば、買い物リストやチェックリストのように、並び順に意味がない場合に最適です。
以下は ul タグの基本的な構文です：
See the Pen 「html ul li」ulタグの使い方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このコードをブラウザで表示すると、黒い丸（デフォルトのリストマーク）が各項目の前に付き、縦に並んだリストになります。
ul は「unordered list」の略で、「順不同のリスト」を意味します。情報の羅列を整理したいときに非常に便利です。
olタグの使い方
ol タグは、順序が重要なリストを作成するためのタグです。手順やランキング、ステップバイステップの説明などに使うと効果的です。
以下に基本的な例を示します：
See the Pen 「html ul li」ulタグの使い方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように、ol タグを使用すると各リスト項目の前に自動で番号が付きます。数字の代わりにアルファベットやローマ数字にカスタマイズすることもできます（CSSで変更可能）。
視覚的にも順序が明確になるため、ユーザーにとって非常に親切な構造です。
liタグの使い方
li タグは、リストの各項目（リストアイテム）を示すために使います。ul や ol の中でのみ使用可能で、単体で使うことはできません。
基本構文は以下の通りです：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
ここでの li は「list item」の略。リスト全体の中で1つの要素を表します。複数の li を並べることでリストを構成していきます。
リストの構造は以下のような親子関係で成り立っています：
ul / ol（親タグ）
├─ li（子タグ）
├─ li
└─ li
このような正しい構文を理解することは、HTMLマークアップの基本であり、SEO的にも評価されるコーディングにつながります。
ul・olタグを入れ子（ネスト）にする
リストの中にさらにリストを含めたい場合、「入れ子構造（ネスト）」を使うことで、階層的な情報を整理して表示できます。
例えば、カテゴリの中にサブカテゴリがあるようなケースでは、ネストを活用することで構造が明確になります。ただし、正しい記述をしないと、意図しない表示になることもあるため注意が必要です。
ここでは、ul・olタグを使ったネストの書き方と注意点について解説します。
ulタグの中にulをネストする例
ネストとは、ul や ol の中にさらに ul または ol を入れることで、階層構造のリストを作る手法です。実際の例で見てみましょう。
See the Pen 「html ul li」olタグの使い方 by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように、li タグの中に新たな ul を入れて、階層的な構造を作ります。ブラウザ上では、インデントされたサブリストとして表示され、見た目にも分類がはっきりします。
olタグの中にolをネストする例
See the Pen 「html ul li」ulタグの中にulをネストする例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
こちらも同様に、入れ子にすることで複数階層の手順や構造を視覚的に整理することができます。番号も自動で入れ子レベルに応じて振り直されるため、手動で番号を管理する必要がありません。
ulの中にol、またはolの中にulを入れることも可能
ネスト構造では、ul の中に ol、またはその逆に ol の中に ul を入れることも可能です。これは、情報の種類や重要度に応じて適切に使い分けることで、より読みやすくなります。
See the Pen 「html ul li」ulの中にol、またはolの中にulを入れることも可能 by kasuga (@kntkfmgf-the-vuer) on CodePen.
ネスト構造を使うときの注意点
- liの中にネストすること：
ulやolを直接別のul・olの中に入れてはいけません。必ずliの中に入れましょう。 - 深すぎるネストは避ける：ユーザーが読みにくくなるだけでなく、アクセシビリティにも悪影響を及ぼすため、2〜3階層までが望ましいです。
- CSSで適切に調整する：ネストすると自動的にインデントが加わりますが、必要に応じてマージンやパディングを調整すると見やすくなります。
このように、ネスト構造をうまく使うことで、複雑な情報でも階層的に整理され、ユーザーにとって理解しやすいページが作成できます。
リストのデザインをCSSでカスタマイズする方法5選
HTMLの ul・ol タグは、初期状態でもリスト表示が可能ですが、サイト全体のデザインにマッチさせるには、CSSによるカスタマイズが欠かせません。
リストマークの種類変更や、番号スタイルの調整、さらには見た目をまったく新しくするなど、リストには多彩な装飾が可能です。
ここでは、リストタグをCSSで自由にデザインする方法を段階的に紹介します。
1.ulのリストマークを変更する
ul タグで使われるリストマーク（黒い丸）は、list-style-type プロパティを使って変更できます。例えば、四角や中抜きの円など、いくつかのプリセットから選択可能です。
See the Pen 「html ul li」ulの中にol、またはolの中にulを入れることも可能 by kasuga (@kntkfmgf-the-vuer) on CodePen.
主な値は以下のとおりです。
| 値 | 説明 |
|---|---|
| disc | 黒丸、初期値 |
| circle | 中抜き丸 |
| square | 四角 |
ブラウザによっては、若干見た目が異なる場合もありますが、シンプルな変更にはこのプロパティだけで十分対応できます。
2.olの番号スタイルを変更する
ol タグには、デフォルトで数字が付きますが、CSSまたはHTML属性でスタイルを変えることが可能です。たとえば、ローマ数字やアルファベットなども指定できます。
See the Pen 「html ul li」olの番号スタイルを変更する by kasuga (@kntkfmgf-the-vuer) on CodePen.
かすがolの番号スタイルは種類が結構あり、かつマニアックなものもあるので以下にまとめますね。
指定できる値を全部見る
以下は、ol（順序付きリスト）で使用可能なナンバリングスタイルの一覧です。これらはすべて list-style-type プロパティで指定できます。
数値・文字によるナンバリング
| 値 | 説明 |
|---|---|
decimal | 通常のアラビア数字（1, 2, 3…）※デフォルト値 |
decimal-leading-zero | 先頭にゼロを付けた数字（01, 02, 03…） |
英字によるナンバリング
| 値 | 説明 |
|---|---|
lower-alpha / lower-latin | 小文字アルファベット（a, b, c…） |
upper-alpha / upper-latin | 大文字アルファベット（A, B, C…） |
ローマ数字によるナンバリング
| 値 | 説明 |
|---|---|
lower-roman | 小文字ローマ数字（i, ii, iii…） |
upper-roman | 大文字ローマ数字（I, II, III…） |
その他（主に非推奨または非対応ブラウザが多い形式）
以下の値は、かつて一部ブラウザで使われたものですが、現在のHTML5では推奨されていないか、CSSでは非標準のため注意が必要です。
| 値 | 備考 |
|---|---|
armenian | アルメニア数字（例：Ա, Բ, Գ…） |
georgian | ジョージア数字（例：an, ban, gan…） |
lower-greek | 小文字ギリシャ文字（α, β, γ…）※多くのブラウザでは未サポート |
HTML属性 type による指定（参考）
HTMLの <ol> タグには type 属性でも番号スタイルを指定可能ですが、CSSの使用が推奨されています。
<ol type="A">
<li>項目1</li>
<li>項目2</li>
</ol>
| type属性の値 | 出力形式 |
|---|---|
"1" | 1, 2, 3…（デフォルト） |
"A" | A, B, C… |
"a" | a, b, c… |
"I" | I, II, III… |
"i" | i, ii, iii… |
補足
- 一部の値（例：armenian、georgian、lower-greek）は全てのブラウザで正しく表示されない可能性があります。
- 実際の表示はOSやフォント、ブラウザによって異なる場合があります。
3.リストマークをなしにする
リストマークを完全に非表示にするには、list-style: none; を使います。
主にナビゲーションメニューなどで、リスト形式の構造を保ちながら、マークは表示したくない場合に用います。
See the Pen 「html ul li」リストマークをなしにする by kasuga (@kntkfmgf-the-vuer) on CodePen.
特に横並びのナビゲーションやカラム表示のリストでは、この設定が一般的です。
4.リストマークを自由にカスタマイズする
より個性的なデザインをしたい場合、リストマークを自作の画像やアイコン、擬似要素で装飾することができます。
擬似要素を使う
::before 擬似要素を活用すると、リストの前に自由なマークやテキスト、画像などを挿入できます。
See the Pen 「html ul li」リストマークをなしにする by kasuga (@kntkfmgf-the-vuer) on CodePen.
この方法のメリットは、HTMLの構造を変更せずに見た目だけを調整できる点です。たとえばチェックマークや矢印などを使って、ユーザーの注目を集めるデザインにも応用できます。
さらに、Font Awesomeなどのアイコンライブラリを使えば、装飾の幅は無限に広がります。
5.リストを横並びにする
リスト項目を横一列に並べたい場合は、CSSの display プロパティを調整します。ナビゲーションメニューなどでよく使われるテクニックです。
See the Pen 「html ul li」リストを横並びにする by kasuga (@kntkfmgf-the-vuer) on CodePen.
上記のように display: flex; を使えば、レスポンシブにも対応しやすく、整ったレイアウトになります。inline-block を使う方法もありますが、現在ではFlexboxが主流です。
かすがdisplay: flex;については以下の記事で詳しく解説しています。ぜひチェックしてみてください！
このように、CSSを活用すればリストは単なる箇条書きを超えて、見た目にも魅力的なコンテンツ要素へと変化します。自分のサイトに合ったスタイルを選び、ユーザー体験を向上させましょう。
ul・ol・liタグを使った現場で使える事例3選
ul・ol・liタグは、ただ単に箇条書きを作るためのものではありません。
実際のWeb制作現場では、ナビゲーションや目次、記事一覧など、ユーザーインターフェースの一部として多く活用されています。
ここでは、実務でよく使われている代表的な3つの活用例をご紹介します。どれもすぐに取り入れられるものばかりなので、HTML学習者にも実務者にも参考になるはずです。
グローバルナビゲーション
Webサイトのヘッダー部分にある「ホーム」「サービス」「お問い合わせ」などのリンクメニューには、ulタグがよく使われます。
リスト構造でマークアップすることで、意味的にも正しい構造を保ちつつ、CSSで自由にスタイリングできます。
See the Pen 「Flexbox」align-self:stretch by kasuga (@kntkfmgf-the-vuer) on CodePen.
アクセシビリティの面でも、リストとしてマークアップすることで、スクリーンリーダーが正確に読み取れるというメリットがあります。
かすがグロナビは公式サイトでもブログ・LPでも必須級のWebパーツですね！
目次
ブログ記事やマニュアルページの「目次」は、項目に明確な順序があるため、ol（順序付きリスト）タグを使うのが適しています。
特に「第1章」「第2章」といった構成がある場合には、olを使うことで視覚的にも構造的にも論理性が高まります。
See the Pen 「html ul li」リストを横並びにする by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように順番を明示することで、読者にとってページの構成が一目で分かるようになり、UX（ユーザー体験）の向上にもつながります。
また、構造化されたHTMLとして、検索エンジンにも正しく認識されやすくなるため、SEOの面でも有利です。必要に応じて、入れ子のolを使って階層的な目次にすることも可能です。
かすがこのブログも記事冒頭とサイドバーに目次があります。読みたいところにジャンプできる目次はブログではもはや必須ですね！
ブログの投稿一覧
記事一覧ページで、投稿タイトルとリンクをリスト形式で並べる場合も、ulタグ＋liタグの構造がよく使われます。これにより、記事情報を簡潔に整理して表示することができます。
See the Pen 「Flexbox」サンプル グローバルナビゲーション by kasuga (@kntkfmgf-the-vuer) on CodePen.
このような構造はSEOにも効果的で、HTMLのセマンティクスを正しく保ったまま、情報を整理して伝えることができます。
かすが実際の制作現場でも、このサンプルコードのようなレアウトウトは鉄板です！
このように、ul・ol・liタグは実際のWeb制作において幅広く活用されており、基本的なタグながら非常に実用性の高い存在です。目的に応じて柔軟に使いこなしましょう。
ul・ol・liタグを使うときのポイント3つ
ul・ol・liタグはシンプルな構文ながら、正しく使わなければ意味が伝わりにくくなり、SEOやアクセシビリティにも悪影響を及ぼすことがあります。
リスト構造は、単なる装飾ではなく「意味を持った情報整理」の手段です。
ここでは、リストタグを使うときに気をつけたいポイントを、実例付きでわかりやすく解説します。
1.コンテンツに適切なリストを入れることで情報を整理できる
文章が長くなりがちな場面では、リストタグを活用することで視覚的に情報を整理し、読みやすさを格段に高めることができます。以下に、リストを使わない例と使った例を比較してみましょう。
リストがない読みにくい例
See the Pen 「html ul li」リストがない読みにくい例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
一文に情報が詰め込まれており、読者にとってポイントが把握しづらい状態です。
リストを入れた情報が整理された例
See the Pen 「html ul li」リストを入れた情報が整理された例 by kasuga (@kntkfmgf-the-vuer) on CodePen.
一目で3つの特徴が把握でき、情報の優先順位も伝えやすくなります。
リストは、読み手が「どこに注目すればいいのか」を明確にできる手段の一つです。特にモバイル環境では、視認性が非常に重要になるため、積極的に活用しましょう。
2.ul・olタグの意味を理解して適切に使い分ける
前の章でも触れたように、ulは「順不同」、olは「順序あり」のリストです。視覚的な違いだけで選ぶのではなく、コンテンツの意味に応じてタグを選択することが重要です。
例えば、以下のような例を見てみましょう：
間違った例（見た目だけで選んだul）
See the Pen 「html ul li」間違った例（見た目だけで選んだul） by kasuga (@kntkfmgf-the-vuer) on CodePen.
順序が明らかに意味を持っているのに、ulを使ってしまっている。
正しい例（olを使用）
See the Pen 「html ul li」正しい例（olを使用） by kasuga (@kntkfmgf-the-vuer) on CodePen.
このように、リストの意味的な正しさを意識することで、HTML文書の品質も向上し、検索エンジンや支援技術にも正しく認識されます。
3.ul・olタグの直下にはliタグだけが入れられる
ulやolタグの構造で特に注意したいのが、直下にli以外のタグを入れてはいけないという点です。
NG例：
<ul>
<p>これは間違いです</p>
</ul>
ブラウザによっては強制的に表示されることもありますが、構文としては不正です。
OK例：
<ul>
<li>正しい使い方</li>
</ul>
ブロック要素を含む例：
liタグの中にさらにブロック要素（pタグやdivタグなど）を入れることは可能です。その際はliの中に要素を入れるようにしましょう。
<ul>
<li>
<p>この製品の特徴</p>
<ul>
<li>軽量</li>
<li>コンパクト</li>
</ul>
</li>
</ul>
このような構造であれば、HTMLとして問題なく、階層的な情報整理も行えます。
リストタグはシンプルなだけに、正しく使うかどうかで情報の伝わりやすさが大きく変わります。意味的にも構造的にも正しいHTMLを書くことが、読みやすく、評価されるページ作りへの第一歩です。
WEBデザイナー・フロントエンドのスキルを確実に身につけたい方へ
「WEBデザインやフロントエンドを学びたい」と思い立ったとき、多くの方がまず独学を選びます。
しかし、独学では「何をどこから学べばいいかわからない」「つまずいたときに誰にも聞けない」といった壁にぶつかることも少なくありません。
一方、スクールで学べば、正しい順序で、現場で使えるスキルを効率よく習得することができます。最短ルートでスキルを身につけたい方には、スクール学習がおすすめです。
かすが私は26歳で印刷業からWEBデザイナーを目指して学び始めましたが、やはり独学に限界を感じ短期スクールで学びました。本気でスキルを身につけたいならスクールはマジで行った方が良いです！
- カリキュラムが体系化されているため、基礎から応用まで無駄なく学べる
- 現役のプロから実践的なフィードバックを受けられる
- わからないことをすぐに質問・解決できる環境がある
- 制作課題を通じて、ポートフォリオが作成できる
- 学習仲間や講師とのつながりが、モチベーション維持につながる
- カリキュラムが現場で必要とされる技術に対応しているか
- 現役デザイナー・エンジニアが講師として在籍しているか
- ポートフォリオ制作のサポートが充実しているか
- 卒業後の就職・転職支援が用意されているか
- オンライン・通学など、自分の生活スタイルに合った受講形式か
遠回りせず、確実にスキルを身につけたいなら、プロに教わるのが一番の近道です。
WEBデザイナー・フロントエンドエンジニアとして一歩踏み出したいあなたにぴったりのスクールを、下記の記事でご紹介しています。ぜひチェックしてみてください。
HTMLのul・ol・liタグまとめ
ここまで、HTMLのリストタグである ul・ol・li の基本から、実践的な使い方、デザインカスタマイズの方法までを幅広く解説してきました。最後に要点を整理し、もう一度おさらいしておきましょう。
ul：順不同のリスト（例：買い物リスト）ol：順序付きのリスト（例：手順、ステップ）li：リストの各項目。ulやolの子要素として使用
<ul><li>項目</li></ul>：箇条書きリスト<ol><li>項目</li></ol>：番号付きリストliはulまたはolの中でしか使えない
liタグの中に別のulまたはolを入れることで階層的なリストを作成- 入れ子が深くなりすぎないように注意（最大でも2〜3階層までが理想）
list-style-typeを使ってリストマークやナンバリングを変更- 例：
disc（黒丸）、circle（中抜き丸）、square（四角） - olでは：
decimal、upper-alpha、upper-romanなど多数 list-style: none;でリストマークを消す- 擬似要素（
::before）でオリジナルマークを付加 display: flex;を使ってリストを横並びにするのも一般的
- グローバルナビゲーション：
ul＋li＋aの組み合わせでよく使われる - 目次：順序があるなら
olを使うと構造的にも正確 - 投稿一覧：記事リストや更新情報などに
ulが多用される
- リストを使うことで、情報が視覚的に整理され読みやすくなる
- 順序の有無で
ulとolを使い分けることが重要 ul・olの直下にはliのみを入れる（他の要素はNG）- 構造が意味的に正しければ、SEO・アクセシビリティにも好影響
ul・ol・li は、HTMLの中でも最も基本的かつ頻出の要素ですが、その使い方ひとつで情報の伝わり方が大きく変わります。
シンプルな記述でありながら、ユーザーの読みやすさ、理解しやすさ、さらにはSEOへの効果にもつながる非常に重要なタグです。
実装時は常に
- この情報に順序は必要か？
- リストを使うことで読みやすくなるか？
といった観点でタグを選ぶようにしましょう。
