HTMLの <ol> タグは “Ordered List”（順序付きリスト）を定義するために使用されます。このタグは、順序を伴うリストアイテムを表示するのに適しており、リストアイテムは通常、数字やアルファベットの文字で順序づけられます。リストアイテムは <li> タグを使用してマークアップされ、<ol> タグ内に含められます。
基本的な使い方
<ol>
<li>最初のアイテム</li>
<li>次のアイテム</li>
<li>三番目のアイテム</li>
</ol>このコードは、1から始まる番号付きリストを生成します。
属性
<ol> タグはいくつかの属性を持ち、リストの表示方法をカスタマイズするのに使われます。
- type: リストアイテムの番号付けに使用されるタイプを指定します。”1″（デフォルト、数字）、”A”（大文字のアルファベット）、”a”（小文字のアルファベット）、”I”（大文字のローマ数字）、”i”（小文字のローマ数字）があります。
<ol type="A">
<li>最初のアイテム</li>
<li>次のアイテム</li>
</ol>この例では、リストアイテムは大文字のアルファベットで番号付けされます。
- start: リストの開始番号を指定します。この属性を使用すると、リストのカウントを任意の数から開始させることができます。
<ol start="50">
<li>最初のアイテム</li>
<li>次のアイテム</li>
</ol>この例では、リストカウントが50から始まります。
- reversed: リストの番号付けを逆順にします。この属性はブール属性で、存在するだけで有効になります。
<ol reversed>
<li>最初のアイテム</li>
<li>次のアイテム</li>
</ol>この例では、リストアイテムは逆順で番号付けされます。
スタイリング
CSSを使用して <ol> 要素のスタイルをカスタマイズすることもできます。たとえば、リストのスタイルタイプ、インデント、色などを設定することが可能です。
ol {
padding-left: 40px; /* リストのインデントを調整 */
color: blue; /* リストアイテムのテキスト色を変更 */
}HTMLの <ol> タグは、手順、ランキング、または他の順序を伴う情報を整理し、リスト形式で表示する際に役立つセマンティックな要素です。適切なマークアップとスタイリングを通じて、情報をよりアクセスしやすく、ユーザーフレンドリーな形で提供することができます。