今回は、リストの先頭に『・』や数字を表示させる『list-style』について解説致します。
リストの先頭にアクセントをつけるlist-styleの使い方
百聞は一見にしかずということで、
まずは、使用例のデモをご覧ください。
See the Pen yLOqQOV by ryu (@ryu-no-sss) on CodePen.
このように、list-style使うと、リストの先頭に様々なアクセントをつけることができます。
わかりやすいように、list-styleの種類を表にまとめておきますね！
| none | 『・』を消す |
| square | 『■』四角いリスト |
| disc | 『●』黒丸のリスト |
| circle | 『○』白丸のリスト |
| decimal | 『1,2,3…」数字のリスト |
| lower-alpha | 『a,b,c…』アルファベットのリスト |
| hiragana | 『あ、い、う…』ひらがなのリスト |
また、画像をリストにすることも可能です。
画像をリストにする場合は、
『list-style: url(“画像のパス”);』と記載しましょう！
まとめ
今回は、リストの先頭にアクセントをつけるlist-styleの使い方について解説しました。
他にも、実戦でよく使うCSSコード（テキスト要素）を以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
タグ
