<ul> <ol> <li> リスト(箇条書き)

番号なしの箇条書きを作る、ul要素 & li要素

師匠

下のコードと、出力結果を見てみ。

<ul>
	<li>魚類</li>
	<li>両生類</li>
	<li>爬虫類</li>
</ul>
  • 魚類
  • 両生類
  • 爬虫類
師匠

境界線を無くすと、こうなる。

  • 魚類
  • 両生類
  • 爬虫類
弟子

箇条書きになってます。

師匠

細かくみるで。

師匠

まず、箇条書きを作る枠を作る。
それには、<ul>要素を使う。

<ul>

</ul>
師匠

<ul>要素の中に、項目を作っていく。
一つ一つの項目は、<li>要素で作る。

<ul>
	<li>魚類</li>
</ul>
  • 魚類
<ul>
	<li>魚類</li>
	<li>両生類</li>
</ul>
  • 魚類
  • 両生類
<ul>
	<li>魚類</li>
	<li>両生類</li>
	<li>爬虫類</li>
</ul>
  • 魚類
  • 両生類
  • 爬虫類
師匠

簡単やな。

番号ありの箇条書きを作る、ol要素 & li要素

師匠

次。
<ul>要素を、<ol>要素に換えてみる。

<ol>
	<li>魚類</li>
	<li>両生類</li>
	<li>爬虫類</li>
</ol>
  1. 魚類
  2. 両生類
  3. 爬虫類
師匠

境界線を無くすと、こうなる。

  1. 魚類
  2. 両生類
  3. 爬虫類
弟子

おっ、番号が付いた。

師匠

そうや。
<ol>は、番号付きのリストordered list)、
<ul>は、番号無しのリストunordered list)や。

師匠

ちなみに、
<li>は、list item の略やで。

<li> は、<ul> or <ol> の中でしか使えない

師匠

下のコードは、間違いや。

<li>魚類</li>
<li>両生類</li>
<li>爬虫類</li>
師匠

<li>は、 <ul><ol>の中に入れる。

師匠

逆に、<ul><ol>の中は、<li>以外に来ない。
下のコードも間違いや。

<ul>
	<h3>魚類</h3>
	<p>カメは、魚類ではない。</p>
	<p>※ このHTMLコードの書き方は、間違い</p>
</ul>
師匠

つまり、<ol><ul>の間には、直接的な親子関係が、必ず成り立つんや。
祖父母と孫みたいに、間に何かが入る 間接的な関係間違い 、って言っとる。

弟子

質問なんですが、<li>の数に、上限は ありますか?

師匠

ない。
<ul><ol> は、百人でも、二百人でも子供が持てる。
教育費は百人分かかるけどな。( 冗談やで。 ワイの話を信じるな。 )

<li> の中には、いろんなものを入れても良い

師匠

なお、<li>要素の中に、<a> とか <strong> とか <img>を入れてもええで。

<ol>
	<li>クリックしてみ → <a href="sample.html">ここ</a> ※ファイルは無いけど</li>
	<li>下は、<strong>モン・サン=ミシェル</strong>や!</li>
	<li><img src="small.jpg"> ← 小さいけど。</li>
</ol>
  1. クリックしてみ → ここ ※ファイルは無いけど
  2. 下は、モン・サン=ミシェルや!
  3. ← 小さいけど。
  1. クリックしてみ → ここ ※ファイルは無いけど
  2. 下は、モン・サン=ミシェルや!
  3. ← 小さいけど。
師匠

この場合も、<ol><li> の親子関係を維持しているな。

</li> は省略できるが、省略しないこと

師匠

下みたいに、</li>を省略しても、間違いやない。
文法上は。

<ul>
	<li>魚類
	<li>両生類
	<li>爬虫類
</ul>
  • 魚類
  • 両生類
  • 爬虫類
<ol>
	<li>魚類
	<li>両生類
	<li>爬虫類
</ol>
  1. 魚類
  2. 両生類
  3. 爬虫類
師匠

でもな、初心者は省略するな。
ワイでも、省略はしない。

師匠

別のところで、入れ子のリスト(箇条書き)を説明しようと思てるけど、
そういう複雑になったときに 混乱するから、常に</li>は書いておけ。

復習

  • <ol> : 番号ありのリスト
  • <ul> : 番号なしのリスト
  • <li> : リストの項目
  • <ol><li>、または <ul><li>の間に、直接的な親子関係がある。
  • </li>は省略しない。