マーク付きリスト

UL and LI

リストを作るにはリスト・タグとリスト項目・タグの二つが必要です。
ここでは、リスト・タグにUL (Un-ordered List)、リスト項目・タグにLI (List Item) を使います。リスト・タグULはリスト項目にマーク(黒丸)をつけてくれます。リストは次のように構成されます。

リスト・タグ：ULにはオープン・タグとクローズ・タグがあります。
リスト項目・タグ：LIはリスト・エレメントの中に記述します。
リスト項目・タグ：LIは項目ごとに一つ一つ付けなければなりません。
リスト項目・タグ：LIのクローズ・タグは省略できます。
また、リスト項目に書かれるテキストにはPタグは必要ではありません。

<UL>
   <LI>Manhattan
   <LI>Bronx
   <LI>Brooklyn
   <LI>Queens
   <LI>Staten Island
</UL>
下がブラウザー表示です。

Manhattan
Bronx
Brooklyn
Queens
Staten Island

注意：
ULエレメントの中には、LIエレメントだけが入り、テキストを記述しないのが正確な使い方です。

リストはネストすることが出来ます。

<UL>
   <LI>Manhattan
      <UL>
        <LI>Uptown
        <LI>Midtown
        <LI>Downtown
      </UL>
   <LI>Brooklyn
   <LI>Queens
   <LI>Staten Island
</UL>
ブラウザー表示。

Manhattan

Uptown
Midtown
Downtown

Bronx
Brooklyn
Queens
Staten Island

Notes:
リストをネストすると上のような表示になります。ネストされたリストのマークがおそらく変っているだろうと思いますが、これはブラウザーのディフォルト設定がそうなっているからですが、このマークには黒丸の他に円と四角の３種類があり、これはアトリビュートを使って変えることが出来ます。
詳しい使い方はHTML 3.2のULエレメントに書かれています。

サンプル・ページ・ドキュメント

<HTML>
     <HEAD>
        <TITLE>New York Guide Home Page</TITLE>
     </HEAD>

     <BODY>
        <H1>New York Guide</H1>
        <P>
<STRONG>New York</STRONG>は、<BR>
Manhttan(マンハッタン), Bronx (ブロンクス), Brooklyn (ブルックリン), 
Queens (クィーズ) Staten Island (スタッテン・アイランド)
の五区に分かれています。

        <UL>
           <LI>Manhttan
           <LI>Bronx
           <LI>Brooklyn
           <LI>Queens
           <LI>Staten Island
        </UL>

     </BODY>
</HTML>

これをスチラクチャー図で見ると、

「Tree of Elements」

 HTML
  |__HEAD
  |   |__TITLE
  |
  |__BODY
  |   |
  |   |__H1
  |   |
  |   |__P
  |   |  |__STRONG
  |   |  |__BR
  |   |
  |   |__UL(リスト・タグ) 
  |   |  |__LI(リスト項目タグ 1)
  |   |  |__LI(リスト項目タグ 2)
  |   |  |__LI(リスト項目タグ 3)
  |   |  |__LI(リスト項目タグ 4)
  |   |  |__LI(リスト項目タグ 5)
  |   |  |

リスト・エレメントULはその中にLIエレメントを含み、パラグラフ（P）や見出し（Hx）と同じストラクチャーレベルで本文が入るボディーを構成しています。
HTMLドキュメントを作成する、あるいはHTMLのタグを使ってマークアップをしていくというのは、ドキュメントのストラクチャーを正確に表わしていくということです。

これでサンプル・ページは終わりです。ここで使ったタグの詳しい説明は省略されていますが、 HTML 3.2にはHTMLのタグ（エレメント）の詳しい説明と使い方が書かれています。

Next chapter will be about inline-images.

[HTML help] [Basics] [HTML 3.2] [Beginner's] [How]

ABACUSS LTD.
www.abacuss.com