html－リストタグ

マーク付きリストを作る

リストの種類

リストの種類には大きく分けると下記の３種類があります。

リストの種類	タグ	詳細
マーク付きリスト	<ul>～</ul>	間に、項目 <li>～</li> を記述
番号付きリスト	<ol>～</ol>	間に、項目 <li>～</li> を記述
定義型リスト	<dl>～</dl>	間に、用語 <dt>～</dt>、説明文<dd>～</dd> を記述

マーク付きリスト

リストタグを使うことによって、情報が分かりやすく整理され、htmlもすっきりします。リストをつくるには、<ul><li>タグを使います。
<ul>は、リスト形式であることを定義するタグです。
マーク付きリストを作成するには、<ul></ul>の間に、項目<li></li>を入れます。項目の頭に、自動的に黒丸（●）が表示されます。デフォルトは番号なし黒丸（●）つきリストです。

タグ	Web上での見え方
<ul> <li>項目その１</li> <li>項目その２</li> <li>項目その３</li> </ul>	項目その１項目その２項目その３

リストの上下には、一行分のスペースができますが、リスト間の余白の調整や、インデント（文字下げ）の設定はスタイルシートで行います。

リストマークを変更する

<ul><li>タグの属性を変更することによってリストマークを変更することができます。
リスト全体のリストマークを統一する場合は、<ul>タグ内に、リスト項目個別にマークを指定する場合は、<li>タグ内にtype属性を記述します。

リストマーク	タグ（設定）	Web上での見え方
白丸（circle）	<ul type="circle"> <li>ホームページ</li> <li>リストタグ</li> <li>リストマーク</li> </ul>	ホームページリストタグリストマーク
黒丸（disc）	<ul type="disc"> <li>項目その１</li> <li>項目その２</li> <li>項目その３</li> </ul>	項目その１項目その２項目その３
黒四角（square）	<ul type="square"> <li>ホームページ</li> <li>リストタグ</li> <li>リストマーク</li> </ul>	ホームページリストタグリストマーク
個々に異なるマーク	<ul> <li type="disc">裏技</li> <li type="square">小技</li> <li type="circle">デザイン</li> </ul>	裏技小技デザイン
リストマークを表示しない	<ul style="list-style:none"> <li>項目その１</li> <li>項目その２</li> <li>項目その３</li> </ul>	項目その１項目その２項目その３