[HTML] ul/li/ol リストを作成するサンプル

HTMLのul要素とli要素とol要素で、リストを作成するサンプルです。

目次

サンプル ulとliのサンプル(リストを表示) / ulとは / liとは
  リストの行間を広げるサンプル
  olとliのサンプル(番号付きのリスト) / olとは / liとは

ulとliのサンプル(リストを表示)

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ulのサンプル</title>
</head>
<body >
<ul>
	<li>赤</li>
	<li>黄</li>
	<li>青</li>
</ul>
</body>
</html>

ulとは

  • li要素とセットで、箇条書きのリストを表示します。
  • Unordered Listの略です。

liとは

リストの行間を広げるサンプル

  • margin-bottom:20px;
  • margin-bottom:20px;
  • margin-bottom:20px;

上記サンプルのコードです。

<style>
  ul li {
    margin-bottom: 20px;
  }
</style>
<body>
  <ul>
    <li>margin-bottom:20px;</li>
    <li>margin-bottom:20px;</li>
    <li>margin-bottom:20px;</li>
  </ul>
</body>

margin-topまたはmargin-bottomを使用します。

3行目は、CSSでmargin-bottomを指定しています。

olとliのサンプル(番号付きのリスト)

上記サンプルのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>olのサンプル</title>
</head>
<body >
<ol>
	<li>赤</li>
	<li>黄</li>
	<li>青</li>
</ol>
&lt;/body>
</html>

olとは

  • Ordered Listの略です。
  • li要素とセットで、番号付きのリストの項目を表示します。

関連の記事

CSS list-style-type リストの項目を指定する

△上に戻る