HTMLの書き方 基礎10
発言番号 発言日時 発言者
01216 98/01/14 08:51 にゃん

リスト(箇条書き)の方法

● マーク付きリスト

<UL><LI>〜</UL> というタグを使うと、たとえば以下のように、各項目の頭にマーク(基本的には黒丸)をつけて、箇条書きのリストを作ることができます。

このように表示させるためには、次のようにソースを書きます。

<UL>
	<LI>マーク付きリスト</LI>
	<LI>番号付きリスト</LI>
	<LI>番号の書式を変える</LI>
	<LI>番号の数値を変える</LI>
	<LI>定義型リスト</LI>
</UL>

リストの始まりに <UL> を書き、終わりに </UL> を書きます。このタグの働きによって、リストの上と下に行間があきます。各項目の前に <LI> を書きます。これによって、項目の先頭にマークが付き、項目の終わりに改行が入ります。(各項目の終わりに </LI> を書くのが正式です。いまんとこ、書かなくてもだいじょぶみたいですが。)

ここでソースを改行したり、頭を下げたりしていますが、これはたんにソースを見やすくするためであり、タグがなければいくら改行や字下げをしてもリストの形に表示されないことに注意してください(逆に言えば、改行しないほうが見やすければ改行しなくてもいい)。

マークは、基本的には黒丸ですが、ブラウザによっては、マークの形を指定するタグが使えます。このタグ(<LI TYPE="disk, circle, square">)が効かないブラウザもあるので、あえて使わないほうが良いでしょう。

● 番号付きリスト

<UL><LI>〜</LI></UL> の代わりに <OL><LI>〜</LI></OL> を使うと、各項目にマークではなく番号が付きます。

<OL>
	<LI>マーク付きリスト</LI>
	<LI>番号付きリスト</LI>
	<LI>番号の書式を変える</LI>
	<LI>番号の数値を変える</LI>
	<LI>定義型リスト</LI>
</OL>

というソースだと、次のように表示されるわけです。

  1. マーク付きリスト
  2. 番号付きリスト
  3. 番号の書式を変える
  4. 番号の数値を変える
  5. 定義型リスト

● 番号の書式を変える

リストの項目に付ける番号は、アラビア数字だけでなく、アルファベットやローマ数字にすることもできます。そのためには、<LI> タグに TYPE というオプションを書きます。

<LI TYPE=a> と書くと、英小文字で a. b. c. ... という番号が付き、<LI TYPE=A>だと、英大文字で A. B. C. ... という番号が付きます。ローマ数字にするには、<LI TYPE=i> だと i. ii. iii. iv. ... となり、<LI TYPE=I> だと I. II. III. IV. ... となります。アラビア数字に戻すには、<LI TYPE=1> です。

なお、<LI TYPE=3> なんてのは、できません。TYPE は、番号の書式を変えるオプションであって、番号の値を変えるものではないので。

● 番号の数値を変える

リストの番号を 1 以外の値から始めたいときには、<OL> タグに START というオプションを付けます。<OL START=6> と書けば、番号は 6 から(あるいは f, F, vi,VI から)始まるようになります。<LI> タグのほうで番号の値を変えたい場合は、VALUE というオプションを使います。<LI VALUE=9> と書けば、その項目の番号が 9 になります。

● 定義型リスト

<DL><DT>〜<DD>〜</DL> というタグでリストを作ると、項目にはマークも番号も付きません。<DT> で始まる項目は、字下げされません。<DD> で始まる項目は、字下げされます。<DT> のほうに見出し語を書き、<DD> のほうにその説明を書くといった使い方をします。(これも各項目を <DD> 〜 </DD> あるいは <DT> 〜 </DT> のようにペアタグとして書くのが正式です。)

● リストを入れ子にする

リストの内側に、さらに <UL>〜</UL> などを書いて、

<UL>
	<LI>マーク付きリスト
	<LI>番号付きリスト
		<UL>
			<LI>番号の書式を変える
			<LI>番号の数値を変える
		</UL>
	<LI>定義型リスト<
	LI>リストを入れ子にする
</UL>

このように入れ子にすると、ブラウザに表示されるリストも入れ子になります。つまり、下のように表示されるわけですね。

入れ子になったときに、マークの形が変わる(たとえば2段目は四角になる)ブラウザもあれば、変わらないブラウザもあります。

上の大きなボタンを押すと、テキストエリアに書かれている内容が、右のフレームに表示されます。いろいろ好きなことを書いて試してみましょう。

前の記事 次の記事

目次

翻訳フォーラムのトップページ