HTMLの順序付けられていないリスト
HTML<ul>タグは、順序付けされていない（箇条書きの）リストを定義します。
順序付けられていないHTMLリスト
順序付けられていないリストは<ul>タグで始まります。各リスト項目は
<li>タグで始まります。
リストアイテムは、デフォルトで箇条書き（小さな黒い円）でマークされます。
例
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
順序付けられていないHTMLリスト-リストアイテムマーカーを選択
CSSlist-style-typeプロパティは、リストアイテムマーカーのスタイルを定義するために使用されます。次のいずれかの値をとることができます。
| Value | Description |
|---|---|
| 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 |
例-ディスク
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
例-サークル
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
例-正方形
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
例-なし
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ネストされた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リストタグ
| Tag | Description |
|---|---|
| <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タグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。