Blogブログ

WEBデザイナーに使ってもらいたいGoogleChromeのデバッグ機能

2012/11/13

Webサイト、ホームページを作っている時に、この文字の色はcssのどこに書いてあるんだろう?って思うときないですか?

それが他人が作ったサイトなら余計そう感じる事が多いと思います。

そんなときに便利なソフトがGoogleのブラウザ、GoogleCromeです。

→GoogleCromeダウンロードページ

まずは画像をご覧下さい。

例えば赤丸のPHP講座第6回目??と書かれたタイトルの色を変更したいと思った時、

どこにその情報が書いてあるか分からなかったとします。

そういった場合に確認したいページをグーグルクロームで開き、

Ctrl+Shift+i を押すと画面下半分くらいに新しく画面が出てきます。

真ん中左辺りの「Elements」が選択されているのを確認し、HTMLのソースの上をマウスオーバーしていくと

ホームページの方で該当の場所が青色に反転して指定されます。

ソースの▼が右を向いているとまだその要素の中にHTMLタグが入っていますので、

クリックしていくと中に入っていけます。

最終的に上記画像のようにどのタグが効いているのかつきとめたら、右の赤丸の中を見てもらうと

style.cssの110行目に

.entry-title a {
    color: #C50000;
}

と記述してあるのが分かるかと思います。

これで該当のファイルを開いて、行も分かっているのでそれを修正すれば色を変更できます。

Web製作者にはGoogleChromeがかなり便利なので是非お試しを?。

他社より断然お得で使いやすい
”アクトのWEB制作”
ACTホームページ相談窓口 / 
システム開発相談窓口