HTMLの各要素に、どのCSSがかかっているのかがわかる、ChromeのF12キー

■ChromeのF12キーって、便利ですよね！

たとえば、↓の画面で

文字が赤くなっているけど、

「いや、CSSでは、青って書いたんだけどなあ～」

っていうとき、

ブラウザがChromeで開いているのなら、

---

■F１２キーを押してもらうと、

　↓のようにソースコードが右側に（場合によっては別ウィンドウ）ででてくる。出てこなかったら出て来た右上のウィンドウのタブをElements（赤枠）にすると見えるはず。

　ここで、…と３点リーダーになっているところ（青枠）があるから、そこをクリックしていくと、中のソースが見えてくる（ソースコードの中にまた…が見えたら、そこをクリックしていく）。

　見たい対象のソースコード（今、テキストボックス内の赤字になっているところが見たいので、そのテキストボックス）のところまで開いて、ソースコードが出てきたら、

そのソースコードの行（テキストボックスの行）をクリック

↓の図のようにその行が反転し、いろいろ表示される

---

■F12キーを押すと見えるもの

表示している画面（左側）のところ（赤枠のところ）に、

今、ソースコードの対象行にあたる要素が

　　　どういうタグのどんなIDで、どんなクラスか

　　　その大きさがどのくらいか（ピクセルで）

が出てくる（textarea＃A1.aと書いてある赤枠のところ。textareaがタグ、A１がID、aがクラス)

　また、右下に、そのHTMLにかかっているCSSが表示されている（青枠のところ）。上から、かかっているCSS順に表示されている。

　各CSSの右側にそのソースのCSSファイル名（.css)が表示されている（黄色枠）

　一番下のCSSのところはuser agent stylesheetってあるけど、それがデフォルトでブラウザが設定するもの（＝CSSの設定がなければそれが出るはず）

　取り消し線が引かれているのは、適用されていないのを示す。

　この例だと、a.css(黄色の枠の下の方）のcolorに線が引かれている。

　この場合は、そのCSSは無効になっている。

　そして、それより上のCSSで有効になっているものがあることを示している。

---

■上の例だと、

　b.cssのcolorが線が引かれていない。なので、これが生きていることになる。

　実際、左の画面では、colorが赤＝文字が赤になっているし、

　b.cssのソースをみると

color:redになっていて、index.htmを確認すると

b.cssがa.cssより下に来ているので、これがきいていることがわかる

---

■かかっているCSSをきかせないとどうなるかも調べられる

このように、Chromeで表示した後、F12キーを押せば、

HTMLの各要素に、どのCSSがかかっているのかがわかるけど、

それだけじゃなくって、値を修正したら、どうなるかがわかる。

有効なCSSに対して、左側にマウスポインタを置くと

チェックボックスが出てくる（redのところ）

このチェックボックスのレを外すと（クリックすると）、こいつを執行しない場合、何が有効になるかがわかる

color:redに取り消し線が引かれ、color:blueが有効になり、

左側のテキストボックスの文字が青くなった。

※ちなみに、無効になっているところもチェックボックスがあって、

このチェックも外せるけど、外しても（もともと無効だから）何も起こらない。無効なCSSを、実際に有効にするには、CSSの順番を変えるか、!importantをつけることだけど、それにはソース修正が必要なので・・・下を見てくれ）

---

■ここから、CSSの値を変えることもできる。

！importantとかもつけられる。

　値のところをクリックすると、入力できるようになる

↑の例では、color:blueのblueをクリックしている

（表示はredが生きるように元に戻した）

ここに「green !important」と入力すると、

緑色にテキストボックスの文字が変わっている。

ということは、（上位にあるはずのredがきいていないので）importantも有効になっている（色だけ変えることももちろんできる。ただここでgreenと変えても、取り消し線が引かれるだけ。緑色に変えたい場合は、普通はredのところを直すべき。ここではimportantがきくよ！ということを示したかったので、blueを直した）

---

■修正は、これだけにとどまらない。CSSの行を追加することもできる。

各CSSの一番最後の行の下のほうをクリックすると、新しい行が追加される

↓の図は、color:redの下（赤枠）をクリックしたところ。クリックすると:が出て（：が出て来たところを撮っている）、１行入力できるようになる。

backgroundを設定してみた↓

---

■CSSを追加できることもできる

セレクタを変えて、CSSを追加したい場合は、

各CSSの枠の右下の端のところにマウスポインタを置く。すると

↓の図のように十字（＋）が出てくる

ここをクリックすると、CSSを書くことができる。

全体(html)の文字色を変えてみました（赤枠）

---

■カスタムプロパティでもっとすごいんだけど・・・

さらにレスポンシブWebデザインなんかするときに、カスタムプロパティを使った場合、このF12キーを使うと便利便利！なんだけど・・・

　そもそも、「カスタムプロパティって何！」から説明しないといけないですよね・・でも、そこから書いていくには、もうこの記事長くなりすぎているので、それは別の記事に書くこととし、この記事は、この辺で終わりにします。

※今回はChromeで書いたけど、Microsoftのedgeでも、f12キーを押すと似たようなことができるみたいです（Edgeのほうは、ほとんど知らない。開発ではChromeを使うので）