From 969de7bff46d070600f47bdcb83d6b88a0dfba27 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Dec 2021 02:26:08 +0900 Subject: CSS Scrollbar のプロパティ文書の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/scrollbar-color/index.html | 121 -------------------------- files/ja/web/css/scrollbar-color/index.md | 121 ++++++++++++++++++++++++++ files/ja/web/css/scrollbar-width/index.html | 128 ---------------------------- files/ja/web/css/scrollbar-width/index.md | 128 ++++++++++++++++++++++++++++ 4 files changed, 249 insertions(+), 249 deletions(-) delete mode 100644 files/ja/web/css/scrollbar-color/index.html create mode 100644 files/ja/web/css/scrollbar-color/index.md delete mode 100644 files/ja/web/css/scrollbar-width/index.html create mode 100644 files/ja/web/css/scrollbar-width/index.md (limited to 'files') diff --git a/files/ja/web/css/scrollbar-color/index.html b/files/ja/web/css/scrollbar-color/index.html deleted file mode 100644 index a546ce3983..0000000000 --- a/files/ja/web/css/scrollbar-color/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: scrollbar-color -slug: Web/CSS/scrollbar-color -tags: - - CSS - - CSS プロパティ - - Reference - - scrollbar-color - - スクロールバー -translation_of: Web/CSS/scrollbar-color ---- -
{{CSSRef}}
- -

CSS の scrollbar-color プロパティは、スクロールバーのトラックとつまみの色を設定します。

- -

トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

- -

つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。

- -
{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}
- -

{{CSSInfo}}

- -

構文

- -
/* キーワード値 */
-scrollbar-color: auto;
-scrollbar-color: dark;
-scrollbar-color: light;
-
-/* <color> 値 */
-scrollbar-color: rebeccapurple green;   /* 二つの有効な色。
-一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
-
-/* グローバル値 */
-scrollbar-color: inherit;
-scrollbar-color: initial;
-scrollbar-color: unset;
-
- -

値

- -
-
<scrollbar-color>
-
スクロールバーの色を定義します。 - - - - - - - - - - - - - - - - - - - -
auto他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。
dark暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。
light明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。
<color> <color>最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。
- -
-

メモ: ユーザーエージェントはビューポートのルート要素に、何らかの scrollbar-color の値を適用しなければなりません。

-
-
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

CSS

- -
.scroller {
-  width: 300px;
-  height: 100px;
-  overflow-y: scroll;
-  scrollbar-color: rebeccapurple green;
-}
- -

HTML

- -
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
- -

結果

- -
{{EmbedLiveSample("Example")}}
- -

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

- -

scrollbar-color プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}初回定義
- -

ブラウザーの互換性

- -
{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/ja/web/css/scrollbar-color/index.md b/files/ja/web/css/scrollbar-color/index.md new file mode 100644 index 0000000000..a546ce3983 --- /dev/null +++ b/files/ja/web/css/scrollbar-color/index.md @@ -0,0 +1,121 @@ +--- +title: scrollbar-color +slug: Web/CSS/scrollbar-color +tags: + - CSS + - CSS プロパティ + - Reference + - scrollbar-color + - スクロールバー +translation_of: Web/CSS/scrollbar-color +--- +
{{CSSRef}}
+ +

CSS の scrollbar-color プロパティは、スクロールバーのトラックとつまみの色を設定します。

+ +

トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。

+ +

つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。

+ +
{{EmbedInteractiveExample("pages/css/scrollbar-color.html")}}
+ +

{{CSSInfo}}

+ +

構文

+ +
/* キーワード値 */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* <color> 値 */
+scrollbar-color: rebeccapurple green;   /* 二つの有効な色。
+一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
+
+/* グローバル値 */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+
+ +

値

+ +
+
<scrollbar-color>
+
スクロールバーの色を定義します。 + + + + + + + + + + + + + + + + + + + +
auto他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。
dark暗い色のスクロールバーを示し、プラットフォームで提供している暗い色のスクロールバー化、暗い色のカスタムスクロールバーのどちらかになります。
light明るい色のスクロールバーを示し、プラットフォームで提供している明るい色のスクロールバー化、明るい色のカスタムスクロールバーのどちらかになります。
<color> <color>最初の色をスクロールバーのつまみに、二番目の色をスクロールバーのトラックに適用します。
+ +
+

メモ: ユーザーエージェントはビューポートのルート要素に、何らかの scrollbar-color の値を適用しなければなりません。

+
+
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

結果

+ +
{{EmbedLiveSample("Example")}}
+ +

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

+ +

scrollbar-color プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを確認してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}初回定義
+ +

ブラウザーの互換性

+ +
{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/ja/web/css/scrollbar-width/index.html b/files/ja/web/css/scrollbar-width/index.html deleted file mode 100644 index 936d1cbddc..0000000000 --- a/files/ja/web/css/scrollbar-width/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: scrollbar-width -slug: Web/CSS/scrollbar-width -tags: - - CSS - - CSS Property - - CSS スクロールバー - - CSS プロパティ - - Reference - - css scrollbars - - 'recipe:css-property' - - scrollbar-width -translation_of: Web/CSS/scrollbar-width ---- -
{{CSSRef}}
- -

scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

- -
{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}
- -

{{cssinfo}}

- -

構文

- -
/* キーワード値 */
-scrollbar-width: auto;
-scrollbar-width: thin;
-scrollbar-width: none;
-
-/* グローバル値 */
-scrollbar-width: inherit;
-scrollbar-width: initial;
-scrollbar-width: unset;
-
- -

値

- -
-
<scrollbar-width>
-
スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。 - - - - - - - - - - - - - - - -
autoプラットフォーム既定のスクロールバーの幅です。
thinプラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。
noneスクロールバーが表示されませんが、要素はスクロール可能です。
- -
-

注: ユーザーエージェントは、ビューポートのルート要素に何らかの scrollbar-width の値を設定する必要があります。

-
-
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

CSS

- -
.scroller {
-  width: 300px;
-  height: 100px;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-}
- -

HTML

- -
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

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

- -

このプロパティは注意して使用してください。 — scrollbar-width を thin または none に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

- -

WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.scrollbar-width")}}

- -

関連情報

- - diff --git a/files/ja/web/css/scrollbar-width/index.md b/files/ja/web/css/scrollbar-width/index.md new file mode 100644 index 0000000000..936d1cbddc --- /dev/null +++ b/files/ja/web/css/scrollbar-width/index.md @@ -0,0 +1,128 @@ +--- +title: scrollbar-width +slug: Web/CSS/scrollbar-width +tags: + - CSS + - CSS Property + - CSS スクロールバー + - CSS プロパティ + - Reference + - css scrollbars + - 'recipe:css-property' + - scrollbar-width +translation_of: Web/CSS/scrollbar-width +--- +
{{CSSRef}}
+ +

scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

+ +
{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}
+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* グローバル値 */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+
+ +

値

+ +
+
<scrollbar-width>
+
スクロールバーの幅を、長さまたはキーワードのどちらかで定義します。キーワードが使用する場合は、以下の値のうちの一つでなければなりません。 + + + + + + + + + + + + + + + +
autoプラットフォーム既定のスクロールバーの幅です。
thinプラットフォームが提供している細いスクロールバー、またはプラットフォーム既定のスクロールバーの幅よりも細いスクロールバーです。
noneスクロールバーが表示されませんが、要素はスクロール可能です。
+ +
+

注: ユーザーエージェントは、ビューポートのルート要素に何らかの scrollbar-width の値を設定する必要があります。

+
+
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

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

+ +

このプロパティは注意して使用してください。 — scrollbar-width を thin または none に設定すると、作者が別なスクロールの仕組みを提供していない限り、スクロールすることが困難または不可能になります。そのようなコンテンツはスワイプのジェスチャーやマウスホイールでスクロールできるものの、端末によっては代替スクロール手段がないことがあります。

+ +

WCAG 基準 2.1.1 (キーボード) は、長らく基本的なキーボードのアクセシビリティを勧告してきており、これはコンテンツ領域のスクロールも含みます。また、 WCAG 2.1 で導入された基準 2.5.5 (対象の寸法) では、タッチ対象の幅と高さを 44px 以上にすることを推奨しています (ただし、この問題は高解像度の画面ではさらに複雑になるため、十分なテストが必要です)。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.scrollbar-width")}}

+ +

関連情報

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