リストの作成


ここで学習するエレメント
ULエレメント、OLエレメント
LIエレメント


箇条書き段落の作成

箇条書きを作成するには、ULエレメントとLIエレメントを使います。ULは、単独では存在できず、必ず要素として LIを持たなければいけません。また、LIだけが単独で存在しても箇条書きにはなりません。(しかし、実際は、LIだけでもNavigatorは箇条書きとして表示します。文法的に間違っているので、必ずUL内で使いましょう。)
箇条書き段落は、以下のように記述します。

+---------
<BODY>
<H1>箇条書き</H1>
<P>HTML文書作成に必要なアプリケーションは、以下の通りです。</P>
<UL>
<LI>WWWブラウザ
<LI>テキストエディタ
<LI>画像処理ソフト
<LI>FTPクライアント
</UL>
</BODY>
+---------

ブラウザで参照すると、以下のように表示されます。

+---------

箇条書き

HTML文書作成に必要なアプリケーションは、以下の通りです。

+---------

番号付き箇条書き段落の作成

箇条書きに番号を付けて、順序を示したい時などは、ULエレメントだと不便です。その場合は、OLエレメントを使います。OLはULと同じようにOL単独では存在できず、必ず要素として LIを持たなければいけません。
番号付き箇条書き段落は、以下のように記述します。

+---------
<BODY>
<H1>番号付き箇条書き</H1>
<P>美味しいご飯の炊き方</P>
<OL>
<LI>天然水でお米を研ぎます。
<LI>炊飯器にセットします。
<LI>炊きます。
<LI>できあがり!
</OL>
</BODY>
+---------

ブラウザで参照すると、以下のように表示されます。

+---------

番号付き箇条書き

美味しいご飯の炊き方

  1. 天然水でお米を研ぎま。
  2. 炊飯器にセットします。
  3. 炊きます。
  4. できあがり!
+---------

基本的には数字による箇条書きになりますが、属性を変更することにより、アルファベットやローマ数字による箇条書きにすることも出来ます。

+---------
<BODY>
<P>アルファベット箇条書き</P>
<OL TYPE="a">
<LI>天然水でお米を研ぎます。
<LI>炊飯器にセットします。
<LI>炊きます。
<LI>できあがり!
</OL>

<P>ローマ数字箇条書き</P>
<OL TYPE="i">
<LI>天然水でお米を研ぎます。
<LI>炊飯器にセットします。
<LI>炊きます。
<LI>できあがり!
</OL>
</BODY>
+---------

ブラウザで参照すると、以下のように表示されます。

+---------

アルファベット箇条書き

  1. 天然水でお米を研ぎま。
  2. 炊飯器にセットします。
  3. 炊きます。
  4. できあがり!

ローマ数字箇条書き

  1. 天然水でお米を研ぎま。
  2. 炊飯器にセットします。
  3. 炊きます。
  4. できあがり!
+---------

また、<OL START="n">と記述することによって、n番目から箇条書きを開始することが出来ます。


次へ進む
前に戻る