基礎学習 HTMLリストについて

HTMLリストの例

番号なしリスト:

項目
項目
項目
項目

順序付きリスト:

First item
Second item
Third item
Fourth item

この記事の概要

順不同のHTMLリスト
順不同のHTMLリスト – リスト項目マーカーの選択
順序付けられたHTMLリスト
順序付けられたHTMLリスト – type属性
HTML 説明リスト
入れ子になったHTMLリスト
制御リストのカウント
CSS付き水平リスト
まとめ
HTML List Tags

順不同のHTMLリスト

番号なしリストは<ul> タグで始まります。各リスト項目は
<li> タグで始ります。

リスト項目は、デフォルトで黒丸（小さな黒丸）でマークされます:

例文

<ul>

<li>Coffee</li>
<li>Tea</li>

順不同のHTMLリスト – リスト項目マーカーの選択

CSS list-style-type プロパティは、リストアイテムマーカーのスタイルを定義するために使用されます。:

Value	説明
disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Example – ディスク

<ul style=”list-style-type:disc;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example – サークル

<ul style=”list-style-type:circle;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example – スクエア

<ul style=”list-style-type:square;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example – なし

<ul style=”list-style-type:none;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

順序付けられたHTMLリスト

番号付きリストは <ol> タグで始まります。各リスト項目は. Each list item starts with the <li> タグで始まります。

リスト項目はデフォルトで番号でマークされます：

例文

<ol>

<li>Coffee</li>
<li>Tea</li>

順序付けられたHTMLリスト – type属性

type属性は <ol> タグでリスとマーカーの種類を定義します。

Type	説明
type=”1″	Tリスト項目には番号が付けられます（デフォルト）
type=”A”	リスト項目は大文字で番号付けされます
type=”a”	リスト項目は小文字で番号付けされます
type=”I”	リスト項目は大文字のローマ数字で番号付けされます
type=”i”	リスト項目は小文字のローマ数字で番号付けされます

番号:

<ol type=”1″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

大文字:

<ol type=”A”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

小文字 :

<ol type=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

ローマ数字の大文字:

<ol type=”I”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

ローマ数字の小文字:

<ol type=”i”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML 説明リスト

HTMLは説明リストもサポートしています

説明リストは、各用語の説明を含む用語リストです。

<dl> タグは、説明リストを定義し、 <dt> タグは、用語（名前）を定義 <dd> タグが各用語について説明します。:

例文

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>
</dl>

入れ子になったHTMLリスト

リストは入れ子にすることができます（リスト内のリスト）:

例文

<ul>
<li>Coffee</li>
<li>Tea
<ul>

<li>Black tea</li>
<li>Green tea</li>
</ul>

</li>
<li>Milk</li>
</ul>

ノート: リスト項目には、新しいリストや、画像やリンクなどの他のHTML要素を含めることができます。

制御リストのカウント

番号付きリストではデフォルトで１から数えます。指定した数から数え始めたい場合には start 属性を使用します。:

例文

<ol start=”50″>
<li>Coffee</li>
<li>Tea</li>

CSS付き水平リスト

HTMLリストは、CSSを使用してさまざまな方法でスタイルを設定できます。

一般的な方法の1つは、ナビゲーションメニューを作成するためにリストを水平方向にスタイルすることです。:

例文

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#news”>News</a></li>
<li><a href=”#contact”>Contact</a></li>
<li><a href=”#about”>About</a></li>
</ul>

</body>
</html>

まとめ

HTML <ul> 要素を使用して番号なしリストを定義する
CSS list-style-type プロパティを使用してリストアイテムマーカーを定義します。
HTML <ol> 要素を使用して順序付きリストを定義する
HTML type 属性を使用して番号付けタイプを定義します
HTML <li> 要素を使用してリスト項目を定義する
HTML <dl> 要素を使用して説明リストを定義します
HTML <dt> 要素を使用して説明語を定義します
HTML <dd> 要素を使用して、説明リスト内の用語を説明します
リストはリストの中にネストすることができます
リスト項目に他のHTML要素を含めることができます
float:left か display:inline のCSSプロパティを使用してリストを水兵に表示する。

HTML List Tags

Tag	説明
<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

さらにタグについてもっと知るには HTML Tag 辞典を参照して下さい