リスト - KAWANO's PukiWiki Plus!

リストを作る

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

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

<ul>
  <li>項目１</li>
  <li>項目２</li>
  ...
</ul>

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

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

<p>Webページを記述するには、</p>
<ul>
  <li>HTML(Hyper Text Markup Language)</li>
  <li>CSS(Cascading Style Sheet)</li>
</ul>
<p>などの技術が必要なります。</p>

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

<ul>
  <li>段落をつくる</li>
  <li>文字を装飾する</li>
  <li>
    <ul>
      <li>大きさを決める</li>
      <li>色を決める</li>
    </ul>
  </li>
</ul>

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

<ol>
  <li>項目１</li>
  <li>項目２</li>
  ...
</ol>

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

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

<ul>
  <li>段落をつくる</li>
  <li>文字を装飾する</li>
  <li>
    <ol>
      <li>大きさを決める</li>
      <li>色を決める</li>
    </ol>
  </li>
</ul>

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

<dl>
  <dt>用語１</dt>
    <dd>説明１</dd>
  <dt>用語２</dt>
    <dd>説明２</dd>
  ...
</dl>

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

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

<dl>
  <dt>ユーザビリティ</dt>
    <dd>「使いやすさ」のこと。usability。</dd>
</dl>