HTML&CSS

【HTML】リストタグ<li>

リストタグ<li>

リストの項目を表示するために用いる要素は<li>タグです。

「li」は「list item」の略で、箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで、リストを作ることができます。

 html
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>

<li>要素は、囲む要素によって種類が変わるという特徴があり、<ul>要素で囲むと黒点が先頭につき、<ol>要素で囲むと数字が連番でつきます。

 html
<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul> 

上記のように要素を要素で囲むことを「入れ子」と言い、囲む方の要素を「親要素」、囲まれる要素を「子要素」と呼びます。

リストタグ<li>の使い方

リストタグは要素を要素で囲む「入れ子」構造になりますので、入れ子構造が複雑になっても親子関係がわかりやすくするため、インデント(字下げ)をします。

行の先頭で「tab」キーを押すと簡単にインデントをすることができます。

黒点でリストを箇条書きにする<ul>

 html
<ul>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ul> 

連番でリストを箇条書きにする<ol>

 html
<ol>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
	<li>テキスト</li>
</ol> 







-HTML&CSS

© 2021 Issy9174 official web site