CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで順序付きリストに小文字のローマ数字を使う方法

CSSを使って、順序付きリストに小文字のローマ数字を表示させる方法を解説します。

HTMLで順序付きリストを作成するには、次の2つのタグを使用します。

  • <ol> タグ：順序付きリスト全体を定義します。
  • <li> タグ：リスト内の各項目を定義します。

記述例は以下のとおりです。

<ol>
  <li>リスト項目</li>
  <li>リスト項目</li>
  <li>リスト項目</li>
</ol>

デフォルトでは、順序付きリストの各項目には通常のアラビア数字が割り当てられます。

  1. リスト項目
  2. リスト項目
  3. リスト項目

このデフォルトの10進数スタイルは、すべてのブラウザに組み込まれている「ユーザーエージェントスタイルシート（UAS）」によって提供されているものです。CSSでは list-style-type: decimal; として定義されています。

CSSで小文字のローマ数字を追加する方法

小文字のローマ数字を使ったリストを作成するには、CSSプロパティ list-style-type を使って、デフォルトの10進数スタイルを上書きします。

ol {
  list-style-type: lower-roman;
}

実際の表示例はこちらです。

  1. リスト項目
  2. リスト項目
  3. リスト項目

  1. HTMLで小文字のローマ数字を使った番号付きリストを作成する方法

    HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。順序付きリストは<ol>タグで開始し、各リスト項目は<li>タグで囲みます。リスト項目にはデフォルトで数字が割り当てられますが、type属性を指定することで、小文字の英字、大文字の英字、ローマ数字など、さまざまな番号スタイルに変更することができます。 小文字のローマ数字で番号付けされた順序付きリストを作成する場合は、<ol>タグにtype属性を指定します。<ol type="i">のように記述することで、リスト項目にi、ii、ii

  2. HTMLで大文字ローマ数字を使った順序付きリストを作成する方法

    HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。リスト全体を<ol>タグで囲み、各項目は<li>タグで記述します。リスト項目には、数字・小文字のアルファベット・大文字のアルファベット・ローマ数字などが自動的に付与され、何も指定しない場合は数字が使われます。 type属性で大文字ローマ数字を指定する 大文字のローマ数字（I、II、III…）で番号付けされた順序付きリストを作成するには、<ol>タグにtype属性を指定します。<ol type=I>のように「I」を設定することで、リスト項目に大文字ローマ