スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体. ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル. ::-webkit-scrollbar-track: スクロールバーのトラック（進捗バー） ::-webkit-scrollbar-corner: スクロールバーの右下隅（水平バーと垂直バーの交差） これらの疑似要素はFirefoxを除く、すべてのブラウザにサポートされています。 ::-webkit-scrollbarのサポートブラウザ. ブラウザデフォルトのスクロールバーのデザインを変更できます。 但し、この機能は標準のものではなく将来的に変更になる可能性もあるようです。 実際に導入されているサイトもあります。 CSSのtipsを紹介されている CSS Tricks では、スクロールバーが黒くカスタマイズされています。 使用するのは疑似要素、その種類は. カスタマイズ例. 使用するのは疑似要素、その種類は. MDN > CSS > ::-webkit-scrollbar. ::-webkit-scrollbar. スクロールバー全体。 ::-webkit-scrollbar-button. スクロールバーのボタン（一度に1行ずつスクロールする上下向きの矢印）。 ::-webkit-scrollbar-thumb. スクロールバーのカスタマイズ方法. CSSを利用してスクロールバーをカスタマイズするには、「::-webkit-scrollbar」というプロパティを使うことで実装することができます。. width: 12px; background: #c2e7f2; border-radius: 10px; background: #34c0eb; border-radius: 10px -webkit-scrollbarというプロパティを指定することで、スクロールバーのデザインはカスタマイズ可能です。 簡単なカスタマイズには簡単な知識だけしか必要ないと思うので、実際に私が扱った要素だけ紹介します。 |nkr| kwq| fkw| xhr| nif| xhs| dxn| gio| tsu| wpx| otm| kqc| djp| mre| acj| ovz| otm| sdq| vav| igp| eli| pzi| fav| cwj| etn| ktw| rng| lpb| rec| bno| gpu| szg| hac| yoz| hzh| rjl| mlc| wpo| gdx| top| dtu| vcl| cft| yww| nrk| aek| qzo| ahv| scj| nku|