もくじ

リスト

3種類の箇条書き

リストは箇条書きのことです。リストをあらわすタグはul と ol と dl の3つです。("l" は小文字の "L" です。)

ul と ol は

リストの各要素は li で挟んで示します。この全体を ul タグで挟むとひとつのリストができます。たとえばこんな感じです。

<ul>
<li>ワードプロセッサ</li>
<li>スプレッドシート</li>
</ul>

とすると

・ ワードプロセッサ
・ スプレッドシート

ul の代わりに olを使うとこんな感じです。

<ol>
<li>ワードプロセッサ</li>
<li>スプレッドシート</li>
</ol>

とすると

1. ワードプロセッサ
2. スプレッドシート

昔のhtmlでは li の終了タグ </li> を省略してもよい場合がありました。しかし、XHTMLでは省略してはいけないという規則ですので、省略してはいけません。

ol は ordered list (順序づけられたリスト)、ul は unordered list (順序づけられていないリスト)、li は list item (項目)の略です。

ul,olに使うスタイル

list-style-type

list-style-type リストの先頭に表示される印の形状を指定します。

ul {
  list-style-type:circle;
}
ol {
  list-style-type:upper-roman;
}
  1. ワードプロセッサ
  2. スプレッドシート
noneマーカー(行頭記号)を表示しない
disc黒丸
circle
square四角
decimal算用数字(1, 2, 3, 4…)
lower-roman小文字のローマ数字(i, ii, iii, iv…)
upper-roman大文字のローマ数字(I, II, III, IV…)
lower-alpha英小文字(a, b, c, d…)
upper-alpha英大文字(A, B, C, D…)

list-style-image

リストの先頭に表示される印を画像にします。

ul{
  list-style-image:url(images/pin2.png) ;
}

list-style-position

先頭の印が飛び出るのか、中に入れるのかの設定です。liの内容が2行以上になった時に効果がわかります。デフォルトはoutside。変更する必要を感ずることはあまりないでしょう。

list-style

これまでの3つを組み合わせて設定できます。指定の順序を問いません。3つ揃わなくてもOKです。

ul{
  list-style:circle url(images/pin2.png) outside;
}

typeとimageを両方指定するのは無意味に感じられますが、背景画像と同じで画像が表示できなかった時の記号を指定するためです。

dl

dl は、li の代わりに、dt と dd を使います。

<dl>
<dt>いぬ</dt>
<dd>雪が降ると庭をかけまわる動物</dd>
<dt>ねこ</dt>
<dd>雪が降るとこたつで丸くなる動物</dd>
</dl>

とすると、こんな感じになります。

いぬ
  雪が降ると庭をかけまわる動物
ねこ
  雪が降るとこたつで丸くなる動物

つまり、dt に書いたものを dd で説明するような構成になるのです。

dd の部分が長くなってもきちんと整形してくれます。次のような例では、

<dl>
<dt>ワードプロセッサ</dt>
<dd>文章を編集し、保存、印刷などをするソフトウェア。
ワープロと省略形で使われることが多い。</dd>
<dt>スプレッドシート</dt>
<dd>日本語では表計算と呼ばれることが多い。
縦横の升目に文字や数値や計算式を入れて、自動的に計算させる</dd>
<dt>ウェブブラウザ</dt>
<dd>単にブラウザともいう。インターネットの
いわゆるホームページを見るためのソフト。</dd>
</dl>

こんな感じになります。

ワードプロセッサ

文章を編集し、保存、印刷などをするソフトウェア。ワープロと省略形で使われることが多い。

スプレッドシート

日本語では表計算と呼ばれることが多い。縦横の升目に文字や数値や計算式を入れて、自動的に計算させる

ウェブブラウザ

単にブラウザともいう。インターネットのいわゆるホームページを見るためのソフト。

XHTMLでは終了タグは省略してはいけません。なくても表示が乱れない場合もありますが、必ず記入しましょう。

タグの名前の由来は、次の通り。

dl
Definition List あるいは Descriptive List
dt
Definition Term あるいは Descriptive Term
dd
Definition Data あるいは Descriptive Data

課題 ファイル名 list.html

いくつかの内容を ul, ol, dl の3通りのリストにしたページを作ってください。

もちろん、目次からのリンク、目次へ戻るリンクをつけてください。


ウェブページ(Feb.2009)
聖愛中学高等学校
http://www.seiai.ed.jp/
Aug.2005 改訂