nextup previousindex
Next:4.10 ブロックテキスト Up:4. HTMLの骨格 Previous:4.8 コメント

4.9 リスト環境

HTMLの箇条書き(リスト)を使うと、自動連番や見やすい項目表現などができます。

dirdlmenuolulの5つが用意されています。

dir [Transitional]
<dir attributes...>〜</dir>は、ディレクトリリストを作成します。

リストのそれぞれはliタグに続けて記述します。

このタグ環境は推奨されていません。

代わりにulタグを使うよう推奨されています。

 attributesには次のものが入ります。

<dir>タグとは、ディレクトリリストなどファイルの一覧を表示するために用意されたタグですが、現在では使用が推奨されていないため、注意が必要です。

似たタグに<menu>タグがあります。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
dl [Strict] [Transitional]
<dl atrributes ...>〜</dl>は、項目と説明がセットになった説明付きリストを作成します。

リストの項目はdtタグを使って表現します。

その説明はddタグを使って表現します。

dtタグとddタグの数は一致していなくてもかまいません。

どちらかを省略することも可能です。

 attributesには次のようなものが入ります。

<dl>タグとは、定義リストを定義するためのタグです。

定義リスト内の項目は、用語とその用語の説明や定義で構成されます。

一般的なブラウザでは、用語の説明や定義は用語の次行にインデントされて表示されます。

<dl compact = "***">とは、<dl>タグにcompact属性を指定したもので、定義リストをよりコンパクトに表示するためのものです。

ただし用語が短いときにのみ有効で、またブラウザにより表示が異なる上に、推奨されていない属性となっているため、使わないようにした方が良いでしょう。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title

dtタグ、ddタグの説明は次のとおりです。

dt [Strict] [Transitional]
<dt attributes...>〜[</dt>]の形で、説明付きリストの項目を指定します。

 attributresには次のようなものが入ります。

<dt>タグとは、定義リスト内の用語部分を定義するためのタグです。

このタグは定義リスト(<dl>タグ)内のみで有効で、用語の定義・説明(<dd>タグ)の前に記述されます。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
dd [Strict] [Transitional]
<dd attributes...>〜[</dd>]の形で、説明付きリストの説明部分を指定します。

 attributesdtタグと同じです。

<dd>タグとは、定義リスト内の用語の説明や定義を記述するために使われるタグです。

終了タグは省略できますが、記述しておいた方が無難です。

menu [Transitional]
<menu  attributes...>〜</menu>は、メニューリストを作成します。

リストのそれぞれの項目はliタグに続けて記述します。

このタグは推奨されていません。

代わりにulタグを使うよう推奨されています。

 attributesには次のものが入ります。

<menu>タグとは、短い選択肢などの一覧を表示するために用意されたタグですが、現在では使用が推奨されていません。

似たタグに<dir>タグがあります。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
ol [Strict] [Transitional]
<ol attributes...>〜</ol>は、番号付きリストを作成します。

番号は通常、1.から自動的に振られます。

リストのそれぞれはliタグに続けて記述します。

アトリビュートにより、いくつかの変更が可能です。

<ol>タグとは、番号付きリストを定義するためのタグです。

デフォルトではこの範囲に含まれるリスト項目の先頭にアラビア数字で番号が付されて表示されます。

<ul>タグと同様にインデントされ、上下にはスペースを空けて表示されます。

type属性を使うことで、先頭の番号を大文字のアルファベット、小文字のアルファベット、大文字のローマ数字、小文字のローマ数字などに変更することが可能です。

以下の詳細は99
class
compact
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
start

<ol start = "***">とは、<ol>タグにstart属性を指定したもので、<ol>タグで作成した番号付きリストの開始値を定義するためものです。

style
title
type
 [Transitional][省略可]type="type"は、リスト番号の連番に使う文字を指定します。

値には次のようなものを取ることができます。

lass="picup"><ol type = "***">とは、<ol>タグにtype属性を指定したもので、<ol>タグで作成した番号付きリストの番号スタイルを変更するためのものです。

値には"1"(一般的なアラビア数字)、"A"(大文字のアルファベット)、"a"(小文字のアルファベット)、"I"(大文字のローマ数字)、"i"(小文字のローマ数字)などを指定します。

  • 1:1,2,3,...と数字で振ります(デフォルト)。
  • A:A,B,C,...と英大文字で振ります。
  • a:a,b,c,...と英小文字で振ります。
  • I:I,II,III,...と大文字ローマ数字で振ります。
  • i:i,ii,iii,...と小文字ローマ数字で振ります。
ul [Strict] [Transitional]
<ul attributes...>〜</ul>は、番号なしリストを作成します。

リストのそれぞれの項目はliタグに続けて記述します。

リストの先頭の印を変えることもできます。

<ul>タグとは、番号なしリストを定義するためのタグです。

ほとんどのブラウザではこの範囲に含まれるリスト項目(<li>タグで定義)の先頭に黒丸の印をつけて、インデントされ、上下にはスペースを空けて表示されます。

type属性を使って、先頭のマークを白丸や正方形に変更することも可能です。

class
以下の詳細は99
compact
 [Transitional][省略可]compactをタグのアトリビュートに入れると、リストの先頭のスペースを狭くします。

<ul compact>とは、<ul>タグにcompact属性を指定したもので、<ul>タグで作成した番号なしリストをよりコンパクトに表示するためのものです。

ただし廃止予定となっているため、使うべきではありません。

以下の詳細は99
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
type
 [Transitional][省略可]type="type"は、リスト項目の先頭に付く印を変更します。

値には次のようなものがあります。

<ul type = "***">とは、<ul>タグにtype属性を指定したもので、<ul>タグで作成した番号なしリストのマークを変更するためのものです。

値には"circle"(白丸)、"square"(正方形)、"disc"(黒丸)のいずれかを指定します。

  • disc:塗りつぶし円
  • circle:円(中を塗らない)
  • square:正方形(中を塗らない)

なお、Netscape Navigator/Communicatorでは、ulタグの中にさらにulタグがある、という入れ子の深さによってこの印が次のように自動的に変わります。

  1. 塗りつぶし円
  2. 円(中を塗らない)
  3. 正方形(中を塗らない)、以降の入れ子は全部この印

リストの例を次に示しましょう。

 <ul>
 <li>イソターネットとは
 <ol>
 <li>うぇっぶ
 <li>世界へ情報発信
 </ol>
 </ul>
 <dl>
 <dt>マノレチメディア
 <dd>CD-ROMとMPEG
 </dl>

このソースから、次のようにブラウザ上に表示されます。


  • イソターネットとは
    1. うぇっぶ
    2. 世界へ情報発信
マノレチメディア
CD-ROMとMPEG

dlタグ環境内以外では、リストの項目の定義にliタグを使います。

アトリビュートを付けることで、リスト環境の型や値を変更することもできます。

li [Strict] [Transitional]
<li attributes...>〜[</li>]の形でリスト項目を定義します。

<li>タグとは、リスト内の項目を定義するためのタグです。

HTMLでは終了タグは省略可能です。

以下の詳細は99
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title
type
 [Transitional][省略可]type="type"は、リスト番号の文字を指定します。

値には次のようなものを取ることができます。

<li type = "***">とは、<li>タグにtype属性を指定したもので、リスト内の項目のマークを個々に変更する場合に使用されます。

番号なしリスト(<ul>タグ)の場合には"circle"(白丸)、"square"(正方形)、"disc"(黒丸)を指定し、番号付きリスト(<ol>タグ)の場合には、"1"(一般的なアラビア数字)、"A"(大文字のアルファベット)、"a"(小文字のアルファベット)、"I"(大文字のローマ数字)、"i"(小文字のローマ数字)などを指定します。

  • 1:1,2,3,...と数字で振ります(デフォルト)。
  • A:A,B,C,...と英大文字で振ります。
  • a:a,b,c,...と英小文字で振ります。
  • I:I,II,III,...と大文字ローマ数字で振ります。
  • i:i,ii,iii,...と小文字ローマ数字で振ります。
value:値
 [Transitional][省略可]olタグ環境のみ意味を持つアトリビュートで、value:値="number"に値を入れると現在の項目に付けられる番号を変更します。

<li value:値 = "***">とは、<li>タグにvalue:値属性を指定したもので、番号付きリスト(<ol>タグ)内で用いられ、value:値属性を指定したリスト項目以降の連番を変更するためのものです。

Summary:LIST リスト

nextup previousindex
Next:4.10 ブロックテキスト Up:4. HTMLの骨格 Previous:4.8 コメント
Kenshi Muto
平成11年9月19日
OkanoToyomi
2005年08月13日

HTMLマニュアル

広告