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

HTMLのリストを作成するサンプルです。
ulとliとolについてです。

目次

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>

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

リストの行間を広げるサンプルです。
margin-topまたはmargin-bottomを使用します。
7-11行目は、margin-bottomを使用した例です。
12-15行目は、通常の何もしていない例です。(違いをみるため)

<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>
<ul>
	<li>赤</li>
	<li>黄</li>
	<li>青</li>
</ul>
</body>

サンプル

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

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

Ol要素

サンプル

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>

関連の記事

CSS リストの項目を変更するサンプル(list-style-type)
HTML テーブルのセルを縦につなげるサンプル(rowspan)
HTML テーブルのセルを横につなげるサンプル(colspan)
HTML テーブルのセル内の余白を指定するサンプル(cellpadding)
HTML テーブルのセルの間隔を指定するサンプル(cellspacing)
HTML テーブルの幅を指定するサンプル(width)



△上に戻る