ul要素とは

<ul>要素は、unordered listの略で順不同型リストを表す要素です。項目の順序に意味を持たない箇条書きに使います。なお、箇条書きの各項目は、<li>要素を使って表します。

意味・役割
順不同型リストを表す要素。
利用できるバージョン(HTML4.01以降)
全てのバージョン
コンテンツ・カテゴリ
フロー・コンテンツ
子要素に1つ以上の<li>要素がある場合は、パルパブル・コンテンツ
(HTML5より前:ブロックレベル要素
コンテンツ・モデル(梱包できる要素)
0個以上の<li>要素
この要素を配置できる親要素
フロー・コンテンツを配置できる要素

ul要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

compact属性 廃止

リストをコンパクトな表示にする属性です。HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの line-height プロパティで、"80%"または、"0.8"と指定しましょう。

属性値
"compact": コンパクトに表示
利用できるバージョン(HTML4.01以降)
HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
使用例
<ul compact="compact">

type属性 廃止

箇条書きの行頭記号の種類を指定する属性です。この属性は視覚的な表現を行う属性でHTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの list-style-type プロパティで行うようにしましょう。

属性値
  • "circle": 円
  • "disc": 黒丸
  • "square": 四角
利用できるバージョン(HTML4.01以降)
HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
使用例
<ul type="square">リスト項目</ul>

ul要素のサンプル

基本的な順不同型リストの例

基本的な順不同型リストの例
<ul>
  <li>鳥モモ肉</li>
  <li>しょうが</li>
  <li>にんにく</li>
  <li>しょうゆ</li>
  <li>片栗粉</li>
  <li>揚げ油</li>
</ul>
ブラウザでの表示例

RERUN

入れ子構造の順不同型リストの例

入れ子構造の順不同型リストの例
<ul>
  <li>鳥モモ肉</li>
  <li>タレ
    <ul>
      <li>しょうが</li>
      <li>にんにく</li>
      <li>しょうゆ</li>
    </ul>
  </li>
  <li>片栗粉</li>
  <li>揚げ油</li>
</ul>
ブラウザでの表示例

RERUN

仕様

HTML5.1
4.4.6. The ul element
HTML5
4.4.6 The ul element
HTML4.01
10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)

関連する要素

関連するレッスン