list-style
list-style は CSS の一括指定プロパティで、リストのすべてのスタイルプロパティを設定します。
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* type */
list-style: square;
/* image */
list-style: url('../img/shape.png');
/* position */
list-style: inside;
/* type | position */
list-style: georgian inside;
/* type | image | position */
list-style: lower-roman url('../img/shape.png') outside;
/* キーワード値 */
list-style: none;
/* グローバル値 */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: unset;
list-style プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 list-style-type と list-style-image が両方とも設定された場合、 list-style-type は画像が利用できない場合の予備として使用されます。
値
list-style-type-
list-style-typeを参照して下さい。 list-style-image-
list-style-imageを参照して下さい。 list-style-position-
list-style-positionを参照して下さい。 none-
リストスタイルは使用されません。
アクセシビリティの考慮
注意すべき例外として、Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識しません。
この問題に対処する最も簡単な方法は、明示的に role="list" をマークアップ内の <ul> 要素に追加することです。これにより、デザインに影響を与えることなく、リストの意味を復元することができます。
マークアップを変更できない場合の CSS のみの解決策もあります。一つは、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加することです。
ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
もう一つは、 list-style プロパティに url の値を適用する方法です。
nav ol, nav ul {
list-style: none;
}
/* こうします */
nav ol, nav ul {
list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}
これらの CSS による回避策は HTML での解決ができない場合のみに使用してください。また、ユーザーの使い勝手に悪影響を与えないことをテストした後にのみ使用してください。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | リスト項目 |
| 継承 | あり |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
例
リストスタイルの種類と位置の設定
HTML
List 1
<ul class="one">
<li>List Item1</li>
<li>List Item2</li>
<li>List Item3</li>
</ul>
List 2
<ul class="two">
<li>List Item A</li>
<li>List Item B</li>
<li>List Item C</li>
</ul>
CSS
.one {
list-style: circle;
}
.two {
list-style: square inside;
}
例
仕様書
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # list-style-property |
ブラウザーの互換性
BCD tables only load in the browser