リスト表示する（高）
リスト表示する（高）
今回使う タグ
< UL >< LI ></ LI ></ UL > 、 < OL >< LI ></ LI ></ OL > 、
< DL >< DT >< DD ></ DD ></ DT ></ DL >
< UL >< LI ></ LI ></ UL > 、 < OL >< LI ></ LI ></ OL > 、
< DL >< DT >< DD ></ DD ></ DT ></ DL >
リスト表示とは、主に項目を整理して表示したい場合に使います。
では、実際に例をみてみましょう！
《例題１》
実際に書くもの
結果
< DL
>
< DT > 野菜 </ DT >
< DD > 野菜１、野菜２、野菜３ </ DD >
< DD > 野菜４、野菜５、野菜６ </ DD >
< DT > 果物 </ DT >
< DD > 果物１、果物２、果物３ </ DD >
< DD > 果物４、果物５、果物６ </ DD >
</ DL >
< DT > 野菜 </ DT >
< DD > 野菜１、野菜２、野菜３ </ DD >
< DD > 野菜４、野菜５、野菜６ </ DD >
< DT > 果物 </ DT >
< DD > 果物１、果物２、果物３ </ DD >
< DD > 果物４、果物５、果物６ </ DD >
</ DL >
| 野菜 | * |
| * | 野菜１、野菜２、野菜３ |
| * | 野菜４、野菜５、野菜６ |
| 果物 | * |
| * | 果物１、果物２、果物３ |
| * | 果物４、果物５、果物６ |
上の例題は定義型リストと言い、用語（ＤＴ）と定義（ＤＤ）から構成されます。
用語とその用語の定義を一組にし、リスト形式で表示する場合に使います。
このタグを使わなくてもテーブルタグなどに置きかえる事もできますね （＾▽＾笑）
< DL > タグは、「 D ifinition L ist」の略で、箇条書きの始まりを示します。
< DT > タグは、「 D ifinition T ytle」の略で、定義される言葉を書きます。
< DD > タグは、「 D ifinition D ata」の略で、その言葉の意味を書きます。
《例題２》
実際に書くもの
結果
< DL COMPACT
>
< DT > 野菜 </ DT >
< DD > 野菜１、野菜２、野菜３ </ DD >
< DD > 野菜４、野菜５、野菜６ </ DD >
< DT > 果物 </ DT >
< DD > 果物１、果物２、果物３ </ DD >
< DD > 果物４、果物５、果物６ </ DD >
</ DL >
< DT > 野菜 </ DT >
< DD > 野菜１、野菜２、野菜３ </ DD >
< DD > 野菜４、野菜５、野菜６ </ DD >
< DT > 果物 </ DT >
< DD > 果物１、果物２、果物３ </ DD >
< DD > 果物４、果物５、果物６ </ DD >
</ DL >
| 野菜 | 野菜１、野菜２、野菜３ |
| * | 野菜４、野菜５、野菜６ |
| 果物 | 果物１、果物２、果物３ |
| * | 果物４、果物５、果物６ |
《例題２》 は、 《例題１》 の用語と定義を段落をつけずに表示したものです。
やり方は、 < DL > を < DL COMPACT > と変えるだけですから簡単です。
次に、 リスト表示（低） で使っていたタグをスタイルシートを使って表現してみたいと思います。
《例題３》
実際に書くもの
結果
< UL
>
< LI style="list-style-type: disk ;" > 適当な文章１ </ LI >
< LI style="list-style-type: circle ;" > 適当な文章２ </ LI >
< LI style="list-style-type: square ;" > 適当な文章３ </ LI >
</ UL >
< LI style="list-style-type: disk ;" > 適当な文章１ </ LI >
< LI style="list-style-type: circle ;" > 適当な文章２ </ LI >
< LI style="list-style-type: square ;" > 適当な文章３ </ LI >
</ UL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
『 style="list-style-type: △ ;" 』がスタイルシートでマークや番号の形式を変える部分です。
△ へ『 disk 、 circle 、 square 』のいずれかを入れると、それぞれ右に対応した結果になります。
これ以外の番号表示も同じ要領ですので、下に例題を載せます。
《例題４》
実際に書くもの
結果
< OL style="list-style-type:decimal;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
< OL style="list-style-type:lower-roman;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
< OL style="list-style-type:upper-roman;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
< OL style="list-style-type:lower-alpha;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
< OL style="list-style-type:upper-alpha;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
< OL style="list-style-type:none;"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ OL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
最後に、画像を使ったリストマークを作成してみましょう。
《例題５》
実際に書くもの
結果
< UL style="list-style-image:url( 画像アドレス
);"
>
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ UL >
< LI > 適当な文章１ </ LI >
< LI > 適当な文章２ </ LI >
< LI > 適当な文章３ </ LI >
</ UL >
- 適当な文章１
- 適当な文章２
- 適当な文章３
画像のアドレス には好きな画像を入れられますので、色々チャレンジしてみて下さい。
ご意見・ご感想・ 告白
メールお待ちしております ヾ( ★
▽ ★
)/ moonlightshine@mail.goo.ne.jp
© Rakuten Group, Inc.
