HTMLリストの例
番号なしリスト:
- 項目
- 項目
- 項目
- 項目
順序付きリスト:
- First item
- Second item
- Third item
- Fourth item
順不同のHTMLリスト
番号なしリストは
<ul>
<li> タグで始ります。
リスト項目は、デフォルトで黒丸（小さな黒丸）でマークされます:
例文
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
順不同の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>
<li>
リスト項目はデフォルトで番号でマークされます：
例文
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
順序付けられた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>
<dt>Milk</dt>
<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>
<li>Milk</li>
</ol>
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 辞典を参照して下さい
コメント