スクロールバーは各ブラウザの標準仕様によってデザインが決められています。 例えばGoogle Chromeでは灰色ベースのスクロールバーが設置されますが、サイトのレイアウトにマッチしない場合もありますよね。 今回は、そんなスクロールバーのデザインをCSSでカスタマイズする方法についてまとめてみました。 １．CSSでスクロールバーのデザインを調整できるブラウザ CSSはスクロールバーを自在にデザインできますが、残念ながら対応ブラウザが限られています。 CSSでスクロールバーを調整できるのは、Google ChromeやSafariといった所謂「webkit」を採用しているブラウザのみ。 Microsoft EdgeやFirefoxではCSSのデザインは効かず、ブラウザの標準仕様のままですのでご注意ください。 ２．CSSでスクロールバーのデザインを調整するための基礎知識 スクロールバーのデザイ
文字を選択したときの、背景色って、 普通はブルーですよね？ デフォルトだとこんなかんじです。 この背景色を、変更するCSSをご紹介します。 /*反転時の文字色・背景色 */ ::selection { background: #F8E6AF; /* 背景色*/ color:#666666; /* 文字色*/ } /* Firefox対応*/ ::-moz-selection { background: #F8E6AF; /* 背景色*/ color:#666666; /* 文字色*/ } CSS3をサポートしたブラウザ以外は無視されます。 IEとかIEとか、あとIEとかでは見れないので、気をつけてください。（あと、IEもネ！） 早速、このブログにも導入してみました。 うん、イイかんじ！ 上の赤字の部分をコピーして、CSSに追加すれだけで反映されるので、 ブログ等にも簡単に導入でき
![[CSS3]文字選択した時の背景色を変える方法 ｜ SHO SHIRASAKA](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fshirasaka.tv%2Fimg%2Fogp.jpg)
記事の情報は公開／更新時のものです。最新情報は公式サイトやお店などでご確認ください。また記事内アフィリエイトリンクから収入を得る場合があります。 10曲ぐらいは一度に表示したい GPM のアルバム表示でアートワーク画像が大きいと見栄えはいいです。それでも正直、大きすぎます。 このレイアウトだと「フルHD（1920x1080px）」の画面でさえ、初期表示のままスクロールなしで表示できるのはアルバムの 6曲くらいまでです。 アートワークは小さくなってもいいから、せめて 10曲ぐらいはスクロールなしで表示させたい、と思うわけです。 Chrome拡張機能「Stylebot」 そこでサイトごとに CSS に変更を加えられる Chrome 拡張機能「Stylebot」を使ってレイアウトをいじってみました。 Stylebot – Chrome ウェブストア インストールすると「CSS」というボタンが表示
ブラウザの「訪問済みリンク」色が変わらないサイトに対して、Stylish で強制的に既読リンクと未読リンクを区別する
1. 「未訪問リンク」「訪問済みリンク」の区別がつかないサイト ブラウザでリンクを開くと、「未訪問リンク」が「訪問済みリンク」となる。 「訪問済みのリンク」を判別できるように、ブラウザにはデフォルトでリンク色が設定されている。 WORK NOTE BLOG » Blog Archive » デフォルトのブラウザのリンク色 ただし、サイトによってはブラウザのデフォルトの設定を上書きし、「未訪問リンク」と「訪問済みリンク」の区別がつかないことがる。これでは、後になってサイトをどこまで見たのか分からなくなる。 ユーザビリティやリピータの為に結構大切なa:visitedの色 | 無料SEO対策のススメ によると、 次の日また見に来てくれればどのページまで見たのかが分かると思いますが、時間を置いて再び訪問した場合には、未訪問と訪問済が一発で識別できた方が便利だと思います。（時間が空きすぎると全て未訪
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
