順序つきリスト「ol要素」とリスト項目「li要素」

　よく、「１．～～～」「２・～～～」「３．～～～」となっている箇条書きをよく見ませんか？
HTMLでこのような箇条書きをするためには、順序つきリスト「ol要素」を使って表します。
<ol>と</ol>で囲んだ範囲が順序つきリストになります。

　また、そのリストの項目は、「li要素」を使って表します。
<li>と</li>で囲んだ範囲がリストの項目になります。

　この「ol要素」を使う上での注意点として、「ol要素」の直下には「li要素」しか入れることができません。
「li要素」を使わずに、直接文字を記述したり、「b要素」などを使ったりすることはできないのです。

　ちなみに、「ol要素」の「ol」はordered listの略で整理されたリストいう意味です。
「li要素」の「li」はlist itemの略で、リスト項目やリスト条項といった意味があります。

順番の始まりを変える「start属性」

　「ol要素」は通常１から始まりますが、その始まりの番号を変えることができます。
始まりの番号を変えるには、「start属性」を使います。
「start属性」に"10"を指定すれば10から始まりますし、"-1"を指定すれば-1から始まります。

　「ol要素」の「start属性」に「5」を指定した場合、以下のようになります。

順番の形式を変える「type属性」

　「ol要素」は、順序の形式を変えることができます。順序の形式を変えるには「type属性」を使います。
例えば、「type属性」に'A'を指定するとアルファベット大文字で、'a'を指定するとアルファベット小文字になります。
また、'I'を指定すると大文字のローマ数字になり、'i'を指定すると小文字のローマ数字になります。
なお、'1'を指定した場合、「type属性」を指定しなかった時と同じように、1から始まる順序つきリストになります

　「ol要素」の「type属性」に「A」を指定した場合、以下のようになります。

順序なしリスト「ul要素」

　箇条書きといえば、数字などの順序がある箇条書きだけではなく、「・」を使った順序のない箇条書きもあります。
HTMLで「・」を使った箇条書きをするためには、順序なしリスト「ul要素」を使って表します。
<ul>と</ul>で囲んだ範囲が順序なしリストということになります。

　使い方は「ol要素」と同じで、リスト項目を「li要素」で表します。
また、「ul要素」の直下には「li要素」しか入れることができないというのも、「ol要素」と同じです。

　ちなみに、「ul要素」の「ul」はunordered listの略で整理されていないリストいう意味です。

「ol要素」「ul要素」の中にさらに「ol要素」「ul要素」を入れる

　ここまで説明してきました、「ol要素」「ul要素」は、「li要素」の中に入れることができます。
つまり、「ol要素」の中にある「li要素」の中に、さらに「ol要素」「ul要素」を入れることができるということです。
これは、「ul要素」でも同じで、「li要素」の中に「ol要素」「ul要素」を入れることができます。
このようにすることで、「ol要素」「ul要素」「li要素」で、階層構造を表したりすることができるようになります。

サンプル

　今回説明した、「ol要素」「ul要素」「li要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。

サンプルソースコード

<p>
	太陽系の主要天体
</p>
<ol start = "0">
	<li><strong>太陽</strong></li>
	<li>水星</li>
	<li>金星</li>
	<li>地球
		<ol type = 'I'>
			<li>月</li>
		</ol>
	</li>
	<li>火星
		<ol type = 'I'>
			<li>フォボス</li>
			<li>ダイモス</li>
		</ol>
	</li>
	<li>木星
		<ol type = 'I'>
			<li>イオ</li>
			<li>エウロパ</li>
			<li>ガニメデ</li>
			<li>カリスト</li>
		</ol>
	</li>
	<li>土星
		<ol type = 'I'>
			<li>タイタン</li>
		</ol>
	</li>
	<li>天王星</li>
	<li>海王星</li>
</ol>
<p>
	生物の分類
</p>
<ul>
	<li>動物
		<ul>
			<li>脊椎動物
				<ul>
					<li>魚類</li>
					<li>両生類</li>
					<li>爬虫類</li>
					<li>鳥類</li>
					<li>哺乳類
						<ul>
							<li>食肉目</li>
							<li>げっ歯目</li>
							<li>霊長目
								<ul>
									<li>メガネザル科</li>
									<li>オナガザル科</li>
									<li>ヒト科
										<ul>
											<li>ゴリラ</li>
											<li>オランウータン</li>
											<li>チンパンジー</li>
											<li>ヒト
												<ul>
													<li>ホモサピエンス</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</li>
			<li>無脊椎動物</li>
			</ul>
		</ul>
	</li>
	<li>植物</li>
</ul>

表示結果