HTML

この記事では「HTML」について、基本の意味と使い方を初心者向けにやさしく説明します。

この記事でわかること

順序を持たない一覧の作り方
liとの組み合わせ
ol・menuとの使い分け

The HTML <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Tip: For ordered lists, use the <ol> tag.

ul要素

　ul要素は「unordered list（順序がないリスト）」の略で、その名の通り順序がない箇条書きのリストを表示する際に使用します。一般的に、ドット、円形、四角形などの行頭記号を伴い、リストの左側がインデントされて描画されます。リスト項目は、li要素で指定します。

　ul要素で作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味が変わらないようなリストに使います。順序がある番号付きのリストを作成する際には ol要素を使用してください。

HTML5 へのバージョンアップによる変更点

　HTML4.01では、ul要素には type属性が用意されており、リストの先頭記号（リストマーカー）の種類として、黒丸（disc）・白丸（circle）・黒い四角（square）を指定することができました。

　HTML5では、ul要素の type属性は廃止されています。リストマーカーのスタイルを指定する際には、CSSの list-style-typeプロパティを使用してください。

ul 要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」。

ul要素の子に少なくとも１個の li要素がある場合は、Palpable content 「パルパブル・コンテンツ：知覚可能コンテンツ」。

Content model 「コンテンツ･モデル」

0個以上の li要素、script要素、template要素。

利用可能な場所

フロー・コンテンツが期待される場所。

タグの省略

不可。開始と終了タグの両方が必要。

要素固有のコンテンツ属性

なし。

グローバル属性のみ。

~~compact~~ [廃止]

　この属性は廃止となっているため、使用しないでください。代わりに CSSを使用してください。compact属性と同様の効果を得るには、CSSの line-heightプロパティを用い、その値として 80% を指定します。

　この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。

~~type~~ [廃止]

　この属性は廃止になりましたので使用しないでください。代替として CSSの list-style-typeプロパティを使用してください。

　リストの行頭記号の形状を指定するために用います。HTML3.2および HTML4.0/4.01 tranditionalで定義されていた値は以下の通りです。

circle
disc
square

　4つ目の行頭記号の形状として、WebTVインターフェイスで triangle が定義されていますが、すべてのブラウザーが対応しているわけではありません。

　この属性が存在せず、CSSの list-style-typeプロパティがその要素に適用されていない場合は、ブラウザが行頭記号の種類を、リストの入れ子階層に応じて選択します。

標準的なスタイル


ul {
	display: block;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 40px;
	list-style-type: disc;
}

DOMインターフェイス

HTMLUListElement

使用例

ul 要素の使用例


<p>私は次の言語を学んでいます。</p>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

私は次の言語を学んでいます。

HTML
CSS
JavaScript
PHP

　このサンプルは、コンテンツの意味として項目の順序は関係ありません。もし項目の順序を入れ替えたとしても、コンテンツとしては意味があります。

　しかし、次のサンプルは ul要素より ol要素の方が適しています。

ol 要素の使用例


<p>次の順に学ぶことを推奨します。</p>
<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ol>

次の順に学ぶことを推奨します。

HTML
CSS
JavaScript
PHP

　これは、学ぶ順序を言いたいわけですから、項目の順序を入れ替えてしまうと、コンテンツの意味が変わってしまいます。この場合は、ol要素の方が適切なようです。

上記の例を入れ子にした場合

HTML
- CSS
  - JavaScript
    - PHP


<ul>
	<li>HTML
		<ul>
			<li>CSS
				<ul>
					<li>JavaScript
						<ul>
							<li>PHP</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

　CSSの list-style-typeプロパティが要素に適用されていない場合は、ブラウザが行頭記号の種類を、リストの入れ子階層に応じて選択します。

　ul要素と ol要素は、必要なだけ深く入れ子にすることができます。また、入れ子になっているリストの中で、ul要素と ol要素が混在することに制限はありませんが、ol要素は順序に意味がある場合にしか使えませんのでご注意ください。リストの項目を入れ替えてみて意味が変わるようであれば ol要素を使い、そうでない場合は ul要素を使うようにしましょう。

ul要素と ol要素の入れ子例

HTML
CSS
1. border
2. background
3. color
JavaScript
PHP


<ul>
	<li>HTML</li>
	<li>CSS
		<ol>
			<li>border</li>
			<li>background</li>
			<li>color</li>
		</ol>
	</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

ul要素 + CSS

CSSの list-style-typeの使用例

リスト全体に黒い四角（square）を適用した場合

Sample

HTML
CSS
JavaScript
PHP

HTML source


<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

CSS source


ul {
	list-style-type: square;
}

リストの項目それぞれに適用した場合

Sample

disc - 塗りつぶされた丸にします。
circle - 塗りつぶされない丸にします。
square - 黒い四角にします。
none - リストマーカーを表示しません。

HTML source


<ul>
	<li class="c1">disc - 塗りつぶされた丸にします。</li>
	<li class="c2">circle - 塗りつぶされない丸にします。</li>
	<li class="c3">square - 黒い四角にします。</li>
	<li class="c4">none - リストマーカーを表示しません。</li>
</ul>

CSS source


.c1 {
	list-style-type: disc;
}
.c2 {
	list-style-type: circle;
}
.c3 {
	list-style-type: square;
}
.c4 {
	list-style-type: none;
}

ボックスのまわりを線で囲う

　まずは箇条書きのボックス（ul要素）を線で囲ってみます。

私は次の言語を学んでいます。

HTML
CSS
JavaScript
PHP

HTML source


<p>私は次の言語を学んでいます。</p>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

CSS source


ul {
	border: 3px #00bb00 dashed;
}

　CSSの borderプロパティを使い、3px の太さのカラーコード #00bb00 の色（緑系）の破線（dashed）を設定してみました。

背景色を変える

　次に箇条書きのボックス（ul要素）の背景の色を設定してみます。

私は次の言語を学んでいます。

HTML
CSS
JavaScript
PHP

HTML source


<p>私は次の言語を学んでいます。</p>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

CSS source


ul {
	border: 3px #00bb00 dashed;
	background: #bbccbb;
}

　CSSの backgroundプロパティにカラーコード #bbccbb を設定してみました。

箇条書きの文字色だけを変える

　次は箇条書きのボックス（ul要素）の中にある文字色だけを設定してみます。

私は次の言語を学んでいます。

HTML
CSS
JavaScript
PHP

HTML source


<p>私は次の言語を学んでいます。</p>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>PHP</li>
</ul>

CSS source


ul {
	border: 3px #00bb00 dashed;
	background: #bbccbb;
	color: #559900;
}

　CSSの colorプロパティを使って文字色をカラーコード #559900 に変更していますが、ul要素に対して colorプロパティを設定していますので、p要素の文字色は変わっていません。

ul要素 + CSS + Font Awesome

　行頭記号を Font Awesomeのアイコン（ book）を使って表示してみました。

私は次の言語を学んでいます。

HTML
CSS
JavaScript
PHP

HTML source


<head>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
	<p>私は次の言語を学んでいます。</p>
	<ul class="fa-ul">
		<li><span class="fa-li"><i class="fas fa-book"></i></span>HTML</li>
		<li><span class="fa-li"><i class="fas fa-book"></i></span>CSS</li>
		<li><span class="fa-li"><i class="fas fa-book"></i></span>JavaScript</li>
		<li><span class="fa-li"><i class="fas fa-book"></i></span>PHP</li>
	</ul>
</body>

　Font Awesomeを利用する際の準備として、ここでは CSSの CDNを利用しています。

Font Awesome 5 for CSS


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

　Font Awesomeをリストで用いるには、ul要素に fa-ulクラスを加え、アイコンを fa-liクラスの span要素で囲います。