---
title: "CSSでカスタムブラウザーのスクロールバーのスタイルを実装する - 憂いを忘れる一枚"
description: "本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは CSS でデザインできることが分かりました。そこで自分でも試してみて、ついでに CSS コードを拝借しました。当サイトではすでに導"
canonical_url: "https://www.ikxin.com/ja/article/css-scrollbar-styling"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ja
meta:
  "og:description": "本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは CSS でデザインできることが分かりました。そこで自分でも試してみて、ついでに CSS コードを拝借しました。当サイトではすでに導"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~Q1NT44Gn44Kr44K544K~44Og44OW44Op44Km44K244O844Gu44K544Kv44Ot44O844Or44OQ44O844Gu44K544K~44Kk44Or44KS5a6f6KOF44GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~Q1NT44Gn44Kr44K544K~44Og44OW44Op44Km44K244O844Gu44K544Kv44Ot44O844Or44OQ44O844Gu44K544K~44Kk44Or44KS5a6f6KOF44GZ44KL%2Cdescription_~5pys5pel44CB5oan5oas44OW44Ot44Kw44KS6Kiq5ZWP44GX44Gf44Go44GT44KN44CB5b2844Gu44K144Kk44OI44Gu44OW44Op44Km44K244O844Gu44OH44OV44Kp44Or44OI44Gu44K144Kk44OJ44K544Kv44Ot44O844Or44OQ44O844GM44Kr44K544K~44Og44K544K~44Kk44Or44Gr5aSJ5pu044GV44KM44Gm44GE44KL44GT44Go44Gr5rCX5LuY44GN44G-44GX44Gf44CC5b6M44Gn44ON44OD44OI44Gn6Kq~44G544Gm44G~44Gf44Go44GT44KN44CB44GT44Gu44K544K~44Kk44Or44GvIENTUyDjgafjg4fjgrbjgqTjg7PjgafjgY3jgovjgZPjgajjgYzliIbjgYvjgorjgb7jgZfjgZ~jgILjgZ3jgZPjgafoh6rliIbjgafjgoLoqabjgZfjgabjgb~jgabjgIHjgaTjgYTjgafjgasgQ1NTIOOCs-ODvOODieOCkuaLneWAn-OBl-OBvuOBl-OBn-OAguW9k-OCteOCpOODiOOBp-OBr-OBmeOBp-OBq-Wwjg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_nmpJRzqGIzhFugZf.png"
  "og:image:alt": "CSSでカスタムブラウザーのスクロールバーのスタイルを実装する - 憂いを忘れる一枚"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": CSSでカスタムブラウザーのスクロールバーのスタイルを実装する
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~Q1NT44Gn44Kr44K544K~44Og44OW44Op44Km44K244O844Gu44K544Kv44Ot44O844Or44OQ44O844Gu44K544K~44Kk44Or44KS5a6f6KOF44GZ44KLIC0g5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2Cc_Article%2Ctitle_~Q1NT44Gn44Kr44K544K~44Og44OW44Op44Km44K244O844Gu44K544Kv44Ot44O844Or44OQ44O844Gu44K544K~44Kk44Or44KS5a6f6KOF44GZ44KL%2Cdescription_~5pys5pel44CB5oan5oas44OW44Ot44Kw44KS6Kiq5ZWP44GX44Gf44Go44GT44KN44CB5b2844Gu44K144Kk44OI44Gu44OW44Op44Km44K244O844Gu44OH44OV44Kp44Or44OI44Gu44K144Kk44OJ44K544Kv44Ot44O844Or44OQ44O844GM44Kr44K544K~44Og44K544K~44Kk44Or44Gr5aSJ5pu044GV44KM44Gm44GE44KL44GT44Go44Gr5rCX5LuY44GN44G-44GX44Gf44CC5b6M44Gn44ON44OD44OI44Gn6Kq~44G544Gm44G~44Gf44Go44GT44KN44CB44GT44Gu44K544K~44Kk44Or44GvIENTUyDjgafjg4fjgrbjgqTjg7PjgafjgY3jgovjgZPjgajjgYzliIbjgYvjgorjgb7jgZfjgZ~jgILjgZ3jgZPjgafoh6rliIbjgafjgoLoqabjgZfjgabjgb~jgabjgIHjgaTjgYTjgafjgasgQ1NTIOOCs-ODvOODieOCkuaLneWAn-OBl-OBvuOBl-OBn-OAguW9k-OCteOCpOODiOOBp-OBr-OBmeOBp-OBq-Wwjg%2CsiteName_~5oaC44GE44KS5b-Y44KM44KL5LiA5p6a%2CsiteHost_www.ikxin.com%2Cp_Ii9qYS9hcnRpY2xlL2Nzcy1zY3JvbGxiYXItc3R5bGluZyI%2Cs_nmpJRzqGIzhFugZf.png"
  "twitter:image:alt": "CSSでカスタムブラウザーのスクロールバーのスタイルを実装する - 憂いを忘れる一枚"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **CSSでカスタムブラウザーのスクロールバーのスタイルを実装する**

2017.07.08 4,439  0

本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは **CSS** でデザインできることが分かりました。そこで自分でも試してみて、ついでに **CSS** コードを拝借しました。当サイトではすでに導入していますので、効果は実際に確認してみてください。

**注意：**

このスタイルは **Chromium** ベースのブラウザーに限られます。たとえば、Google Chrome、QQブラウザー、360ブラウザーなどです。**Chromium** ベースではないブラウザーではスタイルが表示されません。たとえば、Firefox、Operaなどです。

## CSSコード

### 属性の説明

 Plain Text

```
::-webkit-scrollbar               /* 滚动条整体部分 */::-webkit-scrollbar-button        /* 滚动条两端的按钮 */::-webkit-scrollbar-track         /* 外层轨道 */::-webkit-scrollbar-track-piece   /* 内层轨道滚动条中间部分 */::-webkit-scrollbar-thumb         /* 滚动条里面可以拖动的部分 */::-webkit-scrollbar-corner        /* 边角 */::-webkit-resizer                 /* 定义右下角拖动块的样式 */
```

### サンプルコード

以下は当サイトで使用している **CSS** スタイルです。必要に応じて自由に変更してください。

 CSS

```
/* 滚动条默认显示样式 */
::-webkit-scrollbar-thumb {
   background-color: #03a9f4;
   height: 50px;
   outline-offset: -2px;
   outline: 2px solid #cddc39;
   -webkit-border-radius: 4px;
   border: 2px solid #fff;
}

/* 鼠标悬停滚动条样式 */
::-webkit-scrollbar-thumb:hover {
   background-color: #00bcd4;
   height: 50px;
   -webkit-border-radius: 4px;
}

/* 滚动条宽度与高度 */
::-webkit-scrollbar {
   width: 10px;
   height: 10px;
}

/* 滚动框背景样式 */
::-webkit-scrollbar-track-piece {
   background-color: #fff;
   -webkit-border-radius: 0;
}
```

## **コメント**

(0)

まだコメントはありません

## **コメントを投稿**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ja#website","@type":"WebSite","description":"「憂いを忘れる一枚」は、技術探究と日々の暮らしをテーマにした個人サイトです。Web 開発、バックエンド、DevOps の実践を記録し、ソフトウェアツールやデジタル体験、コードの外で得た見聞と思索を共有します。","inLanguage":"ja-JP","name":"憂いを忘れる一枚","url":"https://www.ikxin.com/ja","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ja/article/css-scrollbar-styling#webpage","@type":"WebPage","description":"本日、憧憬ブログを訪問したところ、彼のサイトのブラウザーのデフォルトのサイドスクロールバーがカスタムスタイルに変更されていることに気付きました。後でネットで調べてみたところ、このスタイルは CSS でデザインできることが分かりました。そこで自分でも試してみて、ついでに CSS コードを拝借しました。当サイトではすでに導","name":"CSSでカスタムブラウザーのスクロールバーのスタイルを実装する","url":"https://www.ikxin.com/ja/article/css-scrollbar-styling","isPartOf":{"@id":"https://www.ikxin.com/ja#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ja/article/css-scrollbar-styling"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.