ul要素

HTMLでは、順序なしでリストを表示することができます。

本ページでは、ul要素について説明します。

ul要素とは

ul要素は、順序なしリストと呼ばれます。リスト項目を示すli要素のコンテンツを、順序なし(記号付き)で表示します。

ulの定義は、以下のとおりです。

【ulの定義】
コンテンツカテゴリ フローコンテンツ認知可能コンテンツ(liが含まれている場合)
可能な親要素 フローコンテンツを包含できる要素
可能なコンテンツ li、スクリプトサポート要素
タグの省略 不可
DOMインターフェース HTMLUListElement

同じリストを示す要素にolがあります。olは、順序付きリストと呼ばれ、順序を変えると意味が変わったり、説明にならない時に使います。ulは、順序を変えても意味が変わらない時に使います。

利用例

以下は、ulを使ったHTMLの例です。

【ulの利用例】
<ul>
<li>りんご</li>
<li>みかん</li>
<li>バナナ</li>
</ul>

これをブラウザで表示すると、以下になります。

ブラウザの画面で、リストは先頭に黒丸付きで表示されています。

次は、ulをネストで利用する例です。

【ulをネストで利用する例】
<ul>
<li>りんご
  <ul>
  <li>王林</li>
  <li>ふじ</li>
  </ul>
</li>
<li>みかん
  <ul>
  <li>いよかん</li>
  <li>デコポン</li>
  </ul>
</li>
</ul>

liの子要素として、ulを記述する必要があります。

これをブラウザで表示すると、以下になります。

ブラウザの画面で、最初のリスト(黒丸付きでりんごと表示)の中に、左にインシデントがとられて白丸付きで王林とふじが表示されています。次のリスト(黒丸付きでみかんと表示)の中に、左にインシデントがとられて白丸付きでいよかんとデコポンが表示されています。

ol要素をネストにすることもできます。

属性

グローバル属性が使えます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
ul
【スマートフォン】
項目 Sa An Op Ch Fx Sm
ul
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「HTMLへのリスト項目挿入と装飾

HTML要素(タグ)一覧」に戻る