TITLE:リストを作る *リストを作る [#zdb4c4c0] HTMLでは、次のような3種類のリスト(箇条書き)を設定できます。 -番号なしリスト(・、●、○等) -番号つきリスト(1、2、3、a、b、c等) -定義型リスト(辞書のような、単語と解説文の組み合わせ) **番号なしリスト [#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> }} リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 ***リストを使うときの注意 [#affaadb8] 「リスト」は「段落」と同じく文書を構成するひとつの要素です。 そのため、段落(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> }} :間違った使い方| 1行目に終了タグ(</p>)、6行目に開始タグ(<p>)がありません。 #pre(novervatim){{ COLOR(blue):<p>COLOR(black):Webページを記述するには、 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(black):などの技術が必要なります。COLOR(blue):</p> }} **リストの使い方 [#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> }} **番号つきリスト [#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> }} リスト全体は、<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> }} **定義型リスト [#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> }} リスト全体は、<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> }} &br; &navi2(Lecture/JouhouC2010/3rd,next);進んでください。 ---- #navi2(Lecture/JouhouC2010/3rd,prev,toc,next) |