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.md | 158 +++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/ja/web/css/list-style/index.md (limited to 'files/ja/web/css/list-style/index.md') 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