箇条書きの番号形式を指定する

<ol>タグで文章を箇条書きにする際に、番号形式を指定することができます。

<タグ名 type="番号形式">～</タグ名>
  • タグ名：<ol>タグで指定すると全体を対象に、<li>タグで指定すると個別に番号形式を指定することができます。終了タグは、＆lt;li>の場合省略できます。
  • 番号形式：下表のなかから選べます。『1』、『a』などのキーワードで指定します。
    キーワード 番号形式
    1 （数字のイチ） 算用数字（1、2、3、4、･･･）
    a 英小文字（a、b、c、d、･･･）
    A 英大文字（A、B、C、D、･･･）
    i （英小文字のアイ） ローマ数字（小文字　ⅰ、ⅱ、ⅲ、ⅳ、･･･）
    I （英大文字のアイ） ローマ数字（大文字　Ⅰ、Ⅱ、Ⅲ、Ⅳ、･･･）

番号形式を指定してみます。

テーブルを作成する
  1. 縦にまたがるセルを作成する
  2. 横にまたがるセルを作成する
  3. テーブルに枠線を付ける
    1. 枠線の色を指定する
    2. 枠線の太さを指定する
  4. テーブルに表題を付ける
  5. セル内の余白を指定する

このソースは、次のようになります。赤字部分で各項目の番号形式を、青字部分で入れ子になっている箇条書き文章全体の番号形式を指定しています。

<ol>
<li type="1">縦にまたがるセルを作成する
<li type="a">横にまたがるセルを作成する
<li type="A">テーブルに枠線を付ける
<ol type="i">
<li>枠線の色を指定する
<li>枠線の太さを指定する
</ol>
<li type="I">テーブルに表題を付ける
<li type="I">セル内の余白を指定する
</ol>

style 指定で、番号形式を指定することもできます。文字色や、余白など他の指定も行う場合は一括して記述できますので、こういった場合は、style 指定のほうがソースがすっきりするかも知れません。この場合は、

<タグ名 style="list-style-type:番号形式">～</タグ名>
  • タグ名：<ol>タグで指定すると全体を対象に、<li>タグで指定すると個別に番号形式を指定することができます。終了タグは、＆lt;li>の場合省略できます。
  • 番号形式：下記の表から選べます。指定はキーワードで記述します。
    キーワード 箇条書きの頭に付加される番号
    none なし
    decimal 算用数字（1、2、3、4、･･･）
    lower-roman 英小文字（a、b、c、d、･･･）
    upper-roman 英大文字（A、B、C、D、･･･）
    lower-alpha ローマ数字（小文字　ⅰ、ⅱ、ⅲ、ⅳ、･･･）
    upper-alpha ローマ数字（大文字　Ⅰ、Ⅱ、Ⅲ、Ⅳ、･･･）

 

style 指定の場合のソースを以下に示します。

 

<ol>
<li style="list-style-type:none">縦にまたがるセルを作成する
<li style="list-style-type:decimal">横にまたがるセルを作成する
<li style="list-style-type:lower-roman">テーブルに枠線を付ける
<ol style="list-style-type:upper-roman">
<li>枠線の色を指定する
<li>枠線の太さを指定する
</ol>
<li style="list-style-type:lower-alpha">テーブルに表題を付ける
<li style="list-style-type:upper-alpha">セル内の余白を指定する
</ol>

これを表示させると、次のようになります。

  1. 縦にまたがるセルを作成する
  2. 横にまたがるセルを作成する
  3. テーブルに枠線を付ける
    1. 枠線の色を指定する
    2. 枠線の太さを指定する
  4. テーブルに表題を付ける
  5. セル内の余白を指定する