HTML リストをつくる olとulとli

こんにちは。レモンティーです。

今回はリストの作成についてです。
つかうのはOL・UL・Liの3種類のタグです。

OLOrdered Listの略で
名前の通り、順番に数字がついたリストです。

ULUnordered Listの略で
順番の数字無しのリストです。

Liタグはこれらのlistの内容です。

言葉ではピンときにくいので実際に見てみます

OL
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
UL
  • あいうえお
  • かきくけこ
  • さしすせそ

たしかに数字の有無が違いますね。
HTMLは↓のようになっていて、olとulが違うだけです。

<ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>

<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>


さらにこれらにはTypeという属性があって
数字や黒丸を別のものに変更できます

まずはULからみてみます
ULの場合はTypeにはdisc,circle,squareのいづれかが設定できます。

例えばTypeをdiscにすると、↓のように黒丸になります。(デフォルトでした笑)

  • あいうえお
  • かきくけこ
  • さしすせそ
HTMLは↓のようになってます。

<ul type="disc">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>

他にもcircleで白丸、squareで四角になります。

↓circle

  • あいうえお
  • かきくけこ
  • さしすせそ

↓square

  • あいうえお
  • かきくけこ
  • さしすせそ


次にOLの場合です。
OLの場合はtypeには1、A、a、I、iのいづれかが設定できます
それぞれ
数字、アルファベット大文字、アルファベット小文字、ローマ数字大文字、ロー
マ数字小文字
になります

↓のような感じです。

typeが1の場合

  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがAの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがaの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがIの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ
typeがiの場合
  1. あいうえお
  2. かきくけこ
  3. さしすせそ

今回はこれでおしまいです。
sawalemounity.hatenablog.com

sawalemounity.hatenablog.com

sawalemounity.hatenablog.com