HTML 順序なしリスト
HTML<ul>タグは、順不同(箇条書き)のリストを定義します。
順序付けられていないHTMLリスト
順序なしリストは、<ul>タグ。各リスト項目は<li>タグ。
リスト項目は、デフォルトで黒丸(小さな黒い円)でマークされます。
順序付けされていないHTMLリスト - リストアイテムマーカーの選択
CSSlist-style-typeプロパティは、リスト項目マーカーのスタイルを定義するために使用されます。次の値のいずれかを指定できます。
| value | 説明 |
|---|---|
| ディスク | リスト アイテム マーカーを黒丸に設定します (デフォルト)。 |
| 丸 | リスト項目マーカーを円に設定します |
| 四角 | リスト項目マーカーを正方形に設定します |
| なし | リスト項目はマークされません |
ネストされたHTMLリスト
リストはネストできます(リスト内のリスト):
例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
注：リスト項目(<li>)には、新しいリストや、画像やリンクなどの他の HTML要素を含めることができます。
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>
ヒント：CSS の詳細については、CSS チュートリアル.
章のまとめ
- HTML を使用する
<ul>順序なしリストを定義する要素 - CSS を使用する
list-style-typeリスト項目マーカーを定義するプロパティ - HTML を使用する
<li>リスト項目を定義する要素 - リストはネスト可能
- リスト項目には他の HTML 要素を含めることができます
- CSS プロパティを使用する
float:leftリストを横に表示する
HTML リスト タグ
| タグ | 説明 |
|---|---|
| <ul> | 順序なしリストを定義します |
| <ol> | 順序付きリストを定義します |
| <li> | リスト項目を定義します |
| <dl> | 説明リストを定義します |
| <dt> | 説明リストで用語を定義します |
| <dd> | 説明リストで用語を説明します |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンス