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

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

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

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要素(タグ)一覧」に戻る