HTML リスト

テキストやグラフをコンテナに詰める形の一つがリストであり、リストの最大の特徴は整然と、きれい、順序立っています。

HTML は順序、無秩序、カスタムリストをサポートしています：

HTML リスト

オンラインサンプル

無序列表
このサンプルでは、無序列表をデモンストレーションします。

順序リスト
このサンプルでは、順序リストをデモンストレーションします。

HTML 無序列表

無序列表は、項目のリストであり、このリストの項目は太字の丸い点（典型的な小さな黒い丸）でマークされます。

無序列表は <ul> タグを使用します

<ul>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
</ul>

ブラウザでの表示は以下の通りです：

• リストアイテム1

• リストアイテム2

HTML 順序リスト

同様に、順序リストもアイテムのリストであり、リストアイテムは数字でマークされます。順序リストは <ol> タグで始まり、各リストアイテムは <li> タグで始まります。

リストアイテムは数字でマークされます。

<ol>
<li>リストアイテム1</li>
<li>リストアイテム2</li>
</ol>

ブラウザでの表示は以下の通りです：

1. リストアイテム1

2. リストアイテム2

HTML カスタムリスト

カスタムリストは単なるアイテムのリストではなく、アイテムとその注釈の組み合わせです。

カスタムリストは <dl> タグで始まり、各カスタムリストアイテムは <dt> で始まり、各カスタムリストアイテムの定義は <dd> で始まります。

<dl>
<dt>春</dt>
<dd>-　春が来ました、春はどこでも春の雰囲気に満ちています</dd>
<dt>秋</dt>
<dd>-　秋には葉が黄色くなり、秋は収穫の季節</dd>
</dl>

ブラウザでの表示は以下の通りです：

• 春

• - 春が来ました、春はどこでも春の雰囲気に満ちています

• 秋

• - 秋には葉が黄色くなり、秋は収穫の季節です

注意事項 - 役立つヒント

ヒント: リストアイテム内には、段落、改行符、画像、リンク、他のリストなどを使用できます。

さらに多くの例

異なる種類の順序リスト
このサンプルでは、異なる種類の順序リストをデモンストレーションします。

異なる種類の無序列表
異なる種類の無序列表

ネストリスト
このサンプルでは、リストのネスト方法をデモンストレーションします。

ネストリスト 2
このサンプルでは、より複雑なネストリストをデモンストレーションします。

カスタムリスト
このサンプルでは、定義リストをデモンストレーションします。

HTML リストタグ