順序付きリストのreversed属性とは

HTMLの順序付きリスト(<ol>)要素のreversed属性は、リストの項目を逆順に番号付けする際に使用されます。この属性が設定されている場合、リストの番号付けは最後の項目から始まり、最初の項目に向かって逆順に進みます。これは特に、カウントダウンやプロセスの最終ステップから始まる逆順の手順リストを作成する場合などに便利です。

reversed属性の使用法

以下はreversed属性を使用した順序付きリストの例です:

<ol reversed>
  <li>最終ステップ</li>
  <li>次のステップ</li>
  <li>最初のステップ</li>
</ol>

このリストは、次のように逆順で番号付けされたリストとして表示されます:

3. 最終ステップ
2. 次のステップ
1. 最初のステップ

リストの最初の項目(この場合は「最終ステップ」)が最高番号を持ち、その後の項目の番号は減少していきます。

reversed属性の応用

reversed属性は、特に順序が逆のリストを提示する必要がある場合に便利です。例えば、カウントダウンリスト、競技での順位付け(最後の順位からカウントアップしていく場合)、またはプロジェクトのフェーズを最終段階から遡って表示する場合などが考えられます。

注意点

  • reversed属性はブール型属性であり、宣言するだけで効果があります。値を設定する必要はありません(例えばreversed="reversed"とする代わりに単にreversedとだけ宣言します)。
  • reversed属性は、start属性と組み合わせて使用することができます。この場合、start属性で指定された番号からカウントダウンが始まります。
  • すべてのブラウザがreversed属性をサポートしているわけではありませんので、特に古いブラウザでは期待通りに動作しない可能性があります。

SNSでもご購読できます。

コメントを残す

*