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

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

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

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

ul.名前{
list-style-type:種類;
}

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

HTML

<ul class="sample">
<li>テストです。</li>
<li>テストです。</li>
<li>テストです。</li>
</ul>

CSS

ul.sample{
list-style-type:square;
}

表示サンプル

screenshot 402

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

色々な先頭のマーク

・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をつけた数字

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


イベント

2017/12/05(火)
Design Thinking Square