list-style

CSSでは、リストのマーカー種類や位置を変えることができます。

本ページでは、list-styleプロパティについて説明します。

list-styleプロパティとは

list-styleプロパティを使うと、リストのマーカー種類や位置を変えることができます。また、マーカーを画像にすることもできます。

list-styleの説明

list-styleは、list-style-typeと、list-style-positionlist-style-imageを一括して設定できます。

list-styleの定義は、以下のとおりです。

【list-styleの定義】
list-style-type || list-style-position || list-style-image | inherit
初期値 disc outside none
適用対象 display:list-itemの要素
継承 する

list-styleプロパティをulやol要素に適用すると、継承によってdisplayがlist-itemのli要素に適用されます。

値の説明

以下は、list-styleで使える値と説明です。

list-style-type
マーカーの種類です。list-style-typeで指定できる値と同じです。
list-style-position
マーカーの表示位置です。list-style-positionで指定できる値と同じです。
list-style-image
マーカーとして表示する画像です。list-style-imageで指定できる値と同じです。

これらの値は、3つとも必須という訳ではなく、1つや2つだけ指定することも可能です。指定する順序も決まっていません。

利用例

list-styleの利用例は、以下のとおりです。

【list-styleの利用例(マーカーを白丸にする)】
.test {
  list-style: circle;
}

上記をクラスtestでul要素に適用すると、以下のように表示されます。

circleを指定した時の表示例

マーカーが白丸になっています。デフォルトは、黒丸です。

もう1つの例です。

【list-styleの利用例(マーカーを画像にする)】
.test {
  list-style: inside url("../images/image1.png");
}

上記をクラスtestでul要素に適用すると、以下のように表示されます。

insideで指定した時の表示例

マーカーが画像で表示されています。また、insideを指定しているため、マーカー位置が境界線の内側になります。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
list-style
【スマートフォン】
項目 Sa An Op Ch Fx Sm
list-style
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

サイト内で関連ページをチェック

ホームページ作成「HTMLへのリスト項目挿入と装飾

CSSプロパティ一覧」に戻る