*リストを作る [#zdb4c4c0] HTMLでは、次のような3種類のリスト(箇条書き)を設定できます。 -番号なしリスト -番号つきリスト -定義型リスト **番号なしリスト [#db1ef42c] **番号つきリスト [#c2e17aef] **用語と説明のリスト [#g825db28] **番号なしリスト [#sf30c56c] 番号なしのリストを作るには、 ''ul''要素を使います。 リストの項目には、''li''要素を使います。 <pre> COLOR(red):<ul> COLOR(red):<li>COLOR(black):項目1COLOR(red):</li> COLOR(red):<li>COLOR(black):項目2COLOR(red):</li> ... COLOR(red):</ul> </pre> 見出しを作るには、''hn要素''(nは1〜6の数字)を使います。 リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 リストという一要素ですので、 段落(p要素)の中に入れず、一度p要素を閉じてから、 リストを作ります。 <pre> COLOR(red):<h1>COLOR(black):...COLOR(red):</h1> COLOR(red):<h2>COLOR(black):...COLOR(red):</h2> COLOR(red):<h3>COLOR(black):...COLOR(red):</h3> COLOR(red):<h4>COLOR(black):...COLOR(red):</h4> COLOR(red):<h5>COLOR(black):...COLOR(red):</h5> COLOR(red):<h6>COLOR(black):...COLOR(red):</h6> 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> 見出しは、<h1>が大見出し、<h2>が中見出し、<h6>が最小の小見出しのように、 6段階の見出しのレベルに分かれており、 レベルが小さくなるほど、文字サイズが小さくなります。 **リストの使い方 [#pf54729e] リストを入れ子にすることができます。 入れ子にすると、行頭のマークが変わります。 <pre> COLOR(red):<h1>COLOR(black):自己紹介COLOR(red):</h1> COLOR(red):<h2>COLOR(black):プロフィールCOLOR(red):</h2> COLOR(red):<h3>COLOR(black):リンク集COLOR(red):</h3> 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> 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> 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> 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> 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) |