HTML <ul>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

順序付けられていないHTMLリスト：

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

タグは、順序付けされ<ul>ていない（箇条書きの）リストを定義します。

このタグを<li><ul>タグと一緒に使用して、順序付けされていないリストを作成します。

ヒント： CSSを使用してリストのスタイルを設定します。

ヒント：順序付きリストの場合は、<ol> タグを使用します。

ブラウザのサポート

Element
<ul>	Yes	Yes	Yes	Yes	Yes

グローバル属性

この<ul>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<ul>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

さまざまなリストスタイルタイプを設定します（CSSを使用）。

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

例

リストの行の高さを拡大および縮小します（CSSを使用）。

<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

例

リスト（ネストされたリスト）内にリストを作成します。

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

例

より複雑なネストされたリストを作成します。

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
</li>
<li>Milk</li>
</ul>

デフォルトのCSS設定

ほとんどのブラウザは<ul>、次のデフォルト値で要素を表示します。

例

ul {
  display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}