From ac4b45d56cdd47630a4982f5ec9472f48eccdf4d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Sep 2021 10:09:52 +0900 Subject: Web/CSS/list-style を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/21 時点の英語版に同期 --- files/ja/web/css/list-style/index.md | 200 ++++++++++++++++++----------------- 1 file changed, 104 insertions(+), 96 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/list-style/index.md b/files/ja/web/css/list-style/index.md index 72fbb70159..d9ff714936 100644 --- a/files/ja/web/css/list-style/index.md +++ b/files/ja/web/css/list-style/index.md @@ -3,31 +3,35 @@ title: list-style slug: Web/CSS/list-style tags: - CSS + - CSS Lists - CSS プロパティ - - CSS リスト - Reference - - list-style - - list-style-image - - list-style-position - - list-style-type - - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.list-style translation_of: Web/CSS/list-style --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の list-style プロパティは一括指定で、リストスタイルプロパティの {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}} を設定します。

+**`list-style`** は CSS の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、リストのすべてのスタイルプロパティを設定します。 -
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+{{EmbedInteractiveExample("pages/css/list-style.html")}} - - -

メモ: このプロパティはリスト項目、すなわち {{cssxref("display")}}: list-item; の要素に適用されます。既定では {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素（ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}）に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。

+> **Note:** このプロパティはリスト項目、すなわち `{{cssxref("display")}}: list-item;` の要素に適用されます。[既定では](https://www.w3.org/TR/html5/rendering.html#lists) {{HTMLElement("li")}} 要素が含まれます。このプロパティは継承されるので、親要素 (ふつうは {{HTMLElement("ol")}} または {{HTMLElement("ul")}}) に設定すれば、同じリストスタイルを内部のすべての項目に適用できます。
-

構文

+## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`list-style-image`](/ja/docs/Web/CSS/list-style-image) +- [`list-style-position`](/ja/docs/Web/CSS/list-style-position) +- [`list-style-type`](/ja/docs/Web/CSS/list-style-type) -
/* type */
+## 構文
+
+```css
+/* type */
 list-style: square;
 
 /* image */
@@ -48,111 +52,115 @@ list-style: none;
 /* グローバル値 */
 list-style: inherit;
 list-style: initial;
+list-style: revert;
 list-style: unset;
-
+``` + +`list-style` プロパティは 1 つ、2 つ、3 つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 `list-style-type` は画像が利用できない場合の予備として使用されます。 -

list-style プロパティは1～3つのキーワードを任意の順序で指定します。 {{cssxref("list-style-type")}} と {{cssxref("list-style-image")}} が両方とも設定された場合、 list-style-type は画像が利用できない場合の予備として使用されます。

+### 値 -

値

+- {{cssxref("list-style-type")}} + - : {{cssxref("list-style-type")}} を参照して下さい。 +- {{cssxref("list-style-image")}} + - : {{cssxref("list-style-image")}} を参照して下さい。 +- {{cssxref("list-style-position")}} + - : {{cssxref("list-style-position")}} を参照して下さい。 +- `none` + - : リストスタイルは使用されません。 -
-
{{cssxref("list-style-type")}}
-
{{cssxref("list-style-type")}} を参照して下さい。
-
{{cssxref("list-style-image")}}
-
{{cssxref("list-style-image")}} を参照して下さい。
-
{{cssxref("list-style-position")}}
-
{{cssxref("list-style-position")}} を参照して下さい。
-
none
-
リストスタイルは使用されません。
-
+## アクセシビリティの考慮 + +注意すべき例外として、Safari は順序なしリストで `list-style` の値に `none` が適用されると、アクセシビリティツリー上でリストとして認識しません。 + +この問題に対処する最も簡単な方法は、明示的に `role="list"` をマークアップ内の `