[Up] [Next]
[Previous]
リスト
HTMLでは、番号付リスト、番号無し(印付き)リスト、定義型リスト、メニュー
リスト、ディレクトリリストの 5つのタイプのリストタグを用意しています。
全てのリストタグは次の要素からできています。
- 全てのリストタグは開始タグと終了タグがあります。その中でリス
トのアイテムを記述します。
- リストのアイテム(要素)は定義型リストの場合、<DT>
タグと<DD>タグで構成され、その他のリストは
<LI>タグを使用します。
以上をまとめると、リストタグの基本的な記述方法は以下のようになります。
<リスト開始タグ>
<リストアイテムタグ> テキスト
<リストアイテムタグ> テキスト
:
<リストアイテムタグ> テキスト
</リスト終了タグ>
番号付リスト <OL>
番号付リストは1から順番の番号付のリストが作られます。リストタグの名称
はOLで、<OL>〜</OL>で構成されます。リス
トアイテムのタグは<LI>を使用します。
<OL>
<LI> りんご
<LI> みかん
<LI> バナナ
<LI> すいか
<LI> パイナップル
</OL>
出力は次のようになります。
- りんご
- みかん
- バナナ
- すいか
- パイナップル
Netscape では番号付(Ordered)リストは、その順番を英大文字
(TYPE=A)、英小文字(TYPE=a)、大ローマ数字
(TYPE=I)、小ローマ数字 (TYPE=i)またはデフォルトである
数字(TYPE=1)が指定できます。また、始める値についても、
STARTというタグを使って値を指定できます。
<OL TYPE=I START=5>
<LI> これは大ローマ数字の5です。
<LI> これは大ローマ数字の6です。
<LI> これは大ローマ数字の7です。
</OL>
- これは大ローマ数字の5です。
- これは大ローマ数字の6です。
- これは大ローマ数字の7です。
タイプ値 | スタイル | 例 |
A | 英大文字 | A, B, C, D |
a | 英小文字 | a, b, c, d |
I | 大ローマ数字 | I, II, III, IV |
i | 小ローマ数字 | i, ii, iii, iv |
1 | アラビア数字 | 1, 2, 3, 4 |
番号無しリスト <UL>
番号無しリストは番号付リストで使ったOLの代わりにULを使用し、
<UL>〜</UL>で構成されます。そして、リス
トアイテムにはブレット(印)が付けられます。
<UL>
<LI> りんご
<LI> みかん
<LI> バナナ
<LI> すいか
<LI> パイナップル
</UI>
出力は次のようになります。
Netscapeでは、非番号付き(Unnumbered)リストでの印のタイプを
TYPEタグ指定できます。
それぞれ、disc(ディスク:黒く塗りつぶされた円)、circle(円)、
square(四角)が指定できます。
<UL TYPE=DISC>
<LI> これは TYPE=discの場合です。
</UL>
<UL TYPE=CIRCLE>
<LI> これは TYPE=circleの場合です。
</UL>
<UL TYPE=SQUARE>
<LI> これは TYPE=squareの場合です。
</UL>
<LI> リストアイテム
Netscape では、途中でリストのタイプを変更したい場合、TYPEタグ
を指定して変更できます。非番号付きリストでは、TYPEを使用する
ことによって、リストの印のタイプを変更できます。また、番号付リストにつ
いては、TYPEを使って、番号形式を変更したり、VALUEを
使用して値を変更することができます。ただし、異なるリストタイプのタイプ
は使用できません。
<UL>
<LI TYPE=disc> これは TYPE=discの場合です。
<LI TYPE=square> これは TYPE=squareの場合です。
</UL>
<OL>
<LI> これは数字の1です。
<LI VALUE=5> これは数字の5です。
<LI TYPE=A> これはアルファベットのFです。
<LI VALUE=10 TYPE=I> これはローマ数字の10(X)です。
</OL>
- これは TYPE=discの場合です。
- これは TYPE=squareの場合です。
- これは数字の1です。
- これは数字の5です。
- これはアルファベットのFです。
- これはローマ数字の10(X)です。
以下のリストはリスト形式を優先させるため、2番目のリストアイテムは
番号なしリストのCIRCLEタイプのままです。基本的には、途中でリ
ストの形式を変更することはできません。
<UL>
<LI> これは最初のリストアイテムです。
<LI VALUE=5> 番号付きリストアイテムを使用します
</UL>
- これは最初のリストアイテムです。
- 番号付きリストアイテムを使用します
一部のブラウザでは番号無しリストの印をイメージにしたい場合、
<UL>タグにSRCオプションを付加できます。
<UL SRC="img/purpleball.gif">
<LI> テスト1
<LI> テスト2
<LI> テスト3
</UL>
定義型リスト <DL>
定義型リストは用語リストとも呼ばれ、リストタグにDLを使用します。
リストアイテムは他のリストとは指定方法が異なり、次の部分から構成されま
す。
<DT>と<DD>はワンサイドタグで、ペアで利用
されます。
<DL>
<DT> ブラームス
<DD> 1833〜97。19世紀ドイツ音楽の最大の作曲家の一人である。バッハ、
ベートーヴェンとともにドイツ音楽の3Bと呼ばれる。若い頃は
ピアニストとして活躍し各地を演奏旅行した。作品は、初期はピアノ曲・
歌曲・室内楽を中心に作曲、後期は交響曲・協奏曲等の大作を作曲する。
ロマン派絶頂の中、新古典派と呼ばれた。代表曲に、交響曲第1〜4番、
ヴァイオリン協奏曲等多数。
<DT> マーラー
<DD> 1860〜1911。後期ロマン派の交響曲作曲家、指揮者。作品は長大な
交響曲と、それと不可分な関係にある管弦楽伴奏付き歌曲が中心。
代表曲に、交響曲第1番「巨人」、5番等多数。
</DL>
表示は次のようになります。
- ブラームス
- 1833〜97。19世紀ドイツ音楽の最大の作曲家の一人である。バッハ、
ベートーヴェンとともにドイツ音楽の3Bと呼ばれる。若い頃は
ピアニストとして活躍し各地を演奏旅行した。作品は、初期はピアノ曲・
歌曲・室内楽を中心に作曲、後期は交響曲・協奏曲等の大作を作曲する。
ロマン派絶頂の中、新古典派と呼ばれた。代表曲に、交響曲第1〜4番、
ヴァイオリン協奏曲等多数。
- マーラー
- 1860〜1911。後期ロマン派の交響曲作曲家、指揮者。作品は長大な
交響曲と、それと不可分な関係にある管弦楽伴奏付き歌曲が中心。
代表曲に、交響曲第1番「巨人」、5番等多数。
定義型リストには、スペースを節約するコンパクト形式があります。
<DT>タグで指定した文字数が少ないと、改行せずに
<DD>で指定したテキストが表示されます(但し、文字数が多い
と変わりありません)。コンパクト形式にするには、<DL>開始
タグにCOMPACTオプションを付けます。しかし、多くのブラウザでは
COMPACTオプションを無視します。そのため、COMPACTと付
けても普通の定義型リストと変わらないでしょう。
COMPACTなしの場合、
- 3B
- バッハ、ベートーヴェン、ブラーム
- 3A
- シェーンベルク、ウェーベルン、ベルク
COMPACTを付けた場合、次のようになります。
- 3B
- バッハ、ベートーヴェン、ブラーム
- 3A
- シェーンベルク、ウェーベルン、ベルク
また、定義型リストは見出しと本文の関係で、本文を見出しよりも右にインデ
ントしたい場合にも使用できます。
<DL>
<DT> <H2>見出し部</H2>
<DD> 本文は、見出しよりも右にインデントされています。本文は、
見出しよりも右にインデントされています。本文は、見出しよ
りも右にインデントされています。
</DL>
-
見出し部
- 本文は、見出しよりも右にインデントされています。本文は、見出し
よりも右にインデントされています。本文は、見出しよりも右にイン
デントされています。
他に、<DT>部を省略して使用することにより、番号も印もないリストが
作成できます。また、自分で印を付ける場合にも使用できます。
<DL>
<DT><DD> <IMG SRC="img/redball.gif"> Red ball
<DT><DD> <IMG SRC="img/blueball.gif"> Blue ball
<DT><DD> <IMG SRC="img/greenball.gif"> Green ball
</DL>
- Red ball
- Blue ball
- Green ball
メニューとディレクトリリスト
メニューリストは短い段落で用います。リストタグにMENUを使用しま
す。
<MENU>
<LI> 肉
<LI> 野菜
<LI> 果物
</MENU>
ディレクトリリストは、リストタグにDIRを使用します。
<DIR>
<LI> docs/
<LI> applications/
<LI> Mail/
<LI> sources/
</DIR>
docs/
applications/
Mail/
sources/
リストの入れ子
リストは入れ子にすることができます。ただし、入れ子は3レベルまでしかで
きませんので注意して下さい。どのリストも入れ子は可能で、異なるリストを
入れ子しても構いません。
次に入れ子リスト例を示します。
<UL>
<LI> 東京都
<UL>
<LI> 千代田区
<UL>
<LI> 大手町
</UL>
<LI> 港区
</UL>
<LI> 横浜市
<UL>
<LI> 緑区
</UL>
</UL>
表示すると次のようになります。
番号付の場合、次のようになります。
<OL>
<LI> 東京都
<OL>
<LI> 千代田区
<OL>
<LI> 大手町
</OL>
<LI> 港区
</OL>
<LI> 横浜市
<OL>
<LI> 緑区
</OL>
</OL>
表示すると次のようになります。
- 東京都
- 千代田区
- 大手町
- 港区
- 横浜市
- 緑区
[Up] [Next]
[Previous]