HTML Living Standard/ol
ol 要素
[編集]<ol> 要素は、順序のあるリスト（ordered list）を表すために使用されます。リスト内の各項目は <li> 要素で定義されます。
基本構造
[編集]以下は、<ol> 要素の基本的な使用例です：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ordered List Example</title> </head> <body> <ol> <li>小麦粉を量る</li> <li>水を加える</li> <li>よく混ぜる</li> </ol> </body> </html>
この例では、<ol> 要素によって順序のあるリストが作成され、各項目は <li> 要素で定義されています。
主な特徴
[編集]- 順序が重要な情報やステップのリストを表す際に使用します。
- ブラウザのデフォルトでは、リスト項目の前に番号が表示されます（1, 2, 3...）。
- 視覚的なスタイルや番号の形式はCSSや属性でカスタマイズできます。
属性
[編集]<ol> 要素には、以下の属性を使用できます。
type 属性
[編集]リストの番号の形式を指定します。サポートされる値：
1（デフォルト）：アラビア数字（1, 2, 3...）a：小文字のアルファベット（a, b, c...）A：大文字のアルファベット（A, B, C...）i：小文字のローマ数字（i, ii, iii...）I：大文字のローマ数字（I, II, III...）
- 例：
<ol type="A"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol>
start 属性
[編集]リストの番号を開始する位置を指定します。
- 例：
<ol start="5"> <li>第五項</li> <li>第六項</li> </ol>
reversed 属性
[編集]リストの順序を逆にする場合に使用します。
- 例：
<ol reversed> <li>第三項</li> <li>第二項</li> <li>第一項</li> </ol>
CSSを使用したカスタマイズ
[編集]<ol> 要素は、CSSを使用してさらにスタイルを変更することができます。
番号形式の変更
[編集]list-style-type プロパティを使用して、番号の形式を変更できます。
<ol style="list-style-type: upper-roman;"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol>
- サポートされる値の例：
decimal（デフォルト）：アラビア数字lower-alpha：小文字のアルファベットupper-alpha：大文字のアルファベットlower-roman：小文字のローマ数字upper-roman：大文字のローマ数字
番号のカスタムスタイリング
[編集]番号自体をカスタマイズしたい場合は、::marker 擬似要素を使用します。
<ol style="list-style-type: none;"> <li style="counter-increment: item;">第一項</li> <li style="counter-increment: item;">第二項</li> <li style="counter-increment: item;">第三項</li> </ol>
ネストされたリスト
[編集]<ol> 要素は、他の <ol> または <ul> 要素と組み合わせてネスト構造を作成できます。
- 例：
<ol> <li>準備 <ol> <li>材料を集める</li> <li>調理器具を準備する</li> </ol> </li> <li>調理 <ol> <li>材料を切る</li> <li>加熱する</li> </ol> </li> </ol>
使用例
[編集]シンプルなリスト
[編集]<ol> <li>第一段階</li> <li>第二段階</li> <li>第三段階</li> </ol>
番号形式のカスタマイズ
[編集]<ol type="i"> <li>第一段階</li> <li>第二段階</li> <li>第三段階</li> </ol>
逆順のリスト
[編集]<ol reversed> <li>第三段階</li> <li>第二段階</li> <li>第一段階</li> </ol>
注意点
[編集]- 意味論的な使用:
- アクセシビリティ:
- スクリーンリーダーで正しく読み上げられるよう、適切にリストを構造化してください。
- スタイリングの制御:
- デフォルトのブラウザスタイルを上書きする場合は、CSSを使用して明示的に定義してください。