ul 要素

概要

HTML の順不同リスト 要素（<ul>）は、その配置順に意味を持たないアイテムを持つリストを表します。子となるリストアイテムは基本的にドット、円形、四角形 などのスタイルを持つビュレットを伴って描画されます。係るスタイルは CSS の list-style-type プロパティを用いて変更する事が可能です。

<ol> 要素及び <ul> 要素で定義されるリストの入れ子階層の深さとアイテム数に制限はありません。

使用可能な場所

属性

他の全ての HTML 要素と同様にグローバル属性を持ちます。

compact

この論理属性はコンパクトなスタイルでリストをレンダリングするようブラウザに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、また全てのブラウザで動作するものでもありません。

使用上の注意: この属性は既に廃止されている為、使用しないで下さい。<ul> 要素の整形には CSS を用いましょう。compact 属性を指定した場合と同様の視覚効果を得るには、line-height を用い、これの値として 80% 或いは 0.8を指定します。

type

リストのビュレットの形状を指定する為に用います。以下の値は HTML3.2 及び HTML 4.0/4.01 トランディショナル で定義されているものです。

• circle
• disc
• square

四つ目のビュレット形状として、"triangle" が WebTV インターフェースで定義されていますが、これを解するブラウザは存在しません。

この属性と CSS の list-style-type プロパティの何れも指定されていない場合は、ユーザーエージェントが定める「入れ子階層に応じてビュレットの種類を変えるスタイル」が適用されます。

使用上の注意: この属性は既に廃止されている為、使用しないで下さい。代替として CSS の list-style-type プロパティを用います。

DOM インターフェース

この要素は HTMLUListElement インターフェイスを提供します。

例

シンプルな例

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

次の様に出力されます。

• first item
• second item
• third item

入れ子状に配置されたリスト

<ul>
	<li>1st item</li>
	<li>2nd item  <!-- ※li 要素のタグをここで閉じていない事に注目して下さい。次の行から第二階層のリストとなります。 -->
		<ul>
			<li>2 - 1</li>
			<li>2 - 2  <!-- 上記コメント部と同様に、次行から第三階層の順不同リストを配置します。-->
				<ul>
					<li>2 - 2 - 1</li>
					<li>2 - 2 - 2</li>
					<li>2 - 2 - 3</li>
				</ul>
			</li>      <!-- ここで第二階層の二番目のリストアイテムを閉じています。 -->
			<li>2 - 3</li>
		</ul>
	</li>         <!-- ここで第一階層の二番目のリストアイテムを閉じています。 -->
	<li>3rd item</li>
</ul>

次の様に出力されます。

• 1st item
• 2nd item
  • 2 - 1
  • 2 - 2
    • 2 - 2 - 1
    • 2 - 2 - 2
    • 2 - 2 - 3
  • 2 - 3
• 3rd item

<ul> と <ol> のネスト

<ul>
	<li>1st item</li>
	<li>2nd item      <!-- ここには閉じタグはない -->
		<ol>
			<li>2nd item 1st subitem</li>
			<li>2nd item 2nd subitem</li>
			<li>2nd item 3rd subitem</li>
		</ol>
	</li>             <!-- ここに </li> を記述し、要素を閉じている -->
	<li>3rd item</li>
</ul>

次の様に出力されます。

• 1st item
• 2nd item
  1. 2nd item 1st subitem
  2. 2nd item 2nd subitem
  3. 2nd item 3rd subitem
• 3rd item

関連情報

• その他のリスト関連要素: <ol>、<li>、<menu>、<dir>
• <ul> 要素のスタイリングに便利な CSS プロパティ:
  • ビュレットのスタイル変更、マーカーへの変更に使用可能な list-style
  • 複雑な入れ子リストの扱いに便利な CSS counter
  • 非推奨の compact 属性の代替となり得る line-height
  • リスト全体のインデント制御の為に使用可能な margin
  • 現状、細やかな制御が出来ない list-style-image の代替として用いられることの多い background-image