HTML入門⑨リストを作る

HTMLHTML入門

リストはこんな感じ

おいしい食べ物

  • いちご
  • りんご
  • ぶどう
  • みかん
  • もも

フルーツポンチの作り方

  1. フルーツを用意します。
  2. フルーツを一口サイズにカットします。
  3. サイダーをたっぷりとかけます。
  4. 完成

 

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

・番号なしリスト

index.html
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<body>
 
<p>おいしい食べ物</p>
<ul>
<li>いちご</li>
<li>りんご</li>
<li>ぶどう</li>
<li>みかん</li>
<li>もも</li>
</ul>
 
</body>

 

・番号ありリスト

index.html
XHTML
1
2
3
4
5
6
7
8
9
10
11
<body>
 
<p>フルーツポンチの作り方</p>
<ol>
<li>フルーツを用意します。</li>
<li>フルーツを一口サイズにカットします。</li>
<li>サイダーをたっぷりとかけます</li>
<li>完成</li>
</ol>
 
</body>

 

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

各部の説明

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

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

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

HTMLHTML入門

Posted by miyayamo