HTMLで番号のリストをつくる方法(ソース付き)<ol><li>を活用しよう!

HTMLで番号のリストをつくる方法(ソース付き)をご紹介いたします。HTMLは番号を自分で振らなくても自動にリスト番号を作成してくれます。リストに番号やアルファベットを付け、HTMLを見やすくしてみましょう。

HTML

<ol><li>タグを使用すると、番号付きリストを作ることができます。 <ol>タグで挟まれた範囲は、その範囲が番号付きリストであることを示し、<li>タグで挟まれた範囲(文書)は、リスト項目であることを示します。

・type属性を指定すると番号付きリストの文字を変更することができます。
・start属性を指定すると開始番号を変更することができます。
・value属性を設定すると連番を変更することができます。

目次

数字『サンプル』(type属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

数字『ソース』(type属性を指定)

type属性に”1″を記載した場合。リストの番号は1.、2.、3.、 …となります。

HTMLソース(ここからコピペ)

<ol type=”1″><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


ローマ字(大文字)『サンプル』(type属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

ローマ字(大文字)『ソース』(type属性を指定)

type属性に”I”を記載した場合。リストの番号はI.、II.、III.、 …となります。

HTMLソース(ここからコピペ)

<ol type=”I”><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


ローマ字(小文字)『サンプル』(type属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

ローマ字(小文字)『ソース』(type属性を指定)

type属性に”i”を記載した場合。リストの番号はi.、ii.、iii.、 …となります。

HTMLソース(ここからコピペ)

<ol type=”i”><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


アルファベット(大文字)『サンプル』(type属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

アルファベット(大文字)『ソース』(type属性を指定)

type属性に”A”を記載した場合。リストの番号はA.、B.、C.、 …となります。

HTMLソース(ここからコピペ)

<ol type=”A”><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


アルファベット(小文字)『サンプル』(type属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

アルファベット(大文字)『ソース』(type属性を指定)

type属性に”a”を記載した場合。リストの番号はa.、b.、c.、 …となります。

HTMLソース(ここからコピペ)

<ol type=”a”><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


数字『サンプル』(start属性を指定)

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

数字『ソース』(start属性を指定)

start属性に”3″を記載した場合。リストの番号は3.、4.、5.、 …となります。

HTMLソース(ここからコピペ)

<ol start=”3″><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>


数字『サンプル』(value属性を指定)

value属性を設定すると、連番を変更することができます。start属性は、<ol>タグ(リスト全体)に対して値を設定します。

value属性は、<li>タグ(各リスト項目)に対して設定します。 例えば、『1、2、3、5、6、』というような不規則な番号をリストマークとして設定したい場合に使用します。

上記の例のように「1、2、3、5、6、」としたい場合は、4つ目のリスト項目
に『value=”5″』と記述します。

  1. リスト番号1のタイトル
  2. リスト番号2のタイトル
  3. リスト番号3のタイトル
  4. リスト番号4のタイトル
  5. リスト番号5のタイトル

数字『ソース』(start属性を指定)

start属性に”3″を記載した場合。リストの番号は3.,4.,5. …となります。

HTMLソース(ここからコピペ)

<ol type=”a”><li>リスト番号1のタイトル</li>
<li>リスト番号2のタイトル</li>
<li value=”5″>リスト番号3のタイトル</li>
<li>リスト番号4のタイトル</li>
<li>リスト番号5のタイトル</li>
</ol>