KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/3rd/list のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/3rd/list へ行く。
  • 1 (2005-10-08 (土) 07:32:09)
  • 2 (2007-02-24 (土) 07:05:44)
  • 3 (2007-02-24 (土) 07:10:26)

リストを作る

HTMLでは、次のような3種類のリスト（箇条書き）を設定できます。

• 番号なしリスト
• 番号つきリスト
• 定義型リスト

番号なしリスト

番号なしのリストを作るには、 ul要素を使います。 リストの項目には、li要素を使います。

pre> <ul>

 COLOR(red):<li>COLOR(black):項目１COLOR(red):</li>
 COLOR(red):<li>COLOR(black):項目２COLOR(red):</li>
 ...

</ul>

/pre>

リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。

リストという一要素ですので、 段落（p要素）の中に入れず、一度p要素を閉じてから、 リストを作ります。

pre> <p>Webページを記述するには、</p> <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>

</ul> <p>などの技術が必要なります。</p>

/pre>

リストの使い方

リストを入れ子にすることができます。 入れ子にすると、行頭のマークが変わります。

pre> <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>

</ul>

/pre>

番号つきリスト

番号つきのリストを作るには、 ol要素を使います。 リストの項目には、li要素を使います。

pre> <ol>

 COLOR(red):<li>COLOR(black):項目１COLOR(red):</li>
 COLOR(red):<li>COLOR(black):項目２COLOR(red):</li>
 ...

</ol>

/pre>

リスト全体は、<ol>〜</ol>で囲みます。 その中に、各項目を<li>〜</li>で作ります。

番号つきリストも入れ子にできます。 入れ子にすると、 番号の形式が「a,b,c,...」や「i,ii,iii,...」などに変わります また、それぞれのリストを組み合わせた入れ子もできます。

pre> <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>

</ul>

/pre>

定義型リスト

辞書のように、「用語」と「その説明」のリストを作るには、 dl要素を使います。 リストの項目には、dt要素とdd要素を使います。

pre> <dl>

 COLOR(red):<dt>COLOR(black):用語１COLOR(red):</dt>
   COLOR(red):<dd>COLOR(black):説明１COLOR(red):</dd>
 COLOR(red):<dt>COLOR(black):用語２COLOR(red):</dt>
   COLOR(red):<dd>COLOR(black):説明２COLOR(red):</dd>
 ...

</dl>

/pre>

リスト全体は、<dl>〜</dl>で囲みます。 その中に、用語にあたる<dt>〜</dt>と、 説明にあたる<dd>〜</dd>で、リストを作ります。 表示するときには、dd要素の部分が字下げして表示されます。

dt要素とdd要素の組み合わせは、1組だけでなく、 必要なだけ組み合わせることができます。

pre> <dl>

 COLOR(red):<dt>COLOR(black):ユーザビリティCOLOR(red):</dt>
   COLOR(red):<dd>COLOR(black):「使いやすさ」のこと。usability。COLOR(red):</dd>

</dl>

/pre>

進んでください。