<ul> リストを作成する

最終更新日:

リストはul要素で記述します(ulはunordered listの略)。 <ul>から</ul>までが一つのリストを意味し、 各項目は<li>~</li>タグ内に記述します。 なお、リストは入れ子にすることも出来ます。

<ul>は番号のないリストです。 番号付きのリストを作成したい場合は、<ol>を使用してください。


■ HTML(単純なリスト)

<ul>
<li>第1章</li>
<li>第2章</li>
<li>第3章</li>
</ul>

■ 表示結果

ul要素

■ HTML(リストを入れ子にする)

本の目次のように第n章の中にn節があるリストです。

<ul>
<li>第1章</li>
    <ul>
    <li>第1節</li>
    <li>第2節</li>
    </ul>
<li>第2章</li>
    <ul>
    <li>第1節</li>
    <li>第2節</li>
    </ul>
<li>第3章</li>
    <ul>
    <li>第1節</li>
    <li>第2節</li>
    </ul>
</ul>

■ 表示結果

ul要素

■ リストの記号を変更する

通常は自動的に記号が付けられます。 記号を指定したい場合はスタイルシートで指定します。 下記のようにlist-style-typeで記号が指定できます。

(スタイルシート)

ul {
  /* disc(黒丸)、circle(白丸)、square(四角)、none(記号なし) */
  list-style-type: square;
}