CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3Li-gVRsiRuzi7QllbFYWxDsImZF--me9eOCu_nK_kYvquNxerYXK9agcWwFniqf4RM
cache-control: public, max-age=3600
expires: Mon, 06 Oct 2025 18:07:25 GMT
last-modified: Mon, 06 Oct 2025 01:12:00 GMT
etag: W/"98da80e7faac2ef3ce417657019e3b35"
x-goog-generation: 1759713120344082
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 269884
x-goog-meta-goog-reserved-file-mtime: 1759711149
x-goog-hash: crc32c=qUQBNg==, md5=mNqA5/qsLvPOQXZXAZ47NQ==
x-goog-storage-class: STANDARD
accept-ranges: none
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: 8cc509daa3ec0d0b50836f0da16b58e5
date: Mon, 06 Oct 2025 17:07:26 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
CSS スクロールバースタイル設定 - CSS: カスケーディングスタイルシート | MDN
Toggle sidebar
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS スクロールバースタイル設定
CSS スクロールバースタイル設定 (CSS scrollbars styling) モジュールは、スクロールバーの視覚的なスタイル設定に使用できるプロパティを定義しています。必要に応じてスクロールバーの幅をカスタマイズできます。また、スクロールバーの背景であるスクロールバーのトラックの色、およびスクロールバーのドラッグ可能なハンドルであるスクロールバーのつまみの色もカスタマイズできます。
スクロールバースタイル設定の実例
この例では、赤いつまみとオレンジ色のトラックを持つ細いスクロールバーが定義されています。つまみを見るには、テキストをスクロールする必要があります。スクロールバーが可視状態になったら、カーソルをスクロールバーの上に移動させるとトラックが表示されます。
.poem {
width: 300px;
height: 100px;
border: 1px solid;
}
css
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
<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>
メモ: スクロールバーをカスタマイズする際は、つまみとトラックが周囲の背景と十分なコントラストを持つようにしてください。また、タッチ入力を使用する人のために、スクロールバーのヒット領域が十分な大きさであることを確認してください。
リファレンス
>CSS プロパティ
関連概念
overflow-block
プロパティoverflow-inline
プロパティoverflow-x
プロパティoverflow-y
プロパティoverflow
一括指定プロパティoverflow-clip-margin
プロパティscrollbar-gutter
プロパティscroll-behavior
プロパティscroll-margin
一括指定プロパティscroll-padding
一括指定プロパティscroll-snap-align
プロパティscroll-snap-stop
プロパティscroll-snap-type
プロパティ::-webkit-scrollbar
擬似要素- スクロールコンテナー 用語集の用語
scrollbar
ARIA ロール
仕様書
Specification |
---|
CSS Scrollbars Styling Module Level 1> |