HTML入門⑨リストを作る

リストはこんな感じ

おいしい食べ物

フルーツポンチの作り方

リストは<ul><ol><li>というタグを使って記述します。コードは次のとおりです。

・番号なしリスト

<body>

<p>おいしい食べ物</p>
<ul>
	<li>いちご</li>
	<li>りんご</li>
	<li>ぶどう</li>
	<li>みかん</li>
	<li>もも</li>
</ul>

</body>

<body>

<p>おいしい食べ物</p>

<ul>

</ul>

</body>

・番号ありリスト

<body>

<p>フルーツポンチの作り方</p>
<ol>
	<li>フルーツを用意します。</li>
	<li>フルーツを一口サイズにカットします。</li>
	<li>サイダーをたっぷりとかけます</li>
	<li>完成</li>
</ol>

</body>

<body>

<p>フルーツポンチの作り方</p>

<ol>

<li>フルーツを用意します。</li>

<li>フルーツを一口サイズにカットします。</li>

<li>サイダーをたっぷりとかけます</li>

</ol>

</body>

それぞれ、ブラウザで見てみると以下のようにリスト表示されます。

<li></li>タグで囲ったものがリストのデータになります。

それをさらに<ul></ul>タグ、<ol></ol>タグで囲むとリストの完成です。

<ul>タグで囲むと番号なし、<ol>タグで囲むと番号ありのリストになります。