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

HTMLのol要素「reversed属性」とは？リストを逆順（降順）で表示する方法

HTMLの<ol>要素に用意されているreversed属性は、番号付きリスト（順序付きリスト）の項目を逆順に表示するための属性です。通常、<ol>要素のリストには1、2、3…と昇順で番号が振られますが、reversed属性を指定すると、番号が降順（大きい数字から小さい数字へ）で表示されます。

このreversed属性は、HTML5で新たに導入されたものです。ランキング形式のコンテンツや、「10位から1位へ」といったカウントダウン表示などに活用すると便利です。

基本構文

reversed属性はブール型属性のため、値を指定する必要はありません。開始タグにそのまま記述するだけで機能します。

<ol reversed>

使用例

それでは、<ol>要素のreversed属性を使った具体的なサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>降順でのランキング表示</h2>
<ol reversed>
    <li>Tom</li>
    <li>Jack</li>
    <li>Will</li>
    <li>Harry</li>
    <li>Tim</li>
    <li>Steve</li>
    <li>David</li>
    <li>Kane</li>
    <li>William</li>
    <li>John</li>
</ol>
</body>
</html>

出力結果

<ol reversed>と指定することで、リストには「10、9、8…」というように降順の番号が自動的に振られます。

上記の例では、まず<li>要素を使って次のようなリスト項目を定義しています。

<li>Tom</li>
<li>Jack</li>
<li>Will</li>
<li>Harry</li>
<li>Tim</li>
<li>Steve</li>
<li>David</li>
<li>Kane</li>
<li>William</li>
<li>John</li>

これらの項目を<ol>要素で囲むことで、番号付きの順序付きリストになります。さらにリストを逆順（降順）で表示したい場合は、開始タグにreversed属性を追加するだけです。

<ol reversed>
<li>Tom</li>
<li>Jack</li>
<li>Will</li>
<li>Harry</li>
<li>Tim</li>
<li>Steve</li>
<li>David</li>
<li>Kane</li>
<li>William</li>
<li>John</li>
</ol>

まとめ

reversed属性を使えば、JavaScriptなどを使わずにHTMLだけで簡単にカウントダウン形式のリストを作成できます。主要なブラウザすべてでサポートされているため、ランキングページや順位表など、降順表示が必要な場面でぜひ活用してみてください。

  1. HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

    HTML DOMのnextSiblingプロパティは、指定した要素ノードの直後に隣接するノードを返します。戻り値はNodeオブジェクトで、該当するノードが存在しない場合はnullが返されます。nextSiblingプロパティの注意点このプロパティは、テキストノードやコメントノードを無視しません。HTMLソース内で要素と要素の間に改行やスペースがあると、それらはテキストノードとして扱われるため、nextSiblingが要素ノードではなくテキストノードを返すことがあります。要素ノードだけを確実に取得したい場合は、要素ノードのみを対象とするnextElementSiblingプロパティを使用するのが

  2. HTML DOMのnextElementSiblingプロパティとは？使い方とサンプルコードを解説

    nextElementSiblingプロパティとは HTML DOMのnextElementSiblingプロパティは、指定した要素ノードの直後に隣接している要素ノード（次の兄弟要素）を返します。 注意：このプロパティは、テキストノードやコメントノードを無視し、要素ノードのみを対象とします。HTMLソース内の空白や改行によるテキストノードの影響を受けずに、確実に次の要素を取得できるのが特徴です。なお、次の兄弟要素が存在しない場合は null が返されます。 構文 nextElementSiblingノードを取得するための構文は以下の通りです。 nodeList.nextElementSibl