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

HTMLでリストを降順（9、8、7、6、5…）に表示する方法｜reversed属性の使い方

HTMLでは、reversed属性を使用することで、順序付きリストの番号を降順（9、8、7、6、5…）で表示するように指定できます。

reversed属性とは

<ol>要素にreversed属性を追加するだけで、リスト項目の番号が自動的に逆順になります。値を指定する必要はなく、属性名を記述するだけで動作します。ランキングやカウントダウンなど、番号が大きい方から小さい方へ進むリストを作りたい場合に便利です。

サンプルコード

以下のコードを実行して、reversed属性の実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
   <h3>Cricketers List</h3>
      <ol reversed>
         <li>Amit</li>
         <li>Amal</li>
         <li>Rahul</li>
         <li>Virat</li>
      </ol>
   </body>
</html>

表示結果

このコードをブラウザで開くと、リストには次のように4から1へと降順で番号が振られます。

4. Amit
3. Amal
2. Rahul
1. Virat

なお、start属性と組み合わせれば、開始番号を任意の数値に変更することも可能です。例えば「<ol reversed start="10">」と指定すれば、10、9、8…という形でカウントダウン形式のリストを作成できます。

  1. HTMLでテーブルセルがまたがる行数を設定する方法（rowspan属性の使い方）

    HTMLのテーブルでセルがまたがる行数を設定するには、rowspan属性を使用します。また、HTMLでセルを結合する場合には、colspan属性とrowspan属性を組み合わせて使います。 それぞれの属性の役割は以下のとおりです。 rowspan属性：セルが縦方向にまたがる行数を指定します。 colspan属性：セルが横方向にまたがる列数を指定します。 たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを占め、下の行の同じ位置にセルを記述する必要がなくなります。 コード例 以下の例では、1行目の見出しセルでcolspan=2により2列分を結合し、2行目のデータセルでrows

  2. HTMLのtranslate属性で要素のコンテンツを翻訳するかどうかを指定する方法

    HTMLのtranslate属性とはHTMLのtranslate属性を使用すると、その要素のコンテンツを翻訳するかどうかを指定できます。Google翻訳などの機械翻訳ツールでページを翻訳する際に、ブランド名、固有名詞、コードなど、翻訳してほしくない部分を除外したい場合に特に便利な属性です。translate属性に指定できる値translate属性には、以下の2つの値を指定できます。属性値説明yesコンテンツを翻訳します。noコンテンツを翻訳しません。特定のテキストを翻訳対象から除外する方法特定の単語やフレーズを翻訳されたくない場合は、その要素のtranslate属性に「no」を指定します。&l