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

HTMLで順序付きリスト（番号付きリスト）を作成する方法

HTMLの <ol> タグは、順序付きリスト（番号付きリスト）を作成するために使用します。各リスト項目は <li> タグで定義し、ブラウザ上には先頭に番号が付いた形で表示されます。手順やランキングなど、項目の並び順に意味があるコンテンツに適しています。

<ol>タグで利用できる主な属性

<ol> タグでは、以下の属性を使ってリストの表示方法を細かく制御できます。

属性値説明
compactcompactリストをコンパクトに表示することを指定します（現在は非推奨の属性です）。
reversedreversedリストの順序を降順（大きい番号から小さい番号へ）に指定します。
start数値リストの開始番号を指定します。
typeA
a
I
i
1		リストの番号スタイルを指定します。英大文字（A）、英小文字（a）、ローマ数字大文字（I）、ローマ数字小文字（i）、算用数字（1）から選択できます。

使用例

以下のコードを実行すると、<ol> タグを使った順序付きリストがどのように表示されるかを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML ol Tag</title>
   </head>
   <body>
      <p>プログラミング言語：</p>
      <ol>
         <li>Java</li>
         <li>C++</li>
         <li>C</li>
      </ol>
   </body>
</html>

このコードをブラウザで表示すると、「1. Java」「2. C++」「3. C」というように、各項目の先頭に自動的に番号が付けられたリストが出力されます。番号はHTML側で手動入力する必要がないため、項目の追加や削除を行っても番号が自動的に振り直されるのが大きなメリットです。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

    HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。 Ol要素の作成方法 JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。 var olObject = document.createElement(OL) ここで作成した「olObject」は、以下のプロパティを持っています。 プロパティ説明 reversedリストの順序を降順にするか、昇順（デフォル