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

HTMLで数字付きの順序リスト（番号付きリスト）を作成する方法をわかりやすく解説

HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。リスト全体を<ol>タグで囲み、各リスト項目は<li>タグで記述します。項目の先頭には、数字・小文字のアルファベット・大文字のアルファベット・ローマ数字などのマーカーが付けられ、何も指定しない場合はデフォルトで数字が表示されます。

type属性で数字の番号を指定する

数字で番号付けされた順序付きリストを作成するには、<ol>タグにtype属性を追加し、値として「1」を指定します。つまり、<ol type="1">と記述することで、1、2、3…というアラビア数字で番号付けされたリストが作成できます。

なお、type属性に指定できる主な値は以下のとおりです。

  • type="1"：数字（1、2、3…）※デフォルト
  • type="a"：小文字のアルファベット（a、b、c…）
  • type="A"：大文字のアルファベット（A、B、C…）
  • type="i"：小文字のローマ数字（i、ii、iii…）
  • type="I"：大文字のローマ数字（I、II、III…）

サンプルコード

以下のコードを実行すると、数字で番号付けされた順序付きリストがブラウザに表示されます。

<!DOCTYPE html>
<html>
  <head>
    <title>ワールドカップ出場チーム</title>
  </head>
  <body>
    <h1>ワールドカップ出場チーム一覧</h1>
    <ol type = "1">
      <li>インド</li>
      <li>オーストラリア</li>
      <li>南アフリカ</li>
      <li>ニュージーランド</li>
      <li>パキスタン</li>
      <li>スリランカ</li>
      <li>西インド諸島</li>
      <li>バングラデシュ</li>
    </ol>
  </body>
</html>

補足：CSSを使った番号のスタイル指定

HTML5以降では、type属性の代わりにCSSのlist-style-typeプロパティで番号の形式を指定する方法が推奨されています。例えば、<ol style="list-style-type: decimal;">のように記述すれば、HTMLとデザインの分離ができ、より保守しやすいコードになります。ただし、簡単なリストを作成する場合は、type属性でも同様の結果が得られます。

  1. HTMLでファイルアップロードボタンを作成する方法をわかりやすく解説

    HTMLでファイルアップロードボタンを作成するには、<input>要素のtype属性に「file」を指定します。これにより、ユーザーが自分のPCやスマートフォンからファイルを選択してアップロードできるボタンが簡単に設置できます。 コード例 <!DOCTYPE html> <html> <head> <title>ファイルアップロードボタンの例</title> </head> <body> <h1>ファイルアップロードボタンの例</h1> <p>「ファイルを選択」ボ

  2. HTMLでダウンロードリンクを作成する方法をわかりやすく解説

    HTMLでダウンロードリンクを作成するには、<a>タグにdownload属性を追加します。この属性を指定すると、リンク先のファイルがブラウザで開かれる代わりに、クリックした時点でダウンロードされるようになります。コード例以下は、画像をクリックするとその画像ファイルがダウンロードされるサンプルコードです。<!DOCTYPE html> <html> <body> <h1>Download Link example</h1> <a href="https://i.picsum.photos/id/225/800