【リスト】ol要素・ul要素・li要素

リストの種類

リストには番号ありのリストと、番号なしのリストがあります。

番号ありのリスト

ol要素は番号ありのリスト(ordered list)を表します。

要素内容にリスト項目を入れて使用します。

<ol>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ol>

ol要素はブラウザではこのように項目の左側に番号がついて表示されます。

CSSを使用すれば番号の種類を変更することもできます。

番号なしのリスト

ul要素は番号なしのリスト(unordered list)をあらわします。

要素内容にリスト項目を入れて使用します。

<ul>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
</ul>

ul要素はブラウザではこのように項目の左側に●マークがついて表示されます。

CSSを使用すればマークの種類を変更することもできます。

リストの各項目

li要素はリストの各項目をあらわします。li は list item の略です。

ol要素、またはul要素の子要素として使います。

親要素・子要素

HTMLでは親要素・子要素という表現をすることがあります。

簡単に言えば、ある要素を囲んでいる要素が親要素、囲まれている要素が子要素です。

<ol>
	<li>項目1</li>
</ol>

上記のような構造の場合、ol要素はli要素を囲んでいるのでli要素の親要素となります。

li要素はol要素に囲まれているのでol要素の子要素となります。

リストのまとめ

最初は「ol要素とul要素、どっちが番号ありでどっちが番号なしだっけ？」と迷うことがありましたが、それぞれの要素が何の略か考えるとわかりやすいです。

ol要素はordered(順序付けされた)なリストなので番号あり、ul要素はunordered(順不同)なリストなので番号なし、と考えると私の場合は覚えやすかったです。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。