ul 要素順不同リストを表す

ul 要素は順不同リストを表します。順不同リストとは、項目の順序に意味ががない、箇条書きのことです。

例えば、イベント参加に必要な条件 (各条件の前後関係は問わない) を箇条書きにしたり、旅行に持っていく物をリストアップしたりといった場合などが当てはまります。

ul 要素の仕様

カテゴリ

子要素として 1個以上の li 要素を持つ場合はパルパブル・コンテンツ

コンテンツモデル
  • 0個以上の li 要素、およびスクリプト支援要素
この要素を使用できる文脈

フロー・コンテンツが期待される場所

この要素で使用できる属性

詳細説明

ul 要素の入れ子

ul 要素のコンテンツモデルは、0個以上の li 要素となります。つまり、li 要素以外を直接の子要素とすることはできませんので、ul 要素を入れ子にする場合でも、ul 要素の直下に別の ul 要素を置くことはできません。必ず、li 要素の子要素として使用する必要があります。詳しくはサンプルソースをご覧ください。

ul 要素のサンプルソース

<p>
 使用する材料は下記の通りです。
</p>
<ul>
 <li>小麦粉 (10グラム)</li>
 <li>塩 (小さじ1)</li>
 <li>砂糖 (大さじ1)</li>
 <li>醤油 (小さじ1)</li>
</ul>
<ul>
 <li>明日の天気が晴れの場合
  <ul>
   <li>プールで泳ぐ</li>
   <li>潮干狩り</li>
   <li>草サッカーの試合</li>
   <li>ピクニック</li>
  </ul>
 </li>
 <li>明日の天気が雨の場合
  <ul>
   <li>家で寝る</li>
   <li>体育館でバスケットボール</li>
   <li>映画鑑賞</li>
  </ul>
 </li>
</ul>
<!-- 序列リストと組み合わせた例 -->
<ol>
 <li>品川駅に集合します</li>
 <li>品川駅を出発し、大崎駅に向かいます</li>
 <li>大崎駅到着後、下記の物をお渡しします
  <ul>
   <li>お弁当</li>
   <li>お茶</li>
   <li>お手ふき</li>
   <li>お菓子</li>
  </ul>
 </li>
</ol>

主要ブラウザの対応

IE11
Edge(EdgeHTML)
Edge(Chromium)
Chrome
Firefox
Safari
iOS Safari
Android Chrome

仕様書の該当箇所

4.4.6 The ul element

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ