「 ul 」「 ol 」「 dl 」要素
リストの作成には、「 ul 」「 ol 」「 dl 」要素を使用します。
<ul>
<li>イチゴ</li>
<li>バナナ</li>
<li>メロン</li>
</ul>
- カブトムシ
- クワガタムシ
- セミ
<ol>
<li>カブトムシ</li>
<li>クワガタムシ</li>
<li>セミ</li>
</ol>
- 和食
- 日本料理
- 日本風
<dl>
<dt>和食</dt>
<dd>日本料理</dd>
<dd>日本風</dd>
</dl>
「 ul 」は黒丸「 ol 」は数字になります。「 dl 」は定義するときに利用します。
■ 黒丸（ul）は変更することもできます。
- list-style-type:square
- list-style-type:circle
- list-style-type:none
- list-style-image
◇ list-style-type:square
<ul>
<li>北海道</li>
<li>本州</li>
<li>四国</li>
<li>九州</li>
</ul>
- CSS
- ul { list-style-type:square }
◇ list-style-type:circle
- CSS
- ul { list-style-type:circle }
◇ list-style-type:none
- CSS
- ul { list-style-type:none }
◇ list-style-image
- CSS
- ul { list-style-image:url( ); }
※ ( )はスタイルシートの場所から画像の場所を記載します。
組み合わせて使用できます
「 ul 」「 ol 」は組み合わせて使用できます。
- 和食
- 中華
- 洋食
終了タグは下のようになります。
<ol>
<li>和食
<ul>
<li>日本料理</li>
</ul></li>
<li>中華</li>
<li>洋食
<ul class="image">
<li>西洋料理</li></ul></li>
</ol>