From 162335e5a5dd56618d1df2fd5173d8c98f193c19 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Sep 2021 09:39:13 +0900 Subject: Web/CSS/list-style の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/list-style/index.html | 158 --------------------------------- files/ja/web/css/list-style/index.md | 158 +++++++++++++++++++++++++++++++++ 2 files changed, 158 insertions(+), 158 deletions(-) delete mode 100644 files/ja/web/css/list-style/index.html create mode 100644 files/ja/web/css/list-style/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/list-style/index.html b/files/ja/web/css/list-style/index.html deleted file mode 100644 index 72fbb70159..0000000000 --- a/files/ja/web/css/list-style/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: list-style -slug: Web/CSS/list-style -tags: - - CSS - - CSS プロパティ - - CSS リスト - - Reference - - list-style - - list-style-image - - list-style-position - - list-style-type - - リファレンス -translation_of: Web/CSS/list-style ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/list-style.html")}}
- - - -
-

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

-
- -

構文

- -
/* 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: unset;
-
- -

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
-
リストスタイルは使用されません。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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;
-}
- -

結果

- -

{{EmbedLiveSample('Examples', 'auto', 220)}}

- -

アクセシビリティの考慮事項

- -

Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。

- -
ul {
-  list-style: none;
-}
-
-ul li::before {
-  content: "\200B";
-}
-
- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}変更なし。
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.list-style")}}

- -

関連情報

- - diff --git a/files/ja/web/css/list-style/index.md b/files/ja/web/css/list-style/index.md new file mode 100644 index 0000000000..72fbb70159 --- /dev/null +++ b/files/ja/web/css/list-style/index.md @@ -0,0 +1,158 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - CSS プロパティ + - CSS リスト + - Reference + - list-style + - list-style-image + - list-style-position + - list-style-type + - リファレンス +translation_of: Web/CSS/list-style +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+ + + +
+

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

+
+ +

構文

+ +
/* 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: unset;
+
+ +

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
+
リストスタイルは使用されません。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 'auto', 220)}}

+ +

アクセシビリティの考慮事項

+ +

Safari は順序なしリストで list-style の値に none が適用されると、アクセシビリティツリー上でリストとして認識されないという問題があります。これを解決するためには、それぞれのリスト項目の前にゼロ幅スペースを擬似コンテンツとして追加してください。これでデザインがこのバグの影響を受けず、リスト項目が正しくない記述にはなりません。

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+
+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}変更なし。
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.list-style")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf