<UL>順序のないリスト

HTMLでは、箇条書き形式のテキストの事をリストと言います。リスト形式で表示させたい場合は、その部分全体を<UL>~</UL>で囲み、さらにリスト表示したい各項目を<li>~</li>で囲みます。

また<UL>タグ(Unordered List)は囲んだ範囲が順不同のリストであることを示しますので、項目の順序が重要でない箇条書きを表示したい場合に使用するようにしましょう。 順序のあるリストを表示したい場合は<OL>タグを利用しましょう。

なお<li>~</li>で囲む内容にはテキスト以外にも、インライン要素とブロックレベル要素を入れる事ができます。 またリストを入れ子にする事もできますので、<UL>や<OL>なども入れる事が可能です。

※リストを入れ子にしたい場合、階層に応じてリストがさらにインデントされる。また各項目の先頭に付くマークの種類も変更される。

一般的なブラウザでは、リスト全体がインデント(字下げ)して表示され、各項目の先頭に黒丸(・)が付いた状態で表示されます。 ですが環境によっては黒丸以外のもので代用される場合もあります。

ちなみに<UL>タグにtype属性を使う事により、各項目の先頭に付くマークを、黒丸(disc)、白丸(circle)、四角(square)の中から指定することができます。 また<li>タグにtype属性を使うと、項目ごとに上記のマークを指定することが可能です。

使用した時の例

<p>材料のリスト</p>
<ul type="disc">
  <li>ニンジン</li>
  <li>玉ねぎ</li>
  <li>じゃが芋</li>
  <li>黒毛和牛(A5)</li>
</ul>

<ul type="circle">
  <li>ニンジン</li>
  <li>玉ねぎ</li>
  <li>じゃが芋</li>
  <li>黒毛和牛(A5)</li>
</ul>

<ul type="square">
  <li>ニンジン</li>
  <li>玉ねぎ</li>
  <li>じゃが芋</li>
  <li>黒毛和牛(A5)</li>
</ul>

ブラウザ上の表示例

材料のリスト
  • ニンジン
  • 玉ねぎ
  • じゃが芋
  • 黒毛和牛(A5)
  • ニンジン
  • 玉ねぎ
  • じゃが芋
  • 黒毛和牛(A5)
  • ニンジン
  • 玉ねぎ
  • じゃが芋
  • 黒毛和牛(A5)

属性

type="disc" リスト項目先頭のマークの種類設定。記述しない場合はdisc(初期値)
  • disc・・・・黒丸
  • circle・・・・白丸
  • square・・・・四角
compact リストがコンパクトな状態で表示される

対応ブラウザなどのデータ

形式 <ul>~</ul> カテゴリ フローコンテンツ / パルパブルコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 li / script / template
開始タグ 必須 終了タグ 必須
分類 ブロックレベル要素
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer2~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5ではtype属性は廃止(ul要素)。代わりにスタイルシートのlist-style-typeでリストマークを指定できる。