ywork2020.com

Title

箇条書きリストや番号付きリストを表示できる

ul要素、ol要素、li要素の概要

ul とは「アンオーダーリスト」の略号であり、順序なしのリストを表します。

また、ol は「オーダーリスト」の略号で番号付きのリストを表します。

そして、li は「リスト」の略号であり、 li要素の親要素としてul要素とol要素を使用することになります。 li要素はリストの内容を表す要素で、リストに表示されるテキストを内包することになります。

番号無しリストの実機サンプルとサンプルコード

  • リスト内容1
  • リスト内容2
  • リスト内容3
<body>
	<ul>
		<li>リスト内容1</li>
		<li>リスト内容2</li>
		<li>リスト内容3</li>
	</ul>
</body>	

番号無しリストの場合は<ul>要素に内包された<li>要素を使用します。
<ul>で番号無しリストを宣言し、<li>でリストの内容を書きます。

番号付きリストの実機サンプルとサンプルコード

  1. リスト内容1
  2. リスト内容2
  3. リスト内容3
<body>
	<ol>
		<li>リスト内容1</li>
		<li>リスト内容2</li>
		<li>リスト内容3</li>
	</ol>
</body>	

番号付きリストを使用したい場合は<ol>要素に内包された<li>要素を使用します。
<ol>で番号付きリストを宣言し、<li>でリストの内容を書きます。

番号付きリストの番号をローマ数字表示する実機サンプルとサンプルコード

  1. リスト内容1
  2. リスト内容2
  3. リスト内容3
<body>
	<ol type="i">
		<li>リスト内容1</li>
		<li>リスト内容2</li>
		<li>リスト内容3</li>
	</ol>
</body>	

項目にローマ数字で番号を付けたい場合には、ol要素のtype属性を使用します。
値には i の文字を指定します。

項目の開始番号を指定した実機サンプルとサンプルコード

  1. リスト内容1
  2. リスト内容2
  3. リスト内容3
<body>
	<ol start="5">
		<li>リスト内容1</li>
		<li>リスト内容2</li>
		<li>リスト内容3</li>
	</ol>
</body>	

リストの項目番号を任意の開始番号から表示したい場合には、ol要素のstart属性を使用します。

入れ子形式のリストを使用した実機サンプルとサンプルコード

  1. 主リスト1
  2. 主リスト2
    1. 入れ子リスト2の1
    2. 入れ子リスト2の2
    3. 入れ子リスト2の3
  3. 主リスト
<body>
	<ol>
		<li>主リスト1</li>
		<li>主リスト2	<!--#1--ここで</li>要素を使用しないで-->
			<ol>
				<li>入れ子リスト2の1</li>
				<li>入れ子リスト2の2</li>
				<li>入れ子リスト2の3</li>
			</ol>
		</li>	<!--ここで</li>要素使用します-->
		<li>主リスト2</li>
	</ol>
</body>	

入れ子形式のリストを作成したい場合はサンプルコード中の、 <!--#1--> の部分に終了要素の</li>は無いことに着目して下さい。

箇条書きリストでテキストを改行した実機サンプルとサンプルコード

  • YWORKで
    プログラミングを
    一緒に学ぼう!
  • 基本だけで
    ウエブページを
    作ることができるよ!
<body>
	<ul>
		<li>YWORKで<br>プログラミングを<br>一緒に学ぼう!</li>
		<li>基本だけで<br>ウエブページを<br>作ることができるよ!</li>
	</ul>
</body>

箇条書きリストの中で改行したい場合は<br>要素を使用しますが、使いすぎには注意が必要だと思われます。

li要素に使用できる属性