h3{color: navy; text-decoration: underline;} ol{list-style-position:outside;} ul.none{list-style: none;} li.lihead{list-style: decimal;} div.indent{left-margin: 3%;} div.indent2{left-marign: 4%;} .h{background-color: #FA8072; color: black;} .b{background-color: #FFFF66; color: black;}
WEBページに限らず、 聞き手、読み手にわかりやすいよう心がけることは重 要である。伝えたい情報が簡潔に項目毎に整理されてい れば、読み手、聞き手が理解しやすいのは当然である。
HTML言語では箇条書きのための要素として
順不同の情報を列挙するもの
序列のある情報を列挙するもの
定義を列挙するもの
の三種類が用意されている。
順不同リストとは、名前の通り順序をつける必要のない項目 を書く場合に用いる。使い方を見てみよう。
実際の表示
HTMLソース
<ul> <li>鳥海山</li> <li>月山</li> <li>湯殿山</li> </ul>
<ul>〜</ul>でここから〜ここまで順不同リストとする。
liはリストの項目を書くための要素である
順番が重要である項目はol要素を使う。
具体的には料理のレシピや、仕事の手順など、順番を強調したリストを書き たい場合に使うことになるだろう。以下は使い方と結果である。
実際の表示
HTMLソース
<ol> <li>礼</li> <li>そんきょ</li> <li>はじめっ</li> <li>メンーッ</li> <li>勝負あり</li> <li>そんきょ</li> <li>礼</li> </ol>
定義を説明したい場合。<語句や単語を詳しく説明した い場合に用いると効果が ある>。定義リストだけは、他のリストと異な る形式を用いる。
実際の表示
HTMLソース
定義リストの<dl>〜</dl>だけは、前出の順不同リスト <ul>〜</ul>、序列リスト<ol>〜</ol>と使い方が違う 事に注意したい。
dt要素に、定義や語句を書く。
dd要素に、その定義や語句の説明を書く。
おおよそのリストの使い方は理解して頂けたろうか。リストは、使い方が簡 単でありながら、有効に使えば、効果が期待される要素の1つである。
sample.htmlは以下のようなっただろうか。
<html> <head> <title> 初めてのHTML </title> </head> <body> <h1> ようこそ </h1> <p> 今日はようこそ UNIX講習会へおいで下さいました。HTML言語を修 得し、 世界に向けて情報を発信してみましょう。</p> <p> と堅苦しい事は言わずに、趣味に仕事に活用して下さい。</p> <ul> <li>鳥海山</li> <li>月山</li> <li>湯殿山</li> </ul> <ol> <li>礼</li> <li>そんきょ</li> <li>はじめっ</li> <li>メンーッ</li> <li>勝負あり</li> <li>そんきょ</li> <li>礼</li> </ol> <dl> <dt>公益学</dt> <dd>公益学とは、非常に難しい奥の深い学問である。一概に定 義できるものではない。</dd> </dl> </body> </html>
→ 目次