In HTML, the <li> (list item) element is used as a child of <ul> (unordered list) or <ol> (ordered list) to represent individual items in bullet-point or numbered lists.
<li>要素とは？<li>要素は、HTMLで「リスト(一覧)」を表す際に使用する要素です。通常は以下のような要素の子要素として利用され、リストの各項目（リストアイテム）を定義します。
<ul><ol><menu>例えば、箇条書きリスト（<ul>）で3つの項目を表示するときは、下記のように書きます。
HTML
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>上記の例では、<ul>（unordered list）内に3つの<li>が存在しています。ブラウザはこれを「黒い丸印（●）」付きの箇条書きリストとして表示するのが一般的です。
<ul>）順序のないリスト（unordered list）は、項目の順番や並びに特段意味を持たせたくない場合に用いられます。たとえば箇条書きのように一覧を簡単に示す際に利用します。実装例は次のとおりです。
HTML
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>ブラウザのデフォルトでは、各<li>の先頭に**黒い丸印（ディスク）**が表示されます。CSSでマーカーの種類をカスタマイズできます。
<ol>）順序のあるリスト（ordered list）は、番号付き（またはアルファベットやローマ数字など）で順序に意味を持たせたいときに使われます。実装例は次のとおりです。
HTML
<ol>
<li>ステップ1</li>
<li>ステップ2</li>
<li>ステップ3</li>
</ol>標準では、1から始まる連番が各項目の前に表示されます。こちらもCSSによって番号のスタイルを変更できます。
<li>要素は、さらにその中に別のリストをネスト（入れ子）させることもできます。例えば以下の例では、<li>の中に別の<ul>を置くことで階層的なリストを表現しています。
HTML
<ul>
<li>フルーツ
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜
<ul>
<li>トマト</li>
<li>ニンジン</li>
</ul>
</li>
</ul>このようにネストしたリストは階層構造をわかりやすく表示するときに便利です。デフォルトでも、入れ子になった階層ごとにマーカーが変わったり、インデントが付いたりしますが、CSSを用いてより見やすいデザインにカスタマイズすることもよくあります。
<li>要素のHTML仕様と注意点<li>要素は基本的に**<ul>**, <ol>, または <menu> の子要素として利用されます。HTML5の文法上では、ほかの要素の中で使うことは推奨されていません。特に、見た目のレイアウトを調整したいからといって無理やり<li>を使うのは避けましょう。表現のために用いるのであれば、他のブロック要素（<div>や<section>など）を利用するのが適切です。
リスト要素（<ul>, <ol>, <menu>）において、<li>は「フローコンテンツ」を含むことができます。つまり、<li>内にテキストだけではなく、段落（<p>）、画像（<img>）、リンク（<a>）など、フローコンテンツに該当する要素を含めることができます。ただし、仕様をよく理解して過度な入れ子構造を作らないように気をつけましょう。
<menu>要素での利用<menu>要素はHTML5で定義され、メニューやコマンドのリストを表すために使われる要素ですが、実際のブラウザでのサポート状況や表示が定まっていない部分があります。<menu>の子要素として<li>が使われることもできますが、主に実務では<ul>と<ol>が中心的に使われる点に留意してください。
<li>を使っていない場合、スクリーンリーダーなどではリストと認識されない可能性があります。
検索エンジンもHTMLの構造を分析する際、リストを情報の階層や区分として認識する場合があります。特に箇条書きや番号付きリストとしての意味を持つ情報は、検索エンジンのクローラーが見出しやリストを文書構造として把握し、SERP（検索結果画面）でのリッチスニペット表示の候補になることがあります。
list-styleプロパティCSSでは、リストの表示形式を指定するためにlist-style関連のプロパティを使います。以下が主なプロパティの例です。
list-style-typedisc, circle, square, decimal, upper-alpha, lower-romanなど）list-style-positionoutside／inside）list-style-image例として、番号付きリストをローマ数字に変更したい場合は以下のように書きます。
HTML
<ol class="roman-list">
<li>例1</li>
<li>例2</li>
<li>例3</li>
</ol>CSS
.roman-list {
list-style-type: lower-roman; /* i, ii, iii, ... という形で表示 */
}画像をリストのマーカーとして使いたい場合は、list-style-imageプロパティを利用します。
例えばハートの画像をマーカーにする場合:
CSS
.custom-heart {
list-style-image: url('heart.png');
}HTML
<ul class="custom-heart">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>ただし、画像マーカーは位置が合わなかったり、レスポンシブでデザインが崩れたりする場合もあるため、テストを十分に行う必要があります。
::marker疑似要素CSS3以降では、リストマーカーを対象とする::marker疑似要素が利用できます。ブラウザのサポート状況には注意が必要ですが、柔軟なスタイリングが可能になります。例えば、マーカーの色やフォントサイズなどを指定することができます。
CSS
ul.custom-marker::marker {
color: red;
font-size: 1.2em;
}HTML
<ul class="custom-marker">
<li>赤色マーカーの例</li>
<li>大きめマーカーの例</li>
</ul>CSSのカウンター機能を使うと、複雑な番号付け（例えば「第1章 第1節 第1項」のような多段階番号付け）を実装できます。以下は簡単な例です。
CSS
ol.custom-counter {
counter-reset: section; /* カウンターの初期化 */
}
ol.custom-counter > li {
counter-increment: section; /* 各liが増えるたびにカウンターをインクリメント */
margin-bottom: 1em;
}
ol.custom-counter > li::before {
content: "セクション" counter(section) "： ";
font-weight: bold;
}HTML
<ol class="custom-counter">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>上記の例では、各リストアイテムの前に「セクション1：」「セクション2：」のように動的に番号が付与されます。さらにネストしたリストでも別のカウンターを設定し、階層構造を明示的に示すことが可能です。
<li>は通常ブロックレベルで表示されますが、CSSでdisplay: inlineやdisplay: inline-blockなどを指定することで、水平に並べたメニューバーやナビゲーションを作成できます。
HTML
<ul class="nav">
<li><a href="#">ホーム</a></li>
<li><a href="#">商品一覧</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>CSS
.nav {
list-style: none; /* デフォルトのマーカーを非表示にする */
margin: 0;
padding: 0;
}
.nav li {
display: inline-block; /* 横並びに */
margin-right: 1em;
}こうした水平のリストは、ヘッダーなどに配置してグローバルナビゲーションを作る場合に非常に一般的なパターンです。
list-style: none;やlist-style-type: none;が指定されている場合、デフォルトのマーカーは表示されません。意図していないならCSSを修正する必要があります。overflowやdisplayが変更されている可能性もあるため、スタイリングを確認しましょう。marginやpaddingをリセットした上で独自スタイルを当てることが重要です。CSSリセットやノーマライズ（Normalize.cssなど）を利用するとよいでしょう。<h2>, <h3>など）でセクションを区切る、あるいはテーブルや別ページに分割するなど、情報構造を再検討することが望ましいです。可読性やアクセシビリティの面からも、深いネストは可能な限り避けましょう。<li>要素はリスト（<ul>, <ol>, <menu>）内で使われ、箇条書きや番号付きリストを構成する重要な要素です。情報を整理し、読み手に分かりやすく内容を伝えるのに役立ちます。リストを活用すれば、単純な箇条書きから段階的な手順の説明、階層的な情報整理、さらにはナビゲーションメニューなど、多岐にわたる表現が可能です。<li>の正しい使い方とカスタマイズをしっかりと理解し、目的に応じた最適な表現を行えるようにしておきましょう。