<ul>順序なしリスト

<ul>タグは、順序に特別な意味がないリスト(unordered list)を表したい場合に使用します。 例えば、項目の順番を入れ替えても意味が変わらないようなリストを作る場合などです。

リストの各項目はli要素を使用し表示します。 一般的なブラウザでは、ul要素の各項目(li要素)は先頭に黒丸「・」が付き、インデント(字下げ)されて表示します。 表示方法を変えたい場合は、CSSなどで設定します。

また順序を入れ替えると意味が変わるようなリストを作成する場合は、<ol>タグを使用します。

HTML5での変更点

HTML5のul要素では、type属性とcompact属性が廃止されています。

type属性では項目の先頭につくリストマーカーの種類を指定することができましたが、HTML5では廃止されているので、代わりにCSSのlist-style-typeプロパティを使用して下さい。

書式

  • <ul 属性="値">~</ul> ……… 順番の関係ないリストを表示する

使用した時の例

<p>カレーの材料は次の通りです</p>
<ul>
<li>カレー粉</li>
<li>肉</li>
<li>じゃが芋</li>
<li>ニンジン</li>
</ul>

<ul>を<li>の子要素として配置する場合は次のように記述します。 またこの場合<ul>の上下のマージンがなくなります。

<ul>
<li>リスト1</li>
<li>リスト2
    <ul>
      <li>リスト2-1</li>
      <li>リスト2-2</li>
      <li>リスト2-3</li>
    </ul>
</li>
<li>リスト3</li>
</ul>

ブラウザ上の表示例

カレーの材料は次の通りです

  • カレー粉
  • じゃが芋
  • ニンジン
  • リスト1
  • リスト2
    • リスト2-1
    • リスト2-2
    • リスト2-3
  • リスト3

※入れ子にされたリストには異なるリストマーカーが表示されます。マーカーのデザインを変えたい場合はCSSを使用します

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

形式 <ul>~</ul> カテゴリ フローコンテンツ, パルパブルコンテンツ
親要素 フローコンテンツが期待される場所 子要素 0個以上のli要素
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~