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

HTMLで小文字のアルファベットを使った順序付きリストを作成する方法

HTMLで順序付きリスト（番号付きリスト）を作成するには、<ol>タグを使用します。順序付きリストは<ol>タグで開始し、各リスト項目は<li>タグで定義されます。デフォルトでは、リスト項目には「1.」「2.」「3.」のような数字が割り当てられますが、type属性を指定することで、小文字・大文字のアルファベットやローマ数字など、さまざまな形式に変更できます。

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…）

小文字のアルファベットで番号付けされた順序付きリストを作成する場合は、<ol>タグにtype="a"を指定します。

サンプルコード

以下のコードを実行すると、リスト項目が小文字のアルファベット（a, b, c…）で番号付けされた順序付きリストが表示されます。

<!DOCTYPE html>
<html>
   <head>
      <title>World Cup Teams</title>
   </head>
   <body>
      <h1>ワールドカップ出場チーム一覧</h1>
      <ol type = "a">
         <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プロパティを使用する方法もあります。list-style-type: lower-alpha;を指定すれば、同じように小文字のアルファベットによる番号付けが可能です。

  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