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

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

目次

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

リストを表示する(ulと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要素

リストの行間を広げる(li要素)

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

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

コード

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

<style>
#ul1 li{
	margin-bottom:20px;
}
</style>
<body >
<ul id="ul1">
	<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)

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要素

関連の記事

CSS list-style-type リストの項目を指定する
HTML rowspan テーブルのセルを縦につなげる
HTML colspan テーブルのセルを横につなげる

△上に戻る