このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<ul>: 順序なしリスト要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<ul> はHTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。
試してみましょう
<ul> <li>Milk</li> <li> Cheese <ul> <li>Blue cheese</li> <li>Feta</li> </ul> </li></ul>li { list-style-type: circle;}li li { list-style-type: square;}属性
この要素にはグローバル属性があります。
compact非推奨;非標準この論理属性は、リストをコンパクトなスタイルで表示することを指示します。この属性の解釈はブラウザーによって異なります。代わりにCSS を使用してください。
compact属性と同様の効果を得るには、CSS のline-heightプロパティに値80%を指定します。type非推奨;リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。
circlediscsquare
4 つ目の行頭記号の形状として、WebTV インターフェイスで
triangleが定義されていますが、すべてのブラウザーが対応しているわけではありません。この属性が存在せず、CSS の
list-style-typeプロパティがその要素に適用されていない場合は、ユーザーエージェントが行頭記号の種類を、リストの入れ子階層に応じて選択します。警告:この属性は非推奨なので使用しないでください。代替としてCSS の
list-style-typeプロパティを使用してください。
使用上のメモ
<ul>要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS のlist-style-typeプロパティを用いて変更することが可能です。<ul>要素と<ol>要素は、必要なだけ深く入れ子にすることができます。さらに言えば、入れ子になったリストが<ol>と<ul>の間で変化することに制限はありません。<ol>と<ul>は、どちらも項目のリストを表します。両者の違いは、<ol>要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば<ol>要素を使用し、そうでない場合は<ul>要素を使用することができます。
例
基本的な例
<ul> <li>first item</li> <li>second item</li> <li>third item</li></ul>結果
入れ子になったリスト
<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> <!-- ここに閉じタグ </li> --> </li> <li>third item</li></ul>次のように出力されます。
<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>次のように出力されます。
技術的概要
| コンテンツカテゴリー | フローコンテンツ。また、<ul> 要素の子に少なくとも 1 個<li> 要素を包含する場合は、知覚可能コンテンツ。 |
|---|---|
| 許可されている内容 | 0個以上の<li>,<script>,<template> 要素。 |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | list |
| 許可されている ARIA ロール | directory,group,listbox,menu,menubar,none,presentation,radiogroup,tablist,toolbar,tree |
| DOM インターフェイス | HTMLUListElement |
仕様書
| Specification |
|---|
| HTML # the-ul-element |
ブラウザーの互換性
関連情報
- その他のリスト関連要素:
<ol>,<li>,<menu> <ul>要素の整形に有益な CSS プロパティ:list-styleプロパティ: 行頭記号の表示方法の変更- CSS カウンター: 複雑に入れ子になったリストの扱い
line-heightプロパティ: 非推奨のcompact属性のシミュレートmarginプロパティ: リストのインデントの制御