技術的メモ

モチベーション ブラウザに表示されるスクロールバーの見た目変更方法 ちなみに モチベーション Windowsだと、ChromeなどのWebブラウザにおいてデフォルトで表示されるスクロールバーの見た目があまりよろしくないので、変更したい。 Windowsだとなぜかデフォルトのスクロールバーがとてつもなくレガシーな見た目をしているので、現代的な形にアレンジしたかった。 ブラウザに表示されるスクロールバーの見た目変更方法 CSSファイルに ::-webkit-scrollbar や ::-webkit-scrollbar-thumb といった記述を入れることでスクロールバーの見た目を変更することができます。 注： 本設定は Webkit をベースとしたブラウザでのみ有効です。大抵のブラウザは対応しているようですが、Firefoxなど一部は対応していないようです。 /* スクロールバーの幅や高さを狭くしています */ ::-webkit-scrollbar { width : 10 px ; height : 10 px ; } /* スクロールバーのつまみの色変更、および角を丸くしています。 */ ::-webkit-scrollbar-thumb { background : lightgrey ; border-radius : 5 px ; } 上記設定でこんな見た目になります。 スクロールバーの背景色も消えてしまう(というより背景色と同色になる？)ので、そこを復活させたい場合は ::-webkit-scrollbar-track により色を指定します。 /* スクロールバーが通る場所を色付け */ ::-webkit-scrollbar-track { background : aliceblue ; } ちなみに CSSで指定する際に body とかをつけてあげないと、ページ全体のスクロールバーのスタイルにも影響してしまします。 影響範囲を限定したい場合には、 body ::-webkit-scrollbar { width : 10 px ; height : 10 px ; } body ::-webkit-scro...

モチベーション 方法 overflow: auto で横長なコンテンツにスクロールバーを表示する overflow: scroll で常にスクロールバーを表示する 横方向か縦方向どちらかにのみスクロールバーを表示したい モチベーション 例えばこのブログでもそうなのだが、コードの断片を貼り付けているページがいくつかある。そういった個所は得てして横長になりがち。 単なるコードであれば横幅を短く書けばいいじゃないか、ということもあるが、そのまま描いた方が都合がよい場合も多くある。また、コマンドライン上で実行する ワンライナー なんかは都合上1行で書いてやりたい気持ちもある。 そういった横長なコンテンツに対してスクロールバーを表示したいという話です。 方法 overflow: auto で横長なコンテンツにスクロールバーを表示する 例えば <code> という要素に対してこれを実施したい場合。 code { overflow : auto ; } これにより、要素の横幅を超えてしまうような場合にのみスクロールバーが表示される。ちょうどこのサイトのように。 This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test. overflow: scroll で常にスクロールバーを表示する 例えば <code> という要素に対してこれを実施したい場合。あんまり常に表示したいということはなさそうですが、デザインをそろえたいなどで利用されることがあるかもしれません。 code { overflow : scroll ; } 横方向か縦方向どちらかにのみスクロールバーを表示したい overflow ではなく、 overflow-x を指定すれば横方向のみ、 overflow-y を指定すれば縦方向のみについてスクロールバー表示を設定できます。 overflow-x / overflow-y の後に指定する内容は overflow の時と同じです。 code { /* 横方向のみ *...