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

HTMLで順序なしリスト(ul)を追加する方法をわかりやすく解説

HTMLで順序なしリスト(箇条書き)を作成するには、<ul>タグを使用します。<ul>は「Unordered List」の略で、項目の並び順に特別な意味がないリストを表現する際に使われます。各項目は<li>タグで囲んで記述します。

ulタグで使用できる主な属性

<ul>タグには、かつて以下のような追加属性が用意されていました。

属性説明
type disc
circle
square
非推奨 ― 箇条書きマーカー(ブレット)のスタイルを指定します。
compact compact 非推奨 ― リストをコンパクトに(詰めて)表示する必要があるかどうかを定義します。

※これらの属性は現在のHTML5では廃止されています。マーカーの種類を変更したい場合は、CSSのlist-style-typeプロパティを使用するのが標準的な方法です。

コード例

以下のコードを実行すると、順序なしリストがどのように表示されるかを確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML ul Tag</title>
   </head>
   <body>
      <p>国名一覧</p>
      <ul>
         <li>アメリカ</li>
         <li>イギリス</li>
         <li>インド</li>
         <li>オーストラリア</li>
         <li>バングラデシュ</li>
      </ul>
   </body>
</html>

このコードをブラウザで開くと、各国名が黒丸(disc)のマーカー付き箇条書きとして縦に並んで表示されます。手軽に箇条書きリストを作成できるので、メニューや項目の一覧など、さまざまな場面で活用できます。

  1. HTMLで黒丸(disc)の箇条書きを使った番号なしリストを作成する方法

    HTMLで番号なしリストを作成する基本 HTMLで番号なしリスト(順序付けされていないリスト)を作成するには、<ul>タグを使用します。リスト全体は<ul>タグで開始し、各項目は<li>タグで囲みます。項目の先頭には黒丸(disc)、白抜きの円(circle)、四角(square)などのマーカーが表示され、デフォルトでは小さな黒い円(disc)が使われます。 list-style-typeプロパティでマーカーを指定する 黒丸(disc)の箇条書きを持つ番号なしリストを作成するには、CSSのlist-style-typeプロパティを使用します。ここではstyl

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

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