ul 要素

by 3 contributors:

概要

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

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

使用上の注意: <ol> 要素と <ul> 要素は、ともにアイテムのリストで有る事を表します。両者の違いは、<ol> 要素はそのアイテムの順序に意味を持つのに対し、<ul> 要素はそのアイテムの順序に序列、順列、順位など<ol> のセマンティクスを伴わない点です。

使用可能な場所

コンテンツカテゴリ フロー・コンテンツ
許可された内容 0 個以上の <li> 要素。
※li 要素の子孫要素として更に <ol> 要素 <ul> 要素を配置する事も可能
タグの省略 不可。開始タグ終了タグの両方が必要です。
許可された親要素 フロー・コンテンツを受け入れる全ての要素
標準文書 HTML5, section 4.5.6 (HTML4.01, section 10.2)

属性

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

compact
この論理属性はコンパクトなスタイルでリストをレンダリングするようブラウザに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、また全てのブラウザで動作するものでもありません。
使用上の注意: この属性は既に廃止されている為、使用しないで下さい。<ul> 要素の整形には CSS を用いましょう。compact 属性を指定した場合と同様の視覚効果を得るには、line-height を用い、これの値として 80% 或いは 0.8を指定します。
type
リストのビュレットの形状を指定する為に用います。以下の値は HTML3.2 及び HTML 4.0/4.01 トランディショナル で定義されているものです。
  • circle
  • disc
  • square

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

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

使用上の注意: この属性は既に廃止されている為、使用しないで下さい。代替として CSSlist-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

ドキュメントのタグと貢献者

Contributors to this page: yyss, sys9kdr, ethertank
最終更新者: yyss,