htmlタグ｜li（リスト）・ul（順不同）・ol（番号順）

ホームページ（ウェブサイト）制作において、複数の情報や項目を整理し、ユーザーにとって分かりやすく提示することは非常に重要です。その際に頻繁に使用されるのが、リスト（箇条書き）を作成するためのHTMLタグである「li」「ul」「ol」です。

ホームページ（ウェブサイト）上で情報を羅列する際、単に改行を繰り返して文章を並べるだけでは、構造が明確になりません。「ul」タグは「Unordered List」の略であり、順序に関係のない項目を並べる順不同リスト（行頭に黒丸などがつく箇条書き）を作成する際に使用します。一方で、「ol」タグは「Ordered List」の略であり、手順やランキングなど、順序に意味がある番号順リストを作成する際に使用します。そして、これら「ul」や「ol」のタグの中に、個々の項目を示す「li」（List Item）タグを配置していくのが基本構造です。

より専門的には、これらのリストタグを適切に使い分けることは、SEO（検索エンジン最適化）において大きな意味を持ちます。検索エンジンのクローラーは、見た目のデザインではなくHTMLの構造を読み取ってコンテンツの文脈を理解します。関連する項目が「ul」や「ol」でグループ化され、「li」で個別にマークアップされていることで、検索エンジンはそれらがひとまとまりの関連情報であると正確に認識します。これにより、ページ内の情報が整理されていると評価され、検索結果に良い影響を与える可能性があります。また、音声読み上げソフトを利用するユーザーにとっても、リストとして正しくマークアップされていれば、いくつの項目があるのかを適切に読み上げられるため、情報の理解度が格段に向上します。

本ページでは、「li」「ul」「ol」タグの基本的な記述方法から、入れ子（階層化）構造の作り方、そしてCSSを活用したデザインの工夫までを詳しく解説します。

li（リスト）

<li></li>

ホームページ制作（ウェブサイト制作）の際に使用する<li>タグについてのご説明です。

<li>（リスト、リストアイテム）タグは、ホームページ（ウェブサイト）内の「リスト」の中の各項目を定義する際に使用します。

順不同リスト、順序ありのリストかどうかは、<ul>や<ol>で定義しますが、それらリストの中の1つずつの各項目を記述する際に「リストアイテム」として<li>タグを使用します。

<li> リスト項目の定義、リストの項目を記述

List Item（リストアイテム）。ホームページ制作においてリストの項目を記述します。

リストの項目ごとに<li>タグで囲うことでリスト中の一つの項目として定義します。

この<li>タグは、<ul><ol>の中に記述します。順不同リスト、順序のあるリストの中身（リスト項目）を指定します。

例

<ul>
 <li></li>
 <li></li>
</ul>

<ol>
 <li></li>
 <li></li>
</ol>

type

<ul>内で項目ごとにリストマーク種類を指定

過去の規格では、ulタグやliタグに直接type属性を指定して箇条書きのマークを変更することが可能でした。しかし現在のHTMLの標準仕様HTML Living Standardでは、ulタグやliタグにおけるtype属性は廃止されています。マーカーの種類を変更したり、独自のデザインを適用したりする視覚的な装飾は、すべてCSSのlist-style-typeプロパティなどを用いて制御することが現代のホームページ制作における基本ルールです。

type=””　disc（黒丸）circle（白丸）、square（黒い四角）

読み方　リストアイテム

なお、リストのマークはCSSのlist-styleなどでも装飾が可能です。

css list-style リストスタイル

<li></li>

ホームページ制作・SEOの1ポイント

ホームページ制作でリストを表現するときは、<ul>と合わせて<li>を使用します。項目のテキストの先頭に中黒を付けてパラグラフとして掲載しているケースもありますが、きちんとしたリストとしての論理性を明確にするためには、こうしたタグの利用で、属性をはっきりさせたほうが良いでしょう。きちんと属性を示すことでSEO効果が高まります。

ul（順不同リスト）

<ul></ul>

ホームページ制作（ウェブサイト制作）の際に使用する<ul>タグについてのご説明です。

ホームページ制作において<ul>（アンオーダーリスト）タグは、ホームページ（ウェブサイト）のページ中に順不同のリスト・順序のないリストを設置する際に使用します。

ホームページ制作時に、ページの中でテキストを縦に並べて表示する際、段落の中の改行として設置するのではなく、きちんとしたリストであり、何かの項目が並んでいることを示す場合に使用します。

<ul> 順不同のリストの定義、順序のないリストを表示

Unordered List（アンオーダーリスト、アンオーダードリスト）。順序のないリストを表示。

<ul>タグは、ウェブページ内に、順序のない（数値などの連番を付与しない）リストを設置する際に使用します。ホームページ制作において、箇条書きのようなリストを作る時に適しています。

リストの各項目は<li>で記述します。

例

<ul>
 <li></li>
 <li></li>
</ul>

html文書中に「項目が並んだリストである」という性質を与えます。<ul>は順不同のリストであることを示します。通常はリストのマークとして黒丸がリスト項目の先頭に表示されます。

<ul>リストのタイプ

ulリストのタイプを属性の指定で行います。順序のないリストの先頭のマークを指定します。

リストマークの基本は中黒・黒丸ですが、白丸や四角などを指定することができます。

type

各項目のリストマークの種類を指定　type=””　disc（リストマーク 黒丸）、circle（リストマーク 白丸）、square（リストマーク 黒い四角）

過去の規格では、ulタグ直接type属性を指定して箇条書きのマークを変更することが可能でしたが現在の仕様では、type属性は廃止されています。

なお、リストのマークはCSSのlist-styleなどで装飾が可能です。

css list-style リストスタイル

読み方　アンオーダード　リスト

<ul>　類似タグ　（リスト）

<ul>は順不同のリストですが、順序のあるリストは、<ol>を使用します。番号を振りながらリストを設置する時には<ol>を利用します。

<ul></ul>

SEOとアクセシビリティにおけるリスト構造の重要性

Web制作の視点では、このulタグを単に「黒い点を表示するための装飾タグ」とは捉えていません。検索エンジンや支援技術に対して「ここにある情報は互いに関連しており、並列な関係にある」という情報の構造（セマンティクス）を伝えるための重要な手段として扱います。

単に改行タグ（br）や段落タグ（p）を並べて見た目だけ箇条書きにするのではなく、適切にulタグを使用することで、Googleなどの検索エンジンは情報のまとまりを正確に理解できるようになります。これは、コンテンツの評価を正しく受け、SEOの効果を最大化するために重要です。

ナビゲーションメニューの構築とCSSによる制御

現代のホームページ制作において、ulタグの最も頻繁な用途の一つは「グローバルナビゲーション」や「ハンバーガーメニュー」などのメニュー部分です。

見た目には「・（黒丸）」が表示されていなくても、ソースコード上ではulタグで構築されているケースが大半です。私たちはCSSで list-style: none; を指定して視覚的な装飾（黒丸）を消し、FlexboxやGridレイアウトを使って横並びに配置します。これにより、デザインの自由度を保ちつつ、「これはメニューリストである」という意味的な構造を維持した、堅牢なサイト構築が可能になります。

スクリーンリーダーへの配慮とユーザー体験

正しいリストタグの使用は、目の不自由な方が使用するスクリーンリーダー（音声読み上げソフト）の挙動にも大きく影響します。

ulタグでマークアップされていれば、スクリーンリーダーは「リスト、項目数 5」のように、これから読み上げる情報の数と構造をユーザーに事前に伝えてくれます。これによりユーザーは情報の全体像を把握しやすくなります。誰にでも使いやすいホームページ（ウェブアクセシビリティ）を実現することは、企業の社会的責任であると同時に、より多くのユーザーに情報を届けることで事業の機会損失を防ぐことにもつながります。

ホームページ制作・SEOの1ポイント

ホームページ制作で、「リストを示す」ことを表現する場合、<p>段落で改行しながら示されることもありますが、リストとして並んでいるもの同士が、あるまとまりの中の一つの項目であるということをきちんと示す場合には工夫が必要です。

<ul>などのタグを使うことで、検索エンジンには正確にリストであると示すことになります。こうした正規のHTMLマークアップが基本的なSEOです。

ol（番号順リスト）

<ol></ol>

ホームページ制作（ウェブサイト制作）の際に使用する<ol>タグについてのご説明です。

ホームページ制作において<ol>（オーダーリスト）タグは、ホームページ（ウェブサイト）のページに番号順リスト（順序のあるリスト）を設置する際に使用します。

リストタグは、並んだテキストをリスト化することで、該当部分が関連性のあるリストの項目同士である旨を論理的に示します。

<ol> 番号順リスト、順序のあるリストを表示

Ordered List（オーダーリスト、オーダードリスト）。番号順リスト、順序のあるリストを表示。ホームページ制作において、<ol>タグを使用することで、内側にある<li>タグ部分のテキストを番号順リストとして示すことができます。

<ol>タグのリストの各項目は<li>タグを用いて記述します。
例

<ol>
 <li></li>
 <li></li>
</ol>

html文書中に「項目が並んだリストである」という性質を与えます。<ol>は順不同のリストであることを示します。通常はリストのマークとして半角数字（1から順に昇順）がリスト項目の先頭に表示されます。start=””で開始番号を指定することができます。

順序なしリスト表示には<ul>を使用します。

type

番号順リストを表すolタグにおいては、現在でもtype属性の使用が有効として仕様に定義されています（liやulでは廃止）。これは、アラビア数字やアルファベット、ローマ数字といった番号の種類が、文書の意味合いに直接関わるためです。また、特定の数字からカウントを始めるstart属性や、カウントダウンを行うreversed属性も標準仕様としてサポートされています。さらに、olタグの内部に配置するliタグに対してvalue属性を指定することで、途中で番号を飛躍させることも可能です。これらの属性を正しく用いることで、複雑な手順や順位付けの構造を検索エンジンへ正確に伝えることができます。

番号タイプを指定

数字や大文字小文字のアルファベットなど、リストの順序の番号形式を指定します。

type=””

• 1
• a
• A
• i
• I

start

開始番号を指定

start=””

無指定の場合は数字ならば「1」、アルファベットなら「a」など。

なお、リストのマークはCSSのlist-styleなどでも装飾が可能です。

css list-style リストスタイル

読み方　オーダードリスト

olタグの構造化がもたらす検索エンジンの理解度向上とリッチリザルト対策

ホームページ（ウェブサイト）制作において、タグは手順やランキング、ステップ表示など、前後の文脈に明確な順序が存在するコンテンツを定義するための重要な要素です。より専門的には、単に数字を自動で表示させるための装飾的な役割にとどまらず、コンテンツの論理的な構造を検索エンジンに正しく伝えるためのセマンティックな意味を持っています。適切な構造化は、事業ホームページ（ウェブサイト）のSEO効果を高めるために非常に重要です。

強調スニペットの獲得とユーザーの視認性向上

Googleなどの検索エンジンは、ユーザーが「～の手順」や「～の方法」といった疑問を持って検索した際、ページ内のマークアップを解析し、検索結果の最上部に「強調スニペット」としてリスト形式でそのまま表示させることがあります。検索結果画面で大きな占有面積を持つ強調スニペットに選ばれることは、ホームページ（ウェブサイト）への流入数を爆発的に増加させ、事業の認知やWebマーケティングの成果へダイレクトに貢献します。

段落（タグ）の中にプレーンテキストで「1. 〇〇、2. 〇〇」と手動で数字を打ち込むだけでは、検索エンジンはそれが「順序のあるリスト」であると正確に判定しづらくなります。正しいマークアップを徹底し、ユーザーにとってもスキャン（流し読み）しやすい視覚的なメリハリを作ることで、情報の理解度が深まり、サイト全体のユーザビリティ向上にもつながっていきます。

HTML5におけるreversed属性やtype属性の適切な制御

<ol>タグには、HTML5から新しく reversed 属性が追加されました。これを使用することで、リストの番号を「3、2、1」といった形で降順（カウントダウン形式）に反転させることができます。

従来の仕様ではJavaScriptを使用するか、手動で番号を書き換える必要がありましたが、HTMLの属性としてネイティブに記述できるようになったため、ソースコードをクリーンに保ちながら描写負荷を下げることが可能になりました。

また、type 属性によるアルファベットやローマ数字への切り替え、start 属性による開始番号の任意指定など、プロパティを組み合わせることで、多様なレイアウトに合わせた柔軟なカスタマイズが行えます。こうした仕様変更に対応した正確なコーディングを行うことが、ホームページ（ウェブサイト）の品質を維持し、将来的な事業のオウンドメディア拡張やCMSテーマの改修時にも崩れない、強固なWeb基盤を構築することにかかわっていきます。

<ol>　類似タグ

<ol>は、番号がリスト先頭に付与される順序のあるリストですが、順不同のリストの場合は、<ul>を使用します。

<ol></ol>

ホームページ制作・SEOの1ポイント

<ol>や<ul>の中にリスト化された項目同士は、それぞれが「各項目」であるものの、各々がその上位概念の具体的な概念として関連性があると考えることができます。しっかりとリスト項目の構造を設定することでSEO効果が期待できます。通常の段落やプレーンテキストとしての文章が掲載されているよりも、リストタグなどを合わせて使用することで、その分だけSEO対策としてHTMLマークアップで独自性を示すことにもなります。

リストの中の子リスト（入れ子構造）の適切な構築

ホームページ（ウェブサイト）で事業のサービス内容や特徴を説明する際、大項目の下に中項目や小項目を紐づけて、情報をより詳細に分類したい場面が頻繁に発生します。このような複雑な情報を整理するために有効なのが、リストタグの中にさらにリストタグを配置する「入れ子（ネスト）」構造です。

ulやolの直下にはliタグしか配置できない仕様

ホームページ（ウェブサイト）制作の現場で頻発する誤りとして、ulタグやolタグの直下に、divタグや見出しタグ、あるいは別のulタグを直接配置してしまうケースがあります。HTMLの仕様上、ulタグおよびolタグの直下として配置できるのは、liタグ、あるいはスクリプト関連のタグのみです。リストの中に別のリストを作成する場合は、必ずliタグの内側に新しいulタグやolタグを記述しなければなりません。この厳密なルールを守ることで、構造的に正しいHTMLが保たれます。

正しいマークアップによる階層の作成

リストを入れ子にする際、HTMLの構造上で間違いやすいポイントがあります。それは、子リストとなる「ul」や「ol」タグを配置する位置です。

子リストは、親となる「ul」や「ol」の直下に直接配置するのではなく、必ず親リストの「li」タグの内部に記述する必要があります。

親の項目（li）の中に、その項目をさらに細分化するリスト（ulまたはol）を含めることで、初めて正しい階層構造として成立します。このルールを守らないと、HTMLの文法エラーとなり、ブラウザの表示崩れや検索エンジンのクローラーによる情報の誤認識を招く恐れがあります。

複雑な情報を整理し理解を促進する効果

より専門的には、この入れ子構造を適切に活用することは、情報アーキテクチャ（情報設計）の観点から非常に有益です。事業の料金プランや、製品の詳細な仕様を説明する際、フラットな箇条書きで羅列してしまうと、ユーザーはどれが主要な項目で、どれが補足情報なのかを直感的に判断できません。

大項目を「ol」で番号順に示し、その中の具体的な留意点を「ul」で補足するといった形でタグを組み合わせることで、ユーザーの視線を適切に誘導できます。また、検索エンジンに対しても、情報の親子の関連性を明確に伝えることができるため、ページ全体の構造が整理された質の高いコンテンツとして評価されやすくなります。

強調スニペットの獲得に向けたマークアップ

検索エンジンは、ユーザーの検索意図に対して直接的な回答を提示する強調スニペットを検索結果の最上部に表示することがあります。事業のサービスページやコラム記事において、手順を解説する箇所をolタグで、商品の特徴や要点をまとめる箇所をulタグで正しくマークアップしておくことで、検索エンジンが情報を抽出しやすくなります。単なる装飾としてではなく、意味を持った構造としてリストタグを活用していくことが、質の高いコンテンツとして評価されるための土台を作ります。

CSSによるリストデザインの工夫

HTMLの「li」「ul」「ol」タグは、デフォルトの状態では黒丸や数字が項目の先頭に表示されます。しかし、事業用のホームページ（ウェブサイト）において、サイト全体のデザインテイストやブランドイメージに合わせて、このリストの装飾をカスタマイズすることは、ユーザー体験を向上させる上で重要な施策です。

標準スタイルのリセットと余白の調整

リストのデザインを独自に作り込むための第一歩は、ブラウザが標準で適用しているスタイルをリセットすることです。CSSで「list-style-type: none;」を指定することで、先頭の黒丸や数字を非表示にできます。さらに、「ul」や「ol」にはデフォルトで左側に余白（padding-left）が設定されているため、これもデザインに合わせて数値を調整します。これにより、プレーンな状態のリストブロックを作成し、そこから柔軟にデザインを構築していく基盤が整います。

擬似要素（::before）を活用した高度な装飾

より専門的には、CSSの擬似要素である「::before」を活用することで、リストのマーカーデザインを飛躍的に向上させることができます。「li」タグに対して「::before」を設定し、contentプロパティに独自の文字や記号を挿入することで、チェックマークや矢印など、事業のコンセプトに合致したアイコンを自由に配置できます。画像を使わずにCSSだけで描画するため、ページの読み込み速度を落とすことなく、スマートフォンや高解像度のディスプレイでも美しく鮮明に表示されます。

カウンター機能を用いた独自の番号付きリスト

「ol」タグの番号も、CSSの「counter-reset」および「counter-increment」プロパティを組み合わせることで、自由にデザインをカスタマイズできます。例えば「STEP 1」「01.」といった独自のフォーマットで番号を自動連番で生成し、その番号の背景色やフォントサイズを個別に装飾することが可能です。手順や順位を視覚的に際立たせることで、ユーザーの関心を引きつけ、最後までコンテンツを読み進めてもらうための魅力的なインターフェースを実現できます。

dir（ディレクトリ）（廃止）

<dir></dir>

ホームページ制作（ウェブサイト制作）の際に使用する<dir>タグについてのご説明です。

ホームページ制作における<dir>（ディレクトリ）タグは、html4.01非推奨要素で、html5で廃止されましたが、ホームページ（ウェブサイト）のページ内でリストを表示するためのタグです。

<dir> リストを表示

Directory（ディレクトリ）。リストを表示。一般的なディレクトリではなく、文書中のリストとして使用します。

<dir>タグは、リストを表示するためのタグで、<dir>で囲まれた部分がリストであることを示します。

一般的にリスト表示は<ul>を使用します。

<dir> 代替タグ

一般的にリスト表示には以下のhtmlタグを使用します。

<ul>

<dir>は、html4.01非推奨要素。html5で廃止。

<dir></dir>

ホームページ制作・SEOの1ポイント

dirタグなど旧バージョンで使用できたタグも新バージョンでは使用できないこともあります。そのほとんどは、要素の意味が重複しているものが一本化されたり、装飾に関することであるためCSSへと振り分けられたといったケースのものです。テンプレートの利用で、かつ、要素を別のソース例から転載して使用する場合は、こうしたバージョン違いが生じることがあります。

ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法