KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/4th/list の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2004/4th/list へ行く。

*リストを作る [#zdb4c4c0]
HTMLでは、次のような3種類のリスト（箇条書き）を設定できます。
-番号なしリスト
-番号つきリスト
-定義型リスト

**番号なしリスト [#sf30c56c]
番号なしのリストを作るには、
''ul''要素を使います。
リストの項目には、''li''要素を使います。
#pre(novervatim){{
COLOR(red):<ul>
  COLOR(red):<li>COLOR(black):項目１COLOR(red):</li>
  COLOR(red):<li>COLOR(black):項目２COLOR(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):項目１COLOR(red):</li>
  COLOR(red):<li>COLOR(black):項目２COLOR(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):用語１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>
  ...
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)

}}