1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: <li>
slug: Web/HTML/Element/li
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/li
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><li></code> 要素</strong>は、リストの項目を表すために用いられます。</span>この要素は、その項目が属する順序付きリスト ({{HTMLElement("ol")}})、順序なしリスト ({{HTMLElement("ul")}})、メニュー ({{HTMLElement("menu")}}) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字伴って表示され、順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th>
<td>なし</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>直後に別の {{HTMLElement("li")}} 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td>{{HTMLElement("ul")}}、{{HTMLElement("ol")}}、{{HTMLElement("menu")}}。すでに廃止されているが、{{HTMLElement("dir")}} の子要素としても配置可能であった。</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></code> when child of an <code><a href="/ja/docs/Web/HTML/Element/ol">ol</a></code>, <code><a href="/ja/docs/Web/HTML/Element/ul">ul</a></code> or <code><a href="/ja/docs/Web/HTML/Element/menu">menu</a></code></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLLIElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>これは整数値の属性で、 {{HTMLElement("ol")}} 要素で定義されたリスト項目の序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリスト項目は、その番号から続いて採番されます。順序なしリスト ({{HTMLElement("ul")}}) やメニュー ({{HTMLElement("menu")}}) では <strong>value</strong> 属性は意味がありません。
<div class="note"><strong>注</strong>: この属性は HTML4 で非推奨とされましたが、 HTML5 で再導入されました。</div>
</dd>
<dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
<dd>文字の属性で、表示するリストマーカーの種類を指定します。
<ul>
<li><code>a</code>: 小文字</li>
<li><code>A</code>: 大文字</li>
<li><code>i</code>: 小文字のローマ数字</li>
<li><code>I</code>: 大文字のローマ数字</li>
<li><code>1</code>: 数字</li>
</ul>
もし親の {{HTMLElement("ol")}} 要素で使用されていた場合は、それよりも優先されます。
<div class="note"><strong>注意:</strong> この属性は非推奨になっています。代わりにCSS の {{cssxref("list-style-type")}} プロパティを使用してください。</div>
</dd>
</dl>
<h2 id="Examples" name="Examples">例</h2>
<p>もっと詳細な例は、 {{htmlelement("ol")}} と {{htmlelement("ul")}} のページを参照してください。</p>
<h3 id="Ordered_list" name="Ordered_list">番号付きリスト</h3>
<pre class="brush: html notranslate"><ol>
<li>最初のリスト項目</li>
<li>二番目のリスト項目</li>
<li>三番目のリスト項目</li>
</ol>
</pre>
<p>{{EmbedLiveSample("Ordered_list")}}</p>
<h3 id="Ordered_list_with_a_custom_value" name="Ordered_list_with_a_custom_value">カスタム値の付いた番号付きリスト</h3>
<pre class="brush: html notranslate"><ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
</pre>
<p>{{EmbedLiveSample("Ordered_list_with_a_custom_value")}}</p>
<h3 id="Unordered_list" name="Unordered_list">順序なしリスト</h3>
<pre class="brush: html notranslate"><ul>
<li>最初のリスト項目</li>
<li>二番目のリスト項目</li>
<li>三番目のリスト項目</li>
</ul></pre>
<p>{{EmbedLiveSample("Unordered_list")}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td><code>type</code> 属性を非推奨にした。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.li")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>他のリスト関連 HTML 要素: {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} および廃止された {{HTMLElement("dir")}}</li>
<li><code><li></code> の整形に便利な CSS プロパティ:
<ul>
<li>箇条書き記号の表示を選択するための {{cssxref("list-style")}}</li>
<li>複雑な入れ子状リストを処理するのに使用できる <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS counters</a></li>
<li>リスト項目のインデントの調整に用いることができる {{cssxref("margin")}}</li>
</ul>
</li>
</ul>
|
