<ol>タグのリストの番号の変更方法について紹介しています。

番号付きリストは、特に何も指定しなければ数字で順番に表示されますが、これをアルファベットの大文字、小文字、ローマ数字の大文字、小文字に変更することもできます。


アルファベット大文字

1. リスト1行目
2. リスト2行目

HTMLは以下のようになります。

<ol type="A"> <li>リスト1行目 <li>リスト2行目 </ol>

赤文字の【A】がアルファベット大文字を指定する記述になります。


アルファベット小文字

1. リスト1行目
2. リスト1行目

HTMLは以下のようになります。

<ol type="a"> <li>リスト1行目 <li>リスト2行目 </ol>

赤文字の【a】がアルファベット小文字を指定する記述になります。


ローマ数字大文字

1. リスト1行目
2. リスト1行目

HTMLは以下のようになります。

<ol type="I"> <li>リスト1行目 <li>リスト2行目 </ol>

赤文字の【I】がローマ数字大文字を指定する記述になります。


<ol type="I">
<li>リスト1行目
<li>リスト2行目
</ol>


ローマ数字小文字

1. リスト1行目
2. リスト1行目

HTMLは以下のようになります。

<ol type="i"> <li>リスト1行目 <li>リスト2行目 </ol>

赤文字の【i】がローマ数字小文字を指定する記述になります。


<ol type="i">
<li>リスト1行目
<li>リスト2行目
</ol>


行ごとに種類を変える


実用的ではありませんが、各行ごとにそのタイプを設定することもできます。

1. 数字
2. アルファベット大文字
3. アルファベット小文字
4. ローマ数字大文字
5. ローマ数字小文字

<ol> <li>数字 <li type="A">アルファベット大文字 <li type="a">アルファベット小文字 <li type="I">ローマ数字大文字 <li type="i">ローマ数字小文字 </ol>

<ol>タグではなく、<li>タグに指定の記述を行うことにより、行ごとに種類を変更することができます。