Labモードへ

WebページのCSSを自分で書き換える

PCのWebブラウザでWebページの閲覧やWebアプリの利用をする際、スタイルが自分の感覚に合っていないと感じたら自分でCSSを書き換える手段がある。
　
ChromiumベースのWebブラウザ（Chrome、Edge、Vivaldiほか）でもFirefox系のWebブラウザでも、拡張機能によってWebページのCSSを上書きすることができる。
もちろんその変更は「自分が見る時」の状態を変えるだけで、サイトそのものには何も影響しない。
　
CSS上書き機能を提供している拡張機能は様々あるので自分に合っているものを選ぶ。代表的と思われるものの例は以下。

  • Stylus（Chrome／Firefox）
  • User JavaScript and CSS（Chrome）
  • Magic CSS（Chrome）

全部を試してはいないが、どれを使っても操作感にそう大きな違いはないと思う。他にもいろいろある。
　
CSSを変えたいページを開き、これらの拡張機能に自分の好きなCSSを記述する。例えばこんなCSSを書いてみる。

body {  
  line-height: 1.8;  
  font-size: 16px;  
  background-color: #f9f9f9;  
}

そうするとこれが適用される。より優先度の高いスタイルがある要素については変わらない。
　
どこにどうCSSを当てればよいのかというのはWebブラウザのデベロッパーツール（開発者ツール）でWebページのHTMLを確認することで探っていく。
HTMLをただ見ていてもよくわからないだろうと思うが、デベロッパーツールの左上にあるボタンで「検査対象となる要素の選択」ということができるので、それをクリックすると確認したい要素をWebページ上で選択できる。するとその部分にデベロッパーツールのHTMLがフォーカスするので、その要素にどういうセレクタがついていてどのCSSが当たっているかがわかる。
　
ひとつの要素に複数のスタイルが指定されている時、どれが適用されるかは細かいルールによって決まる。ざっくり書くとこんな感じで、上の方が強い。

  1. 「!important」が付けられている
  2. HTMLに直接「style=""」の形で記述されている（インライン）
  3. セレクタの詳細度が勝っている
  4. より後に書かれている

CSSに慣れていない人が混乱するのはセレクタの詳細度の問題だと思う。これもざっくり言うと、以下のような計算で算出されていて、上の方が強い（スコアが大きい）。

  1. ID（#hoge）の指定の個数
  2. クラス（.hoge）、属性、擬似クラスの指定の個数
  3. タグ（divなど）、擬似要素の指定の個数

拡張機能にCSSを記述しても見た目に変化がない時は、元々のスタイルのセレクタと比べて詳細度が負けていないか確認する。
　
CSSにはいろいろなルールがあるので細かく説明するのは難しいが、解説しているサイトや記事は数多あり、今なら生成AIに聞くと詳しく教えてもらえるので、それらを活用して自分の欲するスタイルの書き方を見つけ出してほしい。