CSS: ol, ul, li タグ【準備編】

3つのタイプのリストタグ

ナビゲーションやリンクなどこの３つのタイプのタグを使う事が多いと思います。機能を使って自分だけのオリジナルを作ってみましょう！

• ol (ordered list)
• ul (unordered list)
• li (list)

5種類のol (ordered list)

• Decimal numbers (1, 2, 3, 4)
• Alphabetically ordered, lowercase (a, b, c, d)
• Alphabetically ordered uppercase )A, B, C, D)
• Roman numbers, lowercase )i, ii, iii, iv)
• Roman numbers, uppercase )I, II, III, IV)

17種類のli(list)タイプ

1. armenian

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :armenian;
    }

2. circle

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :circle;
    }

3. decimal

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :decimal;
    }

4. decimal-leading-zero

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :decimal-leading-zero;
    }

5. disc

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :disc;
    }

6. georgian

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :georgian;
    }

7. inherit

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :inherit;
    }

8. lower-alpha

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :lower-alpha;
    }

9. lower-greek

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :lower-greek;
    }

10. lower-latin

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :lower-latin;
    }

11. lower-roman

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :lower-roman;
    }

12. none

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :none;
    }

13. square

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :square;
    }

14. upper-alpha

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :upper-alpha;
    }

15. upper-latin

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

 li {
    list-style-type :upper-latin;
    }

16. upper-roman

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li { list-style-type :upper-roman; }

17. georgian

• Apple
• Orange
• Cherry
• Peach

HTML

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Cherry</li>
    <li>Peach</li>
</ul>

CSS

li {
    list-style-type :georgian;
    }