HTML 順序付きリスト

はじめに

HTML では、<ol> タグを使用して順序付きリストを作成できます。順序付きリストは、特定の順序で番号付けされた項目のリストです。<ol> タグは順序付きリストを作成するために使用され、<li> タグはリスト内の各項目を定義するために使用されます。

注: index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70806{{"HTML 順序付きリスト"}} html/head_elems -.-> lab-70806{{"HTML 順序付きリスト"}} html/lists_desc -.-> lab-70806{{"HTML 順序付きリスト"}} html/doc_flow -.-> lab-70806{{"HTML 順序付きリスト"}} html/inter_elems -.-> lab-70806{{"HTML 順序付きリスト"}} end

HTML ファイルをセットアップする

このステップでは、基本的な HTML ファイルを作成し、<ol> タグをセットアップします。「index.html」ファイルを開き、次のコードを入力します。

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

リストにさらに項目を追加する

このステップでは、順序付きリストにさらに項目を追加します。これを行うには、開きと閉じの <ol> タグの間にさらに <li> タグを追加するだけです。

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

番号の種類を変更する

このステップでは、順序付きリストで使用される番号付けの種類を変更します。デフォルトでは、順序付きリストは 10 進数の番号付けを使用します。ただし、これをローマ数字やアルファベットなどの他の番号の種類に変更することができます。番号付けの種類を変更するには、<ol> タグの type 属性を使用します。たとえば：

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

上記のコードでは、type 属性を I に設定しています。これは大文字のローマ数字です。

特定の数字から番号付けを始める

このステップでは、順序付きリストの項目の最初の番号を変更します。デフォルトでは、順序付きリストの最初の項目は「1」から始まります。ただし、これを特定の数字から始めるように変更することができます。最初の番号を変更するには、<ol> タグの start 属性を使用します。たとえば：

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

上記のコードでは、start 属性を 3 に設定しています。これは、順序付きリストの最初の項目が「3」と番号付けされることを意味します。

まとめ

この実験では、<ol> タグを使用して HTML で順序付きリストを作成する方法を学びました。また、リストに項目を追加する方法、番号付けの種類を変更する方法、および特定の数字から番号付けを始める方法についても学びました。この知識を使えば、ウェブページに見栄えの良いリストを作成することができます。