aboutsummaryrefslogtreecommitdiff
path: root/files
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-12-29 22:16:57 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2022-01-05 20:18:38 +0900
commit438ae4cd3e1286af4371730d8ef00a828f084162 (patch)
tree6906f0ed7e6834d8ae39fb741ce1f12ad7ad2a5b /files
parent828d451531b184ef07c53f24f850a39370298528 (diff)
downloadtranslated-content-438ae4cd3e1286af4371730d8ef00a828f084162.tar.gz
translated-content-438ae4cd3e1286af4371730d8ef00a828f084162.tar.bz2
translated-content-438ae4cd3e1286af4371730d8ef00a828f084162.zip
2021/08/13 時点の英語版に同期
Diffstat (limited to 'files')
-rw-r--r--files/ja/web/css/css_scrollbars/index.md91
1 files changed, 36 insertions, 55 deletions
diff --git a/files/ja/web/css/css_scrollbars/index.md b/files/ja/web/css/css_scrollbars/index.md
index 94f0f405f0..e77e4976fe 100644
--- a/files/ja/web/css/css_scrollbars/index.md
+++ b/files/ja/web/css/css_scrollbars/index.md
@@ -3,94 +3,75 @@ title: CSS スクロールバー
slug: Web/CSS/CSS_Scrollbars
tags:
- CSS
- - CSS スクロールバー
- - Overview
+ - ガイド
- 概要
+ - CSS スクロールバー
translation_of: Web/CSS/CSS_Scrollbars
---
-<div>{{CSSRef}}{{SeeCompatTable}}</div>
+{{CSSRef}}{{SeeCompatTable}}
-<p class="summary"><span class="seoSummary"><ruby><strong>CSS スクロールバー</strong><rp> (</rp><rt>CSS Scrollbars</rt><rp>) </rp></ruby>は、2000年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。</span></p>
+**CSS スクロールバー** (CSS Scrollbars) は、 2000 年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。
-<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2>
+## 基本的な例
-<p>この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。</p>
+この例では、緑色のトラックと紫色のつまみを持った細いスクロールバーを使用してみました。
-<div id="Example">
-<pre class="brush:css">.scroller {
+```css
+.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
-}</pre>
+}
+```
-<h3 id="HTML">HTML</h3>
+### HTML
-<pre class="brush: html">&lt;div class="scroller"&gt;
+```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.
-&lt;/div&gt;</pre>
+</div>
+```
-<h3 id="Result" name="Result">結果</h3>
+### 結果
-<p>{{EmbedLiveSample("Example")}}</p>
-</div>
+{{EmbedLiveSample("Basic_Example")}}
-<h2 id="Reference" name="Reference">リファレンス</h2>
+## リファレンス
-<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3>
+### CSS プロパティ
-<div class="index">
-<ul>
- <li>{{CSSxRef("scrollbar-width")}}</li>
- <li>{{CSSxRef("scrollbar-color")}}</li>
-</ul>
-</div>
+- {{CSSxRef("scrollbar-width")}}
+- {{CSSxRef("scrollbar-color")}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Scrollbars")}}</td>
- <td>{{Spec2("CSS Scrollbars")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
+| 仕様書 | 状態 | 備考 |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("CSS Scrollbars")}} | {{Spec2("CSS Scrollbars")}} | 初回定義 |
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
+## アクセシビリティの考慮
-<p>スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。</p>
+スクロールバーをカスタマイズする場合は、十分なコントラストがあることと、ヒット領域がタッチ入力を使っている人が操作できるだけ大きいかどうかを考慮してください。
-<ul>
- <li><a href="http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html">Baseline Rules for Scrollbar Usability | Adrian Roselli</a></li>
-</ul>
+- [Baseline Rules for Scrollbar Usability | Adrian Roselli](http://adrianroselli.com/2019/01/baseline-rules-for-scrollbar-usability.html)
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<h3 id="scrollbar-width">scrollbar-width</h3>
+### scrollbar-width
-<div>{{Compat("css.properties.scrollbar-width")}}</div>
+{{Compat("css.properties.scrollbar-width")}}
-<h3 id="scrollbar-color">scrollbar-color</h3>
+### scrollbar-color
-<div>{{Compat("css.properties.scrollbar-color")}}</div>
+{{Compat("css.properties.scrollbar-color")}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li>{{CSSxRef("::-webkit-scrollbar")}}</li>
- <li>{{CSSxRef("-ms-overflow-style")}}</li>
-</ul>
+- {{CSSxRef("::-webkit-scrollbar")}}
+- {{CSSxRef("-ms-overflow-style")}}