リストは箇条書きのことです。リストをあらわすタグはul と ol と dl の3つです。("l" は小文字の "L" です。)
リストの各要素は li で挟んで示します。この全体を ul タグで挟むとひとつのリストができます。たとえばこんな感じです。
<ul> <li>ワードプロセッサ</li> <li>スプレッドシート</li> </ul>
とすると
ul の代わりに olを使うとこんな感じです。
<ol> <li>ワードプロセッサ</li> <li>スプレッドシート</li> </ol>
とすると
昔のhtmlでは li の終了タグ </li> を省略してもよい場合がありました。しかし、XHTMLでは省略してはいけないという規則ですので、省略してはいけません。
ol は ordered list (順序づけられたリスト)、ul は unordered list (順序づけられていないリスト)、li は list item (項目)の略です。
list-style-type リストの先頭に表示される印の形状を指定します。
ul { list-style-type:circle; }
ol { list-style-type:upper-roman; }
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…) |
リストの先頭に表示される印を画像にします。
ul{ list-style-image:url(images/pin2.png) ; }
先頭の印が飛び出るのか、中に入れるのかの設定です。liの内容が2行以上になった時に効果がわかります。デフォルトはoutside。変更する必要を感ずることはあまりないでしょう。
これまでの3つを組み合わせて設定できます。指定の順序を問いません。3つ揃わなくてもOKです。
ul{ list-style:circle url(images/pin2.png) outside; }
typeとimageを両方指定するのは無意味に感じられますが、背景画像と同じで画像が表示できなかった時の記号を指定するためです。
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では終了タグは省略してはいけません。なくても表示が乱れない場合もありますが、必ず記入しましょう。
タグの名前の由来は、次の通り。
いくつかの内容を ul, ol, dl の3通りのリストにしたページを作ってください。
もちろん、目次からのリンク、目次へ戻るリンクをつけてください。