ul 要素

HTML <ul> 要素は、順不���のアイテムを持つリストを表します。一般的に、ビュレットを伴うリストとして描画されます。

属性

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

compact

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

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

type

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

• circle
• disc
• square

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

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

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

使用上の注意

• <ul> 要素は、数的な順序がなく、その配置順に意味を持たないアイテムを持つリストを表します。子となるリストアイテムは基本的にドット、円形、四角形などのスタイルを持つビュレットを伴って描画されます。ビュレットのスタイルは CSS の list-style-type プロパティを用いて変更することが可能です。
• <ol> 要素と <ul> 要素で定義されたリストの入れ子の階層数や交互に配置することの制限はありません。
• <ol> 要素と <ul> 要素は、ともにアイテムのリストであることを表します。両者の違いは、<ol> 要素はそのアイテムの順序に意味を持つのに対し、<ul> 要素はそのアイテムの順序に序列、順列、順位など <ol> のセマンティクスを伴わない点です。

例

シンプルな例

<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
            <!-- 上記コメント部と同様に、次行から第 3 階層の順不同リストを配置します。-->
				<ul>
					<li>2 - 2 - 1</li>
					<li>2 - 2 - 2</li>
					<li>2 - 2 - 3</li>
				</ul>
			</li> <!-- ここで第 2 階層の 2 番目のリストアイテムを閉じています。 -->
			<li>2 - 3</li>
		</ul>
        <!-- ここで第 1 階層の 2 番目のリストアイテムを閉じています。 -->
    </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
    <!-- ここには <li> の閉じタグはない -->
		<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