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

HTMLで大文字ローマ数字を使った順序付きリストを作成する方法

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

type属性で大文字ローマ数字を指定する

大文字のローマ数字（I、II、III…）で番号付けされた順序付きリストを作成するには、<ol>タグにtype属性を指定します。<ol type="I">のように「I」を設定することで、リスト項目に大文字ローマ数字が割り当てられます。

type属性に指定できる主な値

  • 1 … 数字（デフォルト）
  • a … 小文字のアルファベット
  • A … 大文字のアルファベット
  • i … 小文字のローマ数字
  • I … 大文字のローマ数字

サンプルコード

以下のコードを実行すると、大文字ローマ数字で番号付けされた順序付きリストをHTMLで作成できます。

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

表示結果

このコードをブラウザで開くと、次のように大文字ローマ数字で番号付けされたリストが表示されます。

I. インド
II. オーストラリア
III. 南アフリカ
IV. ニュージーランド
V. パキスタン
VI. スリランカ
VII. 西インド諸島
VIII. バングラデシュ

補足：CSSを使った方法（HTML5ではこちらが推奨）

HTML5ではtype属性の代わりに、CSSのlist-style-typeプロパティを使う方法が推奨されています。以下のように指定すると、同じく大文字ローマ数字のリストになります。

<style>
  ol {
    list-style-type: upper-roman;
  }
</style>

用途に応じてtype属性とCSSを使い分けることで、柔軟にリストの見た目をコントロールできます。

  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