リストを作るHTMLでは、次のような3種類のリスト(箇条書き)を設定できます。
番号なしリスト番号なしのリストを作るには、 ul要素を使います。 リストの項目には、li要素を使います。 <ul> <li>項目1</li> <li>項目2</li> ... </ul> </pre> リスト全体は、<ul>〜</ul>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 リストという一要素ですので、 段落(p要素)の中に入れず、一度p要素を閉じてから、 リストを作ります。 #pre(novervatim){{ <p>Webページを記述するには、</p> <ul> <li>HTML(Hyper Text Markup Language)</li> <li>CSS(Cascading Style Sheet)</li> </ul> <p>などの技術が必要なります。</p> </pre> **リストの使い方 [#pf54729e] リストを入れ子にすることができます。 入れ子にすると、行頭のマークが変わります。 #pre(novervatim){{ <ul> <li>段落をつくる</li> <li>文字を装飾する</li> <li> <ul> <li>大きさを決める</li> <li>色を決める</li> </ul> </li> </ul> </pre> **番号つきリスト [#g1950536] 番号つきのリストを作るには、 ol要素を使います。 リストの項目には、li要素を使います。 #pre(novervatim){{ <ol> <li>項目1</li> <li>項目2</li> ... </ol> </pre> リスト全体は、<ol>〜</ol>で囲みます。 その中に、各項目を<li>〜</li>で作ります。 番号つきリストも入れ子にできます。 入れ子にすると、 番号の形式が「a,b,c,...」や「i,ii,iii,...」などに変わります また、それぞれのリストを組み合わせた入れ子もできます。 #pre(novervatim){{ <ul> <li>段落をつくる</li> <li>文字を装飾する</li> <li> <ol> <li>大きさを決める</li> <li>色を決める</li> </ol> </li> </ul> </pre> **定義型リスト [#o0e8161b] 辞書のように、「用語」と「その説明」のリストを作るには、 dl要素を使います。 リストの項目には、dt要素とdd要素を使います。 #pre(novervatim){{ <dl> <dt>用語1</dt> <dd>説明1</dd> <dt>用語2</dt> <dd>説明2</dd> ... </dl> </pre> リスト全体は、<dl>〜</dl>で囲みます。 その中に、用語にあたる<dt>〜</dt>と、 説明にあたる<dd>〜</dd>で、リストを作ります。 表示するときには、dd要素の部分が字下げして表示されます。 dt要素とdd要素の組み合わせは、1組だけでなく、 必要なだけ組み合わせることができます。 #pre(novervatim){{ <dl> <dt>ユーザビリティ</dt> <dd>「使いやすさ」のこと。usability。</dd> </dl> </pre> |