CSSでスクロールバーのスタイルをカスタマイズする方法
作成日:2025.02.08
CSSを使ってスクロールバーの色や太さをカスタマイズする方法を解説します。主要なブラウザでの対応状況も含めて、具体的なコード例を紹介します。
error この記事は最終更新日から1年以上が経過しています。
CSSで overflow: scroll; を設定した時のスクロールバーのスタイルをちょっと調整したい時用のメモ。
スクロールバーの色を設定する
scrollbar-color: #e6e1e0 #f3f0f0;一つ目の色指定が、スクロールバーのつまみ部分、二つ目がスクロールバーの背景色になる。
※主要なブラウザでは、Safariが未対応。参考: scrollbar-color - CSS: カスケーディングスタイルシート | MDN
スクロールバーの太さを設定する
scrollbar-width: thin;指定できるのは以下の三種類の値。
- auto
- ブラウザのデフォルト値
- thin
- 細いスクロールバー
- none
- スクロールバーを非表示(要素はスクロール可能)
奈良市を拠点に、27年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
LaravelのViteプラグインでfontaine未導入警告が出たときの判断と対応
2026.09.09
Laravelの公式ViteプラグインでWebフォントを設定した際に表示される、fontaine未導入警告について解説します。fontaineはWebフォント自体に必須のパッケージではなく、代替フォントの大きさを調整し、フォント切り替え時の画面移動を抑えるためのビルド時パッケージです。警告とビルド失敗の違い、fontaineを導入する場合とoptimizedFallbacks: falseで無効化する場合の判断基準、CLSの確認方法を整理します。
highlight.js 入門 ― CDN を活用したシンタックスハイライトの基本ガイド
2025.06.05
highlight.js を使ったシンタックスハイライトの導入方法を具体的なコード例とともに紹介します。CDN 経由でライブラリを読み込み、HTML コード内の <pre> と <code> タグを利用して、正確な言語指定とスタイル適用を実現する手法を分かりやすく解説。初心者でもすぐに実装できる内容となっています。
Google FontsのMaterial Symbols 基本設定メモ
2024.12.10
Google FontsのMaterial Symbols and Iconsの基本的な使い方をまとめた記事です。導入手順や、アイコンとテキストを綺麗に揃えるためのCSS設定例について解説しています。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。