Web/CSS/CSS_scrollbars_styling を更新

files/ja/web/css/css_scrollbars_styling/index.md

@@ -1,41 +1,65 @@
 ---
-title: CSS スクロールバー
+title: CSS スクロールバースタイル設定
 slug: Web/CSS/CSS_scrollbars_styling
+l10n:
+  sourceCommit: a4ae225903c2784a3d74b43f311e05f208e42c91
 ---
 
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-**CSS スクロールバー** (CSS Scrollbars) は、 2000 年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。
+**CSS スクロールバースタイル設定** (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。
 
-## 基本的な例
+## スクロールバースタイル設定の実例
 
-この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。
+この例では、赤いつまみとオレンジ色のトラックを持つ細いスクロールバーが定義されています。つまみを見るには、テキストをスクロールする必要があります。スクロールバーが可視状態になったら、カーソルをスクロールバーの上に移動させるとトラックが表示されます。
 
-```css
-.scroller {
+```css hidden
+.poem {
   width: 300px;
   height: 100px;
-  overflow-y: scroll;
-  scrollbar-color: rebeccapurple green;
-  scrollbar-width: thin;
+  border: 1px solid;
 }
 ```
 
-### HTML
+```css
+.poem {
+  overflow: scroll;
+  scrollbar-color: red orange;
+  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>
+```html hidden
+<blockquote class="poem">
+  <h3>A Small Needful Fact</h3>
+  <pre>
+Is that Eric Garner worked
+for some time for the Parks and Rec.
+Horticultural Department, which means,
+perhaps, that with his very large hands,
+perhaps, in all likelihood,
+he put gently into the earth
+some plants which, most likely,
+some of them, in all likelihood,
+continue to grow, continue
+to do what such plants do, like house
+and feed small and necessary creatures,
+like being pleasant to touch and smell,
+like converting sunlight
+into food, like making it easier
+for us to breathe.
+</pre
+  >
+  <p>
+    - <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
+  </p>
+</blockquote>
 ```
 
-### 結果
+{{EmbedLiveSample("Scrollbar_styling_in_action")}}
 
-{{EmbedLiveSample("Basic_Example")}}
+> [!NOTE]
+> スクロールバーをカスタマイズする際は、つまみとトラックが周囲の背景と十分なコントラストを持つようにしてください。また、タッチ入力を使用する人のために、スクロールバーのヒット領域が十分な大きさであることを確認してください。
 
 ## リファレンス
 
@@ -44,26 +68,29 @@ slug: Web/CSS/CSS_scrollbars_styling
 - {{CSSxRef("scrollbar-width")}}
 - {{CSSxRef("scrollbar-color")}}
 
+## 関連概念
+
+- {{CSSxRef("overflow-block")}} プロパティ
+- {{CSSxRef("overflow-inline")}} プロパティ
+- {{CSSxRef("overflow-x")}} プロパティ
+- {{CSSxRef("overflow-y")}} プロパティ
+- {{CSSxRef("overflow")}} 一括指定プロパティ
+- {{CSSxRef("overflow-clip-margin")}} プロパティ
+- {{CSSxRef("scrollbar-gutter")}} プロパティ
+- {{CSSxRef("scroll-behavior")}} プロパティ
+- {{cssxref("scroll-margin")}} 一括指定プロパティ
+- {{cssxref("scroll-padding")}} 一括指定プロパティ
+- {{cssxref("scroll-snap-align")}} プロパティ
+- {{cssxref("scroll-snap-stop")}} プロパティ
+- {{cssxref("scroll-snap-type")}} プロパティ
+- {{CSSxRef("::-webkit-scrollbar")}} 擬似要素
+- {{glossary("scroll container", "スクロールコンテナー")}} 用語集の用語
+- [`scrollbar`](/ja/docs/Web/Accessibility/ARIA/Roles/scrollbar_role) ARIA ロール
+
 ## 仕様書
 
 {{Specifications}}
 
-## アクセシビリティの考慮
-
-スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。
-
-- [Baseline Rules for Scrollbar Usability | Adrian Roselli](http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html)
-
-## ブラウザーの互換性
-
-### scrollbar-width
-
-{{Compat}}
-
-### scrollbar-color
-
-{{Compat}}
-
 ## 関連情報
 
 - {{CSSxRef("::-webkit-scrollbar")}}