We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTML の <ul> 要素は、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。

コンテンツカテゴリー フローコンテンツ。また、 <ul> 要素の子に少なくとも 1 個 <li> 要素を包含する場合は、知覚可能コンテンツ
許可されている内容 0個以上の <li> 要素。その子孫としてさらに <ol> 要素や <ul> 要素を配置することも可能
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 フローコンテンツを受け入れるすべての要素
許可されている ARIA ロール directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM インターフェイス HTMLUListElement

属性

この要素にはグローバル属性があります。

compact
この論理属性はコンパクトなスタイルでリストをレンダリングするようブラウザに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。
使用上の注意: この属性は非推奨になっているため、使用しないでください。<ul> 要素の整形には CSS を用いてください。compact 属性を指定した場合と同様の視覚効果を得るには、 CSSline-height プロパティを用い、その値として 80% を指定します。
type
リストの行頭記号の形状を指定するために用います。以下の値は HTML3.2 および HTML 4.0/4.01 tranditional で定義されているものです。
  • circle
  • disc
  • square

4 つ目の行頭記号の形状として、 WebTV インターフェイスで triangle が定義されていますが、すべてのブラウザーが対応しているわけではありません。

この属性と CSSlist-style-type プロパティのいずれも指定されていない場合は、ユーザーエージェントがリストの入れ子階層に応じて使用する行頭記号の種類を変更します。

使用上の注意: この属性は非推奨なので使用しないでください。代替として CSSlist-style-type プロパティを使用してください。

使用上のメモ

  • <ul> 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS の list-style-type プロパティを用いて変更することが可能です。
  • <ol> 要素と <ul> 要素で定義されたリストの入れ子の階層の深さや交互に配置することの制限はありません。
  • <ol><ul> は、どちらも項目のリストを表します。両者の違いは、 <ol> 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば <ol> 要素を使用するべきであり、そうでなければ <ul> を使うことができます。

シンプルな例

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

次のように出力されます。

  • first item
  • second item
  • third item

入れ子になったリスト

<ul>
  <li>first item</li>
  <li>second item     
  <!-- 閉じタグの </li> がここにはありません。 -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
      <!-- 入れ子になった第二の順序なしリストでも同じです。 -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> <!-- 三番目の順序なしリストを含む li の
                  閉じタグ </li> です -->
      <li>second item third subitem</li>
    </ul>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

次のように出力されます。

  • first item
  • second item
    • second item first subitem
    • second item second subitem
      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem
    • second item third subitem
  • third item

<ul> と <ol> のネスト

<ul>
  <li>first item</li>
  <li>second item
  <!-- ここには <li> の閉じタグはない -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- ここに </li> を記述し、要素を閉じている -->
  </li>
  <li>third item</li>
</ul>

次のように出力されます。

  • first item
  • second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  • third item

仕様書

仕様書 状態 備考
HTML Living Standard
<ul> の定義
現行の標準  
HTML5
<ul> の定義
勧告  

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 あり あり1 あり あり あり
compact あり あり1 あり あり あり
type あり あり1 あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり4 あり あり あり
compact あり あり あり4 あり あり あり
type あり あり あり4 あり あり あり

関連情報

  • その他のリスト関連要素: <ol><li><menu><dir>
  • <ul> 要素の整形に便利な CSS プロパティ:
    • list-style プロパティは、行頭記号の表示方法の変更に使用可能です。
    • CSS カウンターは、複雑に入れ子になったリストを扱うのに便利です。
    • line-height プロパティは、非推奨の compact 属性をシミュレートするのに便利です。
    • margin プロパティは、リストのインデントの制御に便利です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, sys9kdr, ethertank
最終更新者: mfuji09,