HTMLのリストを作成するサンプルです。
ulとliとolについてです。
目次
ul要素
- Unordered Listの略です。
- li要素とセットで、箇条書きのリストを表示します。
- 以下はMDNのul要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul
li要素
- List Itemの略です。
- リストの項目を表示します。
- 項目のデザインの変更はCSSのlist-style-typeプロパティを使用します。
- CSSのlist-style-typeプロパティについては以下を御覧ください。
CSS リストの項目を変更するサンプル(list-style-type) - 以下はMDNのli要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/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要素
- Ordered Listの略です。
- li要素とセットで、番号付きのリストの項目を表示します。
- 以下はMDNのol要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/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>
</body>
</html>関連の記事
CSS リストの項目を変更するサンプル(list-style-type)
HTML テーブルのセルを縦につなげるサンプル(rowspan)
HTML テーブルのセルを横につなげるサンプル(colspan)
HTML テーブルのセル内の余白を指定するサンプル(cellpadding)
HTML テーブルのセルの間隔を指定するサンプル(cellspacing)
HTML テーブルの幅を指定するサンプル(width)