list-style
CSSでは、リストのマーカー種類や位置を変えることができます。
本ページでは、list-styleプロパティについて説明します。
list-styleプロパティとは
list-styleプロパティを使うと、リストのマーカー種類や位置を変えることができます。また、マーカーを画像にすることもできます。
list-styleは、list-style-typeと、list-style-position、list-style-imageを一括して設定できます。
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要素に適用すると、以下のように表示されます。
マーカーが白丸になっています。デフォルトは、黒丸です。
もう1つの例です。
【list-styleの利用例(マーカーを画像にする)】
.test { list-style: inside url("../images/image1.png"); }
上記をクラスtestでul要素に適用すると、以下のように表示されます。
マーカーが画像で表示されています。また、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プロパティ一覧」に戻る