＜ul要素＞ - 順序なしのリスト

公開日: 2017/02/09

ul要素は、順序なしのリストを表す要素です。li要素と組み合わせて使います。順序を入れ替えると内容に影響が出るリストはul要素で取り扱うべきではありません。

概要

名前

ul (Unordered list)

カテゴリー

Flow content

Palpable content: 子要素にli要素が1つ以上ある場合のみ。

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

0個以上のli要素。

Script-supporting element。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLUListElement

デフォルトのスタイル

ul {
	display: block;
	list-style-type: disc;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
	-webkit-padding-start: 40px;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-ul-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

li要素を使う

順序なしリストは、ul要素の子要素に、項目の数だけli要素を入れる形で使用します。

ul要素の使用例

<h1>行ったことがある都道府県</h1>

<ul>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ul>

デモを開く

順序なしリストとは？

順序なしリストとは、その名の通り、順序がないリストのことです。例えば、「今まで行ったことがある旅行先」というリストなら順序なしリストです。

HTML

<ul>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ul>

ですが同じリストでも、「これまでの旅行履歴」だったら行った順番に紹介しないといけません。つまり、ul要素ではなく、ol要素でマークアップするべきです。

HTML

<!-- 順序がある場合はol要素でマークアップ -->
<ol>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ol>

順序付きか順序なしかは、リストを紹介する文脈で変わってくることがあります。迷った時は「順序を入れ替えても大丈夫かどうか」で判断しましょう。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜ul要素＞ - 順序なしのリスト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ul/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>ul要素は、順序を入れ替えても内容に影響がないリストです。</p>

<h1>行ったことのある都道府県</h1>
<ul>
	<li>福島県</li>
	<li>大分県</li>
	<li>沖縄県</li>
	<li>栃木県</li>
	<li>山梨県</li>
</ul>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/590/"> <meta charset="utf-8"> <title>【デモ】＜ul要素＞ - 順序なしのリスト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ul/"> </head> <body>

<p>ul要素は、順序を入れ替えても内容に影響がないリストです。</p> <h1>行ったことのある都道府県</h1> <ul> <li>福島県</li> <li>大分県</li> <li>沖縄県</li> <li>栃木県</li> <li>山梨県</li> </ul>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>