CSS入門 | CSS基本プロパティ | CSSリスト

list-style-typeプロパティ

リスト要素の前に位置する数字や記号をマーカーと呼ぶ。 list-style-typeプロパティを使うと、リストにさまざまなマーカーを適用できる。

<style>
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .upperAlpha { list-style-type: upper-alpha; }
    .lowerRoman { list-style-type: lower-roman; }
</style>

使用できるマーカーについての詳細は、HTMLリストのレッスンで確認できる。

list-style-imageプロパティ

list-style-imageプロパティを使うと、マーカーとして独自の画像を使用できる。

<style>
    .imageMarker { list-style-image: url("/examples/images/img_list_marker.png"); }
</style>

list-style-positionプロパティ

list-style-positionプロパティを使うと、リスト要素の位置を設定できる。 list-style-positionプロパティの既定値はoutsideである。

<style>
    .outside { list-style-position: outside; }
    .inside { list-style-position: inside; }
</style>

list-styleプロパティを一度に適用する

上で説明したすべてのlist-styleプロパティを使ったスタイルを1行で設定できる。

<style>
    ul { list-style: square inside url("/examples/images/img_list_marker.png"); }
</style>

リストに背景色を適用する

CSSを使うと、リスト全体だけでなく、リスト要素ごとにもそれぞれ背景色を設定できる。

<style>
    ul { background: #D2691E; padding: 15px; }
    ol { background: #6495ED; padding: 15px; }
    ul li { background: #DEB887; margin: 5px; }
    ol li { background: #00FFFF; margin-left: 15px; }
</style>

CSS list-styleプロパティ

プロパティ	説明
list-style	すべてのlist-styleプロパティを使ったスタイルを1行で設定できる。
list-style-type	リスト要素のマーカーを設定する。
list-style-image	リスト要素のマーカーとして使用する画像を設定する。
list-style-position	リスト要素の位置を設定する。