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

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

HTMLのreversed属性は、<ol>（順序付きリスト）要素に指定することで、リスト項目の番号を降順（大きい数字から小さい数字へ）で表示させるためのブール型属性です。通常、順序付きリストは「1」から始まる昇順で番号が振られますが、reversed属性を追加するだけで、マークアップをほとんど変更せずに逆順のリストを簡単に作成できます。

構文

reversed属性の基本的な構文は以下のとおりです。

<ol reversed></ol>

値を指定する必要はなく、属性名だけを記述すれば有効になります。それでは、実際にreversed属性を使用した具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML reversed デモ</h1>
<p>科目一覧：</p>
<ol reversed>
<li>物理</li>
<li>化学</li>
<li>数学</li>
<li>生物</li>
<li>経済学</li>
</ol>
</body>
</html>

出力結果

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

上記のコードを実行すると、リストには「5、4、3、2、1」というように番号が降順で表示されます。このように、ランキングやカウントダウン形式のコンテンツなど、逆順の番号付けが必要な場面でreversed属性は非常に便利です。なお、reversed属性は主要なモダンブラウザすべてでサポートされています。

  1. HTMLのwrap属性とは？textareaのテキスト折り返し設定を解説

    wrap属性とは HTMLのwrap属性は、<textarea>要素内のテキストを、フォーム送信時にどのように折り返すかを定義する属性です。画面上での見た目だけでなく、サーバーへ送信されるデータに改行コードを含めるかどうかを制御できる点が特徴です。 指定できる値 soft：画面上では自動的に折り返して表示されますが、送信されるテキストには改行コードが挿入されません（デフォルト値）。 hard：画面上の折り返し位置に基づいて、フォーム送信時に改行コードが挿入されます。この値を使用する場合はcols属性の指定が必須です。 構文 wrap属性の基本的な書き方は以下のとおりです。

  2. HTMLのdraggable属性とは？使い方とサンプルコードを解説

    HTMLのdraggable属性とはHTML DOMのdraggable属性は、要素がドラッグ可能かどうかを示す真偽値（boolean）を取得・設定するための属性です。この属性を活用することで、ドラッグ＆ドロップ操作に対応したインタラクティブなWebページを簡単に実装できます。注意：リンク（<a>タグ）や画像（<img>タグ）は、デフォルトでドラッグ可能に設定されています。draggable属性に指定できる値true … 要素をドラッグ可能にするfalse … 要素をドラッグ不可にするauto … ブラウザのデフォルト動作に従うHTML draggable属性の使用例以