<ul>: 順序なしリスト要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<ul>
は HTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。
試してみましょう
属性
この要素にはグローバル属性があります。
compact
非推奨;-
この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。
警告: この属性は非推奨になっているため、使用しないでください。代わりに CSS を使用してください。
compact
属性と同様の効果を得るには、 CSS のline-height
プロパティを用い、その値として80%
を指定します。 type
非推奨;-
リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。
circle
disc
square
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 Standard # the-ul-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
-
<ul>
要素の整形に有益な CSS プロパティ:list-style
プロパティ: 行頭記号の表示方法の変更- CSS カウンター: 複雑に入れ子になったリストの扱い
line-height
プロパティ: 非推奨のcompact
属性のシミュレートmargin
プロパティ: リストのインデントの制御