【HTML】olタグのリスト番号を逆順（降順）にする | ※そのまま使えるサンプルコードあり

2022年2月17日

HTMLで順序付きリストを表現するときに使用するolタグですが、順序を大きい順にものから表示することもできます。

この記事では、olタグに reversed 属性を使うことで逆順にリストを作成するコーディング方法を紹介します。

olタグを逆順（降順）にする

olタグの順序を逆順にするには、olタグに”reversed”属性を使用することでコーディングできます。

わかってしまえばとっても簡単な方法です。

(簡単) 単純に逆順にする

ここからはサンプルコードも交えながら紹介していきます。

まずは、シンプルにリストを逆順で表示するコードの紹介です。

いつもと同じようにolタグでリストを作成するのですが、olタグにreversed属性を追加します。

<ol reversed="reversed">
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>

(応用) 開始番号を決めて逆順に表示する

以前の記事で紹介した、olタグの開始番号を変更する属性と組み合わせると、任意の数字から始まる逆順のリストを簡単に作成することができるようになります。

olタグにreversed属性と合わせて、start属性も追加して定義します。

<ol start="3" reversed="reversed">
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ol>

いかがでしたでしょうか。

ブログなどのように上から下に読み進めていくページ用に、逆順にリストを作くることでランキング形式のリストを簡単に作成することが可能になります。

reversed属性無しで逆順のリストを作成しようとすると、liタグで一つずつvalue属性を定義する必要があり、作成するのもメンテンナスするのも手間がかかってしまいます。

簡単に逆順リストが作成できる使い勝手の良いreversed属性を使ってみてはいかがでしょうか。