CSSのlist-style-typeでリストのスタイルを設定する方法

CSSのlist-style-typeプロパティは、リストの見た目を設定するプロパティです。具体的には、リストの先頭のマークを変更することができます。記号だけでなく、数字やアルファベットも指定できる為とても便利です。

list-style-typeでリストのスタイルを設定する方法

HTMLでリストを作成し、CSSでリストのスタイルの設定をしていきます。CSSの記述の仕方は以下の通りです。

実際に見てみましょう。今回は、先頭のマークが黒い四角になるsquareを指定しました。

HTML

CSS

表示サンプル

先頭のマークを黒い四角にすることができました。

色々な先頭のマーク

・list-style-type: none　マークなし

・list-style-type: disc　黒い丸（デフォルトの表示）

・list-style-type: circle　白い丸

・list-style-type: square　黒い四角

・list-style-type:decimal　数字

・list-style-type: decimal-leading-zero　頭に0をつけた数字

他にも色々あるので、必要に応じた先頭のマークを指定してリストを見やすく素敵なデザインに変更してください。