*リストを作る [#zdb4c4c0] HTMLでは、次のような3種類のリスト(箇条書き)を設定できます。 -番号なしリスト -番号つきリスト -定義型リスト **番号なしリスト [#sf30c56c] 番号なしのリストを作るには、 ''ul''要素を使います。 リストの項目には、''li''要素を使います。 #pre(novervatim){{ COLOR(red):<ul> COLOR(red):<li>COLOR(black):項目1COLOR(red):</li> COLOR(red):<li>COLOR(black):項目2COLOR(red):</li> ... COLOR(red):</ul> </pre> リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 リストという一要素ですので、 段落(p要素)の中に入れず、一度p要素を閉じてから、 リストを作ります。 #pre(novervatim){{ COLOR(red):<p>COLOR(black):Webページを記述するには、COLOR(red):</p> COLOR(red):<ul> COLOR(red):<li>COLOR(black):HTML(Hyper Text Markup Language)COLOR(red):</li> COLOR(red):<li>COLOR(black):CSS(Cascading Style Sheet)COLOR(red):</li> COLOR(red):</ul> COLOR(red):<p>COLOR(black):などの技術が必要なります。COLOR(red):</p> </pre> **リストの使い方 [#pf54729e] リストを入れ子にすることができます。 入れ子にすると、行頭のマークが変わります。 #pre(novervatim){{ COLOR(red):<ul> COLOR(red):<li>COLOR(black):段落をつくるCOLOR(red):</li> COLOR(red):<li>COLOR(black):文字を装飾するCOLOR(red):</li> COLOR(red):<li> COLOR(blue):<ul> COLOR(blue):<li>COLOR(black):大きさを決めるCOLOR(blue):</li> COLOR(blue):<li>COLOR(black):色を決めるCOLOR(blue):</li> COLOR(blue):</ul> COLOR(red):</li> COLOR(red):</ul> </pre> **番号つきリスト [#g1950536] 番号つきのリストを作るには、 ''ol''要素を使います。 リストの項目には、''li''要素を使います。 #pre(novervatim){{ COLOR(red):<ol> COLOR(red):<li>COLOR(black):項目1COLOR(red):</li> COLOR(red):<li>COLOR(black):項目2COLOR(red):</li> ... COLOR(red):</ol> </pre> リスト全体は、<ol>〜</ol>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 番号つきリストも入れ子にできます。 入れ子にすると、 番号の形式が「a,b,c,...」や「i,ii,iii,...」などに変わります また、それぞれのリストを組み合わせた入れ子もできます。 #pre(novervatim){{ COLOR(red):<ul> COLOR(red):<li>COLOR(black):段落をつくるCOLOR(red):</li> COLOR(red):<li>COLOR(black):文字を装飾するCOLOR(red):</li> COLOR(red):<li> COLOR(blue):<ol> COLOR(blue):<li>COLOR(black):大きさを決めるCOLOR(blue):</li> COLOR(blue):<li>COLOR(black):色を決めるCOLOR(blue):</li> COLOR(blue):</ol> COLOR(red):</li> COLOR(red):</ul> </pre> **定義型リスト [#o0e8161b] 辞書のように、「用語」と「その説明」のリストを作るには、 ''dl''要素を使います。 リストの項目には、''dt''要素と''dd''要素を使います。 #pre(novervatim){{ COLOR(red):<dl> COLOR(red):<dt>COLOR(black):用語1COLOR(red):</dt> COLOR(red):<dd>COLOR(black):説明1COLOR(red):</dd> COLOR(red):<dt>COLOR(black):用語2COLOR(red):</dt> COLOR(red):<dd>COLOR(black):説明2COLOR(red):</dd> ... COLOR(red):</dl> </pre> リスト全体は、<dl>〜</dl>で囲みます。 その中に、用語にあたる<dt>〜</dt>と、 説明にあたる<dd>〜</dd>で、リストを作ります。 表示するときには、dd要素の部分が字下げして表示されます。 dt要素とdd要素の組み合わせは、1組だけでなく、 必要なだけ組み合わせることができます。 #pre(novervatim){{ COLOR(red):<dl> COLOR(red):<dt>COLOR(black):ユーザビリティCOLOR(red):</dt> COLOR(red):<dd>COLOR(black):「使いやすさ」のこと。usability。COLOR(red):</dd> COLOR(red):</dl> </pre> &br; &navi2(Lecture/InfoDesignB2004/4th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/4th,prev,toc,next) }} |