css: ブラウザで表示されるスクロールバーを丸みのついたいい感じのデザインにしたい

モチベーション

Windowsだと、ChromeなどのWebブラウザにおいてデフォルトで表示されるスクロールバーの見た目があまりよろしくないので、変更したい。
Windowsだとなぜかデフォルトのスクロールバーがとてつもなくレガシーな見た目をしているので、現代的な形にアレンジしたかった。

ブラウザに表示されるスクロールバーの見た目変更方法

CSSファイルに ::-webkit-scrollbar や ::-webkit-scrollbar-thumb といった記述を入れることでスクロールバーの見た目を変更することができます。

注： 本設定は Webkit をベースとしたブラウザでのみ有効です。大抵のブラウザは対応しているようですが、Firefoxなど一部は対応していないようです。

/* スクロールバーの幅や高さを狭くしています */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* スクロールバーのつまみの色変更、および角を丸くしています。 */
::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px;
}

上記設定でこんな見た目になります。

enter image description here

スクロールバーの背景色も消えてしまう(というより背景色と同色になる？)ので、そこを復活させたい場合は ::-webkit-scrollbar-track により色を指定します。

/* スクロールバーが通る場所を色付け */
::-webkit-scrollbar-track{
  background: aliceblue;
}

ちなみに

CSSで指定する際に body とかをつけてあげないと、ページ全体のスクロールバーのスタイルにも影響してしまします。

影響範囲を限定したい場合には、

body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body ::-webkit-scrollbar-thumb {
  background: lightgrey;
  border-radius: 5px;
}

などとすると良いでしょう。

コメント

コメントを投稿

このブログの人気の投稿

gnuplot: グラフの色を変更する

イメージ
linetypeによる指定 linecolor + 色名による指定 任意の色を指定 linetype の番号によって指定する方法 gnuplotでは事前に定義されたlinetypeというものがあり、番号で指定することができます。これによりグラフの色を変更することが可能です。例えば： plot sin(x) linetype 2 # linetype を lt と省略して以下でも可能 plot sin(x) lt 2 ここで指定できる番号は show linetypes によって確認することができます。 gnuplot> show linetypes linetype 1, linecolor rgb "dark-violet" linewidth 1.000 dashtype solid pointtype 1 pointsize default linetype 2, linecolor rgb "#009e73" linewidth 1.000 dashtype solid pointtype 2 pointsize default linetype 3, linecolor rgb "#56b4e9" linewidth 1.000 dashtype solid pointtype 3 pointsize default linetype 4, linecolor rgb "#e69f00" linewidth 1.000 dashtype solid pointtype 4 pointsize default linetype 5, linecolor rgb "#f0e442" linewidth 1.000 dashtype solid pointtype 5 pointsize default linetype 6, linecolor rgb "#0072b2" linewidth 1.000 dashtype solid pointtype 6 pointsize default ...
続きを読む

[Linux] rsyncで進捗を確認する

イメージ
概要 ¶ rsync を実施する際に進捗を確認したい。 やり方 ¶ 要約 時間経過で変わる可能性のある進捗でもいいなら rsync -a --info=progress2 時間が多少かかっても確実な進捗が欲しいなら rsync -a --info=progress2   --no-inc-recursive 方法1(進捗は適宜でもいいですよ派) ¶ rsync では進捗状況を確認するオプションに ver.3.10 から対応 した。 そのオプションは --info=progress2 である。 rsync - a -- info = progress2 / what / to / backup / where / to / backup このオプションを行うと確かに進捗状況が表示されるようになるのだが、大きな階層構造を持つディレクトリをコピーしようとすると、 進捗状況が刻々と下限修正されてしまい、表示の意味がなくなってしまう。 方法2(最初からしっかりした進捗出してくれないと意味ないよ派) ¶ 進捗表示がずれてしまう問題の原因 ¶ 原因は、 rsync がver.3.0.0から導入したrecursive algorithmというアルゴリズム。 recursive algorithmは転送中にリアルタイムにディレクトリ構造を把握していく非同期な処理であり、 非同期なので最初にきっかりと結果が分かるわけではなく裏でこそこそとディレクトリ構造を把握して進捗状況を正確なものへと更新していく。 もちろん、非同期であるから転送開始自体は速やかに行われるという利点があるのだけど、進捗状況をちゃんと確認したい人間にとっては厄介かも。 そこで --no-inc-recursive ですよ ¶ そこで利用するのが --no-inc-recursive オプション。 rsync - a -- info = progress2 -- no - inc - recursive / what / to / backup / where / to / backup このオプションをつけると、recursive algorithmをオフにすることができる。 このアルゴリ...
続きを読む

gnuplotで縦線を引きたい

イメージ
概要 gnuplotで描画するグラフにおいて縦線を引きたい。 以下のような感じ。 やり方は2通り やり方(1): 矢じりなし矢印 set arrow from x1, y2 to x2, y2 nohead を利用する やり方(2): with impulse によって特定のポイントへの縦線を描画する (こっちの方が楽かも) やり方(1): arrowによる方法 set arrow コマンドは矢印を描画可能です。 (x1,y1) から (x2,y2) への矢印を描画するには以下の様な命令をします。 set arrow from x1 , y1 to x2 , y2 そんでもって、矢じり部分を消すには nohead を利用します。 矢印から矢じり部分を消すと直線になります。 set arrow from x1 , y1 to x2 , y2 これを利用して、 (x1,y1), (x2,y2) をうまいこと設定すれば 縦線を引くことが可能ですね。 f ( x ) = x ** 2 set arrow from 5 , 0 to 5 , 25 nohead lt 3 plot f ( x ) これだけです。 因みに、 arrow を間違えてしまったなどで消したいときには show arrow で番号を確認して、 unset arrow <number> で消せます。 # ここで確認して show arrow # ここでその番号の arrow を消す unset arrow 1 やり方(2): with impulse による方法 (おすすめ) 座標を指定し、 with impulse によって縦方向の直線を描くことができます。こちらはやり方(1) に比べて終端のみ指定すればよいのが楽なポイント。 具体的には以下のようなコマンドになります。実際に利用する際には x y を直線を引きたい座標に置き換えてください。 plot "< echo x y" with impulse title "" # 極限まで省略すると以下でもOK ...
続きを読む