[Up] [Next] [Previous]

リスト

HTMLでは、番号付リスト、番号無し(印付き)リスト、定義型リスト、メニュー リスト、ディレクトリリストの 5つのタイプのリストタグを用意しています。 全てのリストタグは次の要素からできています。 以上をまとめると、リストタグの基本的な記述方法は以下のようになります。
<リスト開始タグ>
   <リストアイテムタグ> テキスト
   <リストアイテムタグ> テキスト
   :
   <リストアイテムタグ> テキスト
</リスト終了タグ>

番号付リスト <OL>

番号付リストは1から順番の番号付のリストが作られます。リストタグの名称 はOLで、<OL></OL>で構成されます。リス トアイテムのタグは<LI>を使用します。
    <OL>
    <LI> りんご
    <LI> みかん
    <LI> バナナ
    <LI> すいか
    <LI> パイナップル
    </OL>
出力は次のようになります。

  1. りんご
  2. みかん
  3. バナナ
  4. すいか
  5. パイナップル
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>

  1. これは大ローマ数字の5です。
  2. これは大ローマ数字の6です。
  3. これは大ローマ数字の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>

  1. これは数字の1です。
  2. これは数字の5です。
  3. これはアルファベットのFです。
  4. これはローマ数字の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>
    

    表示すると次のようになります。

    1. 東京都
      1. 千代田区
        1. 大手町
      2. 港区
    2. 横浜市
      1. 緑区


    [Up] [Next] [Previous]