目次
| サンプル | ulとli |
| ulとliでリストを表示 | |
| リストの行間をmarginで広げるサンプル | |
| olとliのサンプル(番号付きのリスト) |
ulとli
- ulは、li要素とセットで、箇条書きのリストを表示します。Unordered Listの略です。
- liは、リストの項目を表示します。List Itemの略です。
- liは、項目のデザインを変更できます。list-style-typeプロパティを使用します。
CSS list-style-type リスト項目のデザインを指定
ulとliでリストを表示
- red
- yellow
- blue
<body >
<ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ul>
</body>
リストの行間をmarginで広げるサンプル
リストの行間は、margin-topまたはmargin-bottomで調整します。
- red
- yellow
- blue
<style>
ul li {
margin-bottom: 20px;
}
</style>
<body>
<ul>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ul>
</body>
olとliで番号付きのリストを表示
olは、li要素とセットで、番号付きのリストの項目を表示します。
Ordered Listの略です。
- red
- yellow
- blue
<body>
<ol>
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ol>
</body>olとliは、番号付きのリストの項目を表示します。
関連の記事