list-style CSS プロパティとは
トピック：リストアイテムの表示スタイルを定義する 、ことができる 個々のリストプロパティ、つまりlist-style-type,list-style-position,およびlist-style-imageを1つの宣言で指定するための簡略化されたプロパティです。
プロパティ list-style
基本 書式：セレクタ {list-style:値;}
実例 コード 1
サンプル コードを試す<style>
ul {
list-style: square inside;
font-size: 2em;
color: darkorange;
}
</style>
<p><code>list-style</code>プロパティは、以下の略語です。</p>
<ul>
<li>list-style-type</li>
<li>list-style-position</li>
<li>list-style-image</li>
</ul>
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | リスト項目 |
|---|
| 継承 : | 継承する |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
CSS Version | CSS1 ～ |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.listStyle="funWebref" |
|---|
| 正規順序 : | 形式文法における値の出現順 |
|---|
| CSSの構文 | list-style: list-style-type list-style-position list-style-image | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
list-style-type | - list-style-typeプロパティの値を提供する あらかじめ定義されたカウンタスタイル（ディスク、正方形、ローマ数字など）の1つとしてリストスタイルタイプを指定するか、独自のカスタマイズされたカウンタスタイルを使用することができます。@counter-styleat-ruleで独自のカスタムカウンタスタイルを作成list-styleし、最初にそのカウンタスタイルの名前を追加するだけでそのスタイルを参照できます。
- 値として文字列を指定することもできます（文字列がマーカーになります）。またはsymbols()、カスタムマーカースタイルを追加するための簡単な方法として関数を使用することもできます。list-style-type詳細と例を参照 。
|
list-style-position | list-style-positionプロパティの値を提供する このプロパティを使用すると::marker、リストアイテム内の擬似要素の位置を制御できます。 |
list-style-image | list-style-imageプロパティの値を提供する このプロパティは、リストマーカーのデフォルトのコンテンツとして使用されるイメージを指定するために使用される |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
実例 コード 2
ol {
list-style: lower-roman;
}
ol {
list-style: lower-roman inside;
}
ul {
list-style: url(bullet.png);
}
@counter-style dice {
system: additive;
additive-symbols: 6 "\2685", 5 "\2684", 4 "\2683", 3 "\2682", 2 "\2681", 1 "\2680";
suffix: " ";
speak-as: numbers;
fallback: square;
}
ol {
list-style: dice;
}
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| list-style | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯7 | フルサポート◯1 |
|---|
symbols | サポートなし✖ | 不明 | フルサポート◯35 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| list-style | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯あり | フルサポート◯12 | フルサポート◯4 | フルサポート◯6 | フルサポート◯1 | フルサポート◯あり |
|---|
symbols | サポートなし✖ | サポートなし✖ | 不明 | フルサポート◯35 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
CSS list-style | CSS プロパティ 値| 意味 使い方 実例 – WebRef