検証ツール

グーグルクロームで、見たいサイトの「画面のなにもないところ」で、右クリック

表示する場所を好みで設定

設定を一部変更しておこう。
ブラウザは通常、表示を早くするために画面を覚えている（キャッシュ）
そのため、検証ツールを使っているとき「デザインを新しく書き換えた」のに「古いままの表示」になることがある。

設定の下の方にある「ネットワーク」の中の
「DevTools が開いている間はキャッシュを無効にする」にチェックを入れておく。
これで検証ツールを開いている間は常に「最新の状態」が表示される。

「スタイル」を表示させておいて「」に行く

見たい部分にマウスを重ねると、要素のHTMLの部分が連動して動く。クリックで決定すると、その部分の詳細が見れる。

ここでその部分のCSSを確認したり、内容を書き変えて「実験」することができる。
ここで書き変えても、元のサイトのCSSファイルが書き換わるわけではないので、注意。
必要なら、自分のファイルにコピペして、書き変えておきましょう。

CSSが書き換わらないからこそ、Web上のサイトを検証ツールで見ることができる

悪用厳禁：ちなみに、自分のパスワードが「●●●●」表示になって、何かわからなくなった時にも役立つｗ