| CARVIEW |
Select Language
HTTP/2 200
x-guploader-uploadid: AAwnv3J6XuFKMvGb-xhfkKalJ9rZaAhiPukZzVFkUZsnOmSn5xHyDOuJTZFPhNJ41mscHTaf
x-goog-generation: 1759886020098025
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 274712
x-goog-meta-goog-reserved-file-mtime: 1759883917
x-goog-hash: crc32c=u4Bhww==, md5=N37HX2CYtpIc1XnWZHnZFw==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Wed, 08 Oct 2025 21:16:11 GMT
cache-control: public, max-age=3600
last-modified: Wed, 08 Oct 2025 01:13:40 GMT
etag: W/"377ec75f6098b6921cd579d66479d917"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: beb33b1d5cb4f29f86d5fbc4a4158230
date: Wed, 08 Oct 2025 20:16:11 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
scrollbar-color - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
scrollbar-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
scrollbar-color は CSS のプロパティで、スクロールバーのトラックとつまみの色を設定します。
トラックはスクロールバーの背景を表し、一般的にスクロール位置にかかわらず固定されています。
つまみはスクロールバーの動く部分で、ふつうはトラックの上を動きます。
scrollbar-color の値がドキュメントのルート要素に設定されている場合、その値はビューポートのスクロールバーに適用されます。
構文
css
/* キーワード値 */
scrollbar-color: auto;
/* <color> 値 */
scrollbar-color: rebeccapurple green; /* 二つの有効な色。
一つ目はスクロールバーのつまみ、二つ目はトラックに適用される。 */
/* グローバル値 */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
値
<scrollbar-color>-
スクロールバーの色を定義します。
auto他にスクロールバーに関する色のプロパティがない場合、スクロールバーの位置を表す既定の表示になります。 <color> <color>最初の色をスクロールバーのつまみに、 2 番目の色をスクロールバーのトラックに適用します。
メモ:
@media (forced-colors: active) とすると、scrollbar-color が auto になります。
アクセシビリティ
scrollbar-color プロパティで色の値を指定して使用する場合、指定した色の間に十分なコントラストがあることを確認してください。キーワード値の場合、ユーザーエージェントは使用する色の間に十分なコントラストがあることを保証してください。 Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 を参照してください。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | スクロールするボックス |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
scrollbar-color =
auto |
<color>{2}
例
あふれた場合のスクロールバーに着色する
CSS
css
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
HTML
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>
結果
仕様書
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |
ブラウザーの互換性
Loading…