17.HTML リストについて

  • 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

 HTMLリストの例

番号なしリスト:

  • 項目
  • 項目
  • 項目
  • 項目

順序付きリスト:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
この記事の概要
  1. 順不同のHTMLリスト
  2. 順不同のHTMLリスト – リスト項目マーカーの選択
  3. 順序付けられたHTMLリスト
  4. 順序付けられたHTMLリスト – type属性
  5. HTML 説明リスト
  6. 入れ子になったHTMLリスト
  7. 制御リストのカウント
  8. CSS付き水平リスト
  9. まとめ
  10. HTML List Tags

順不同の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> タグで始まります。各リスト項目は. Each list item starts with the
<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 辞典を参照して下さい

タグ: , , , ,

コメントを残す