やさしいホームページ入門
カラーコード / サイトについて / リンク集 / お問い合わせ
ホーム > HTML入門 > リストの表示
番号付きリストを表示する
ol要素は、囲んだ部分のリストの種類が数字であることを意味します。li要素は囲んだ部分をリスト化します。ol要素でli要素を囲んで使います。リストは1から始まります。
<ol>
<li>ここは一つ目のリストになります。</li>
<li>ここは二つ目のリストになります。</li>
<li>ここは三つ目のリストになります。</li>
</ol>
-表示結果-
  1. ここは一つ目のリストになります。
  2. ここは二つ目のリストになります。
  3. ここは三つ目のリストになります。
記号付きリストを表示する
ul要素は囲んだ部分のリストの種類が記号であることを意味します。使い方は、ol要素と同じです。
<ul>
<li>ここは一つ目のリストになります。</li>
<li>ここは二つ目のリストになります。</li>
<li>ここは三つ目のリストになります。</li>
</ul>
-表示結果-
  • ここは一つ目のリストになります。
  • ここは二つ目のリストになります。
  • ここは三つ目のリストになります。
リストの記号(番号)を変える
ol、ul、liの type属性 でolの場合は数字の種類を、ulの場合は記号の種類を変えることが出来ます。liに指定した場合はその部分だけ数字(記号)が変わります。詳しくは表示結果を見てください。
<ol type="1">
<li>type属性を1にしています。</li>
<li>リストの種類を変えています。</li>
</ol>

<ol type="A">
<li>type属性をAにしています。</li>
<li>リストの種類を変えています。</li>
</ol>

<ul type="disc">
<li>type属性をdiscにしています。</li>
<li>リストの種類を変えています。</li>
</ul>

<ul type="square">
<li>type属性をsquareにしています。</li>
<li>リストの種類を変えています。</li>
</ul>

<ul type="circle">
<li>type属性をcircleにしています。</li>
<li>リストの種類を変えています。</li>
</ul>
-表示結果-
  1. type属性を1にしています。
  2. リストの種類を変えています。
  1. type属性をAにしています。
  2. リストの種類を変えています。
  • type属性をdiscにしています。
  • リストの種類を変えています。
  • type属性をsquareにしています。
  • リストの種類を変えています。
  • type属性をcircleにしています。
  • リストの種類を変えています。
用語をリスト化する(インデント)
dl要素で囲んだ部分は、用語であること(他の使い方もあります)を意味します。この中にdt要素とdd要素を書いていきます。dt要素は用語を表し、ddにはその用語の説明を書きます。dd要素を使うと少しインデントされます。
<dl>
<dt>ここに用語の名前を書きます。</dt>
<dd>この部分は少しインデントされて見やすくなります。</dd>
</dl>
-表示結果-
ここに用語の名前を書きます。
この部分は少しインデントされて見やすくなります。