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>
→ 目次