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

HTMLでリストアイテムを追加する方法をわかりやすく解説

HTMLでリストアイテムを追加するには?

HTMLでは、<li>タグを使用してリスト項目を追加します。このタグは、順序付きリスト(<ol>)、順序なしリスト(<ul>)、ディレクトリリスト、メニューリストなど、さまざまな種類のリスト内で使用できます。

<li>タグは、以下の追加属性をサポートしています。

属性説明
type A
a
I
i
1
disc
square
circle
非推奨 − リストの種類(マーカーのスタイル)を指定します
value 数値 リスト項目の値を指定します

サンプルコード

以下のコードを実行すると、HTMLでリスト項目を追加する方法を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML li タグ</title>
   </head>
   <body>
      <p>ランキング</p>
      <ul>
         <li>インド</li>
         <li>オーストラリア</li>
         <li>南アフリカ</li>
      </ul>
   </body>
</html>

このコードでは、<ul>タグの中に<li>タグを3つ配置することで、「インド」「オーストラリア」「南アフリカ」という3つのリスト項目が箇条書きで表示されます。

補足:非推奨属性と現代的な代替方法

type属性はHTML5で非推奨となっています。現在のWeb制作では、CSSのlist-style-typeプロパティを使用してリストマーカーのスタイル(disc、square、circle、decimalなど)を指定するのが標準的な方法です。

また、順序付きリスト(<ol>)で開始番号を変更したい場合は、<ol>タグのstart属性を利用するとよいでしょう。

  1. HTMLのlist属性とは?datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素(入力欄)に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali

  2. Excelのドロップダウンリストに項目を追加する5つの方法

    ドロップダウンリストは、Microsoft Excelの非常に便利な機能の一つです。この機能を活用すれば、値を手入力することなく、あらかじめ用意されたリストから項目を選択できるため、不要なデータの入力を防ぐことができます。通常、ドロップダウンリストの項目は事前に定義されていますが、運用の中で新しい項目を追加したくなる場面も多いでしょう。この記事では、Excelでドロップダウンリストに項目を追加する方法を、5つのアプローチから詳しく解説します。 Excelのドロップダウンリストに項目を追加する5つの方法 ドロップダウンリストへの項目追加方法は、リストの作成方法によって異なります。ここでは、以下