構文

<ul>
  <li>・・・</li>
   ：
</ul>

説明文

　<ul>タグは，順序の無い項目をリスト上に記載するときに利用する。この際，各リスト項目の行頭には●や■などといった記号が付加される。

　<ul>タグで各項目を記述する際は，<li>タグを利用する。

　また，リストの中にさらに<ul>タグを挿入することでリストを階層化することも可能だ。

サンプル

HTMLソース

<ul>
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>
<ul type="circle">
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>
<ul style="list-style-type:square;">
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>
<ul>
  <li>Webブラウザ</li>
  <ul>
    <li>Internet Explorer</li>
    <li>Firefox</li>
  </ul>
  <li>メール・クライアント</li>
  <ul>
    <li>Windowsメール</li>
    <li>Thunderbird</li>
  </ul>
</ul>

ブラウザ表示例

  • Internet Explorer
  • Firefox
  • Internet Explorer
  • Firefox
  • Internet Explorer
  • Firefox
  • Webブラウザ
    • Internet Explorer
    • Firefox
  • メール・クライアント
    • Windowsメール
    • Thunderbird

対応状況

HTML IE Firefox Opera
4 strict 4 Transitional 5 6 7 2 3 8 9
○ ○ ○ ○ ○ ○ ○ ○ ○

要素，タグ

タグ要素 ブロック要素
包括可能要素 <li>（必須）
タグ記述条件 開始タグ：必須　終了タグ：必須

属性

重要な属性

属性 意味 対応
HTML 4s HTML 4t その他
compact リストの表示を行う際，なるべく狭い範囲に表示しようとする。ただし，多くのブラウザではこの属性を指定しても表示に変化はない × ○ 　
type=記号の種類 各リスト項目の前に付加する記号を指定する。「disk」を指定すると黒丸（●），「circle」を指定すると白丸（○），「square」を指定すると黒四角（■）記号を付加する × ○  

その他の属性

属性 意味 対応
HTML 4s HTML 4t その他
class=クラス名 このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　
dir=方向 タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　
id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　
lang=言語 タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　
style=スタイル タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　
title=タイトル タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する ○ ○ 　

マウスやキーボードの状況変化に関わる属性

属性 意味 対応
HTML 4s HTML 4t その他
onclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する ○ ○  
ondblclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する ○ ○  
onmousedown=スクリプト このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する ○ ○  
onmouseup=スクリプト このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する ○ ○  
onmouseover=スクリプト このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する ○ ○  
onmousemove=script このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する ○ ○  
onmouseout=スクリプト このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する ○ ○  
onkeypress=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する ○ ○  
onkeydown=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する ○ ○  
onkeyup=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する ○ ○  

スタイル・シートで記号を指定する

　各リストの行頭に付ける記号はtype属性で指定する。しかし，HTML 4 strictではtype属性を利用せずスタイル・シートの「list-style-type」で指定する。

<ul style="list-style-type:disc;">
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>

　また，リストのユーザー独自の画像を記号として利用することも可能です。この際は，スタイル・シートの「list-style-image」で画像を指定する。

<ul style="list-style-image: url(mark.gif);">
  <li>Internet Explorer</li>
  <li>Firefox</li>
</ul>

関連項目