HTML

<li> リスト

詳細を開く 詳細を閉じる
<ol>
リスト(番号あり)
<ul>
リスト(番号なし)
<li>
リストの各項目

番号ありのリスト : <ol>

  • <ol>は、番号ありのリストを表します。
  • 属性を変更することで、番号の形式を変更したり(type属性)、開始番号を変える(start属性)こともできます。

別ウィンドウで表示

<ol>
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
	<li>ddddd</li>
</ol>

番号の形式を指定 : type


別ウィンドウで表示

<ol>
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
</ol>

<ol type="a">
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
</ol>

<ol type="A">
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
</ol>

<ol type="i">
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
</ol>

<ol type="I">
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
</ol>

開始番号を指定 : start


別ウィンドウで表示

<ol start="8">
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
	<li>ddddd</li>
	<li>eeeee</li>
</ol>

番号なしのリスト : <ul>

<ul>は、番号なしのリストを表します。


別ウィンドウで表示

<ul>
	<li>aaaaa</li>
	<li>bbbbb</li>
	<li>ccccc</li>
	<li>ddddd</li>
</ul>

入れ子構造のリスト

  • 複数のリストを入れ子にすることもできます。
  • その場合、子のリストを持つ項目の開始タグ(<li>)と終了タグ(</li>)の間に、子のリストを書くことに注意しましょう。 (つまり、子のリストを入れる場合、<li>タグを閉じない。)

別ウィンドウで表示

<ul>
	<li>aaaaa</li>
	<li>bbbbb
		<ol>
			<li>b1</li>
			<li>b2</li>
			<li>b3</li>
			<li>b4</li>
		</ol>
	</li>
	<li>ccccc</li>
	<li>ddddd</li>
</ul>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ