こんにちは朱夏です。
今回は、CSSのリスト要素の点の部分を変更できる「list-style-type」についての話をしていきたいと思います。
リストのスタイルって点と数字くらいじゃないの？
私もそう思っていました。
良くよく調べてみると、点の種類や数字、アルファベットなど多種多様なリストが作れることにびっくりしました。
それらを紹介していきたいと思います。
標準的なリスト<ul>、<ol>の違い
マーカー（点）
カウント（数字）
アルファベット
その他
あとがき
標準的なリスト<ul>、<ol>の違い
標準的なリストである<ul>と<ol>について紹介しておきます。
See the Pen
jObMYXZ by 朱夏 (@syunatsu1)
on CodePen.
<ul>はマーカー(点)、<ol>はカウント(数字)でリストを作ります。
次の項からは、これらにスタイルを付けていきます。
マーカー（点）
マーカータイプのリストについて紹介していきます。
サンプルはこちらです。
See the Pen
vYNXddZ by 朱夏 (@syunatsu1)
on CodePen.
黒点にするスタイルもありますが、初期値と同じなので省略しています。
カウント（数字）
カウント（数字）タイプのリスト表示の種類です。
サンプルはこちら。
See the Pen
KKdgQxY by 朱夏 (@syunatsu1)
on CodePen.
漢数字まで使えるとは思っていませんでした(；・∀・)
アルファベット
アルファベットタイプのリスト表示になります。
サンプルをどうぞ。
See the Pen
dyYpdBV by 朱夏 (@syunatsu1)
on CodePen.
アルファベットの大文字と小文字が選択できるようになっています。
その他
その他枠として、上記以外のものをいくつか紹介したいと思います。
See the Pen
MWajVJK by 朱夏 (@syunatsu1)
on CodePen.
ひらがな以外にも、カタカナを指定する値もあります。
その他枠も種類が豊富で、ヘブライ数字やグルジア数字というものもあります。
最初、アルメニア数字って何？ってなりました(；・∀・)
あとがき
というわけで、リストのスタイルを紹介してみました。
今まで黒点と数字くらいしか使ったことが無かったのですが、こんなにもいろんな種類があることに驚きました。
デザインに合わせてリストのスタイルも変えていきたいと思います。
今回は以上です。
次回もよろしくお願いします。
