リストはこんな感じ
おいしい食べ物
- いちご
- りんご
- ぶどう
- みかん
- もも
フルーツポンチの作り方
- フルーツを用意します。
- フルーツを一口サイズにカットします。
- サイダーをたっぷりとかけます。
-
完成
リストは<ul><ol><li>というタグを使って記述します。コードは次のとおりです。
・番号なしリスト
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> |
・番号ありリスト
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>タグで囲むと番号ありのリストになります。