HTML <ul> タグ

  • 前のページ <u>
  • 次のページ <var>

コース推薦：

<ul> 定義と使用方法

以下のタグを使用して無序列表（アイテム記号付き）を定義してください。 <ul> タグと<li>タグを使用して無序列表を作成してください。

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

ヒント：順序付きリストには、以下を使用してください： <ol>タグ。

参照もどうぞ：

HTMLトレーニング：HTML リスト

HTML DOMリファレンスマニュアル：Ulオブジェクト

CSSトレーニング：リストのスタイルを設定する

インスタンス

例 1

無序列表のHTMLリスト：

<ul>
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 2

異なるリストスタイルタイプを設定する（CSSを使用）：

<ul style="list-style-type:circle">
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>
<ul style="list-style-type:disc">
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>
<ul style="list-style-type:square">
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 3

リスト内で行高を拡大および縮小する（CSSを使用）：

<ul style="line-height:180%">
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>
<ul style="line-height:80%">
  <li>コーヒー</li>
  <li>茶</li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 4

リスト内に別のリスト（ネストリスト）を作成する：

<ul>
  <li>コーヒー</li>
  <li>茶
    <ul>
      <li>プエルヘ茶</li>
      <li>緑茶</li>
    </ul>
  </li>
  <li>ミルク</li>
</ul>

自分で試してみる

例 5

より複雑なネストリストを作成する：

<ul>
  <li>コーヒー</li>
  <li>茶
    <ul>
      <li>プエルヘ茶</li>
      <li>緑茶
        <ul>
          <li>碧螺春</li>
          <li>龍井</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>ミルク</li>
</ul>

自分で試してみる

グローバル属性

<ul> タグは以下のイベント属性をサポートしています HTMLでのグローバル属性。

イベント属性

<ul> タグは以下のイベント属性をサポートしています HTMLでのイベント属性。

デフォルトの 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;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート
  • 前のページ <u>
  • 次のページ <var>