Google™Chromeを利用してサイトの構造とCSS定義を調査変更する方法

2013/11/21 2014/11/22

サイトを運用していてデザインの変更をしたい。
CSSの編集をしてみたけど、どこがおかしくてレイアウトが乱れているのかがわからない。
そんな時にはChromeを利用することで、サイトの構造やデザインをリアルタイムに確認ができます。
またCSSを編集することなしに、サイト上のCSSの値を変更し適切な値を探し出すこともできます。

はじめに

みなさんはHTMLやCSSの変更をどのような手順でされていますか？

じっくりHTMLのソースと、CSSをにらめっこして考え込んでしまっていませんか？

でも、見たまんまのサイトのデザインから、
今適用されているCSSの設定などを確認しながら、
何を直せばいいのかが確認できたとしたら、便利だとおもいませんか。

おそらくサイト運営をされているほとんどの人が知っていることだと思います。
でも、新しくブログというものを始めたけど・・・という方にとっては、
誰かが教えてくれるわけでもないし、知ることもないのかもしれません。

魔法のF12

まずは、デザインの変更をしたいサイトをChromeブラウザで表示してみましょう。
私のサイトで言えば、http://algorhythnn.jp/blg/　ですが、
サイトを開いた状態でキーボードの上にならんだ[F12]を押してみてください。
※[F12]が無い方は画面上からでも表示できますので、そのまま読み進めてください。

下部または右に、何やら情報ウィンドウ(要素を検証ウィンドウ/デベロッパーツール)が
表示されていると思います。

デベロッパツールの表示

これが、サイトの表示状態を表したHTMLと割り当てられているCSSなどの情報です。
この機能のすべてはご説明しきれないほどあって私も使いきれていませんが、
HTMLとCSSに限って話を進めさせてもらいます。

と、この方法以前はChromeだけにあった時期があったように思いますが、
最近は大抵のブラウザで提供されているようですね。

さすがにこういう機能がないと開発も難しいなと思いますから当然かもしれません。

デベロッパーツールの簡単な使い方例

情報ウィンドウ(要素を検証ウィンドウ/デベロッパーツール)の画面ですが、
様々な情報を確認したり、一時的に変更ができたりします。

では、私のサイトを元にしてご紹介します。
現在開いているページで[F12]を押してデベロッパーツールを開きます。
（いや、次の操作でも開くんですが一応）

デベロッパツールの表示

では、次に投稿のタイトルの上で右クリックして[要素を検証]をクリックします。

調べたい要素を右クリックし要素の検証

すると、下のデベロッパーツールのHTMLが投稿のタイトルまで移動します。
ここで右に表示されているのが、この投稿タイトルに設定されているCSSの適用状態です。

対象要素へフォーカス

また<div>などのブロック要素HTMLの上にマウスを重ねると、
選択した<div>要素のエリアに色がついて表示されます。

要素周辺をマウスオーバー

では今反転させた<div>要素をクリックし選択します。

適用中スタイルの確認

右のStylesエリアには、[width: 520px;]と表示され[~~width: 460px;~~]に取り消し線がついています。
これは、私が個別にCSSにてwidth: 520px;を指定して上書きをしています。
この520pxが反転表示されているのはクリックしてカーソルをいれているのですが、
同じように520pxをクリックしてカーソルを入れます。

スタイルの上書き確認など

カーソルで反転している状態で、キーボードから数値を入力し、値を変更するか、
キーボードの[↑または↓]を押すと、1pxずつ値が変更され、
画面表示も更新されていきます。

スタイルの一時変更と表示

このブロック要素の場合には、ずっと[↑]を押していくと、
621pxまで拡張した際に、タイトルがカラム落ちして日付の下に表示されるようになります。

カラム落ちの確認

これは、上位の<div>要素に収まらなくなってしまう幅に到達してしまった為です。
では、上位の要素はいくつに設定されているのでしょうか。
※ちなみに、変更した幅を元に戻すのは、ブラウザを更新してしまえば元に戻ります。

日付のdiv要素幅

日付の部分で右クリックし[要素を検証]をクリックします。
日付の要素にフォーカスされますので、Stylesウィンドウを最下部までスクロールし、
ブロック要素の情報を確認します。

ブロック要素サイズの確認１

以下のように設定されています。

要素[水色]：100×70
padding[薄緑]：0
border[黄色]： 0
margin[オレンジ]： 0 10 0 0

コンテンツの要素幅

次に、コンテンツ部分が反転表示になる要素をマウスオーバーして探し、
意図する反転状態になった部分をクリックします。
コンテンツの要素にフォーカスされますので、Stylesウィンドウを最下部までスクロールし、
ブロック要素の情報を確認します。

ブロック要素サイズの確認２

要素[水色]：730x (コンテンツサイズ)
padding[薄緑]：15 29 0 29
border[黄色]： 1 1 1 1　－
margin[オレンジ]： 5 0 20 0

幅要素の合計

コンテンツの要素幅は内包されるコンテンツ幅になっていますので、730pxとなります。
その中に、日付ブロックが配置されていますので、以下を既に消費しています。
100px(要素)＋10px(margin)＝110px

730pxから、110pxを引くと、620pxとなります。
よって、620pxまでは収まりますが、621pxは収まらない為、
621pxでカラム落ちしたわけです。

いかがでしょうか。

さいごに

このようにして、カラム落ちが発生している値を確認したり、
CSS自体が効いているのかどうかといったことをStylesウィンドウを確認することで、
自分が適用したはずのCSSに取り消し線が入っていれば「他のCSSに負けてしまっている」など、
簡単に確認を行うことができます。

こうして一時的にChrome上でCSSを変更してみて、
正しく表示ができる値を探ってみるのも非常に効率的な作業方法です。

尚、今回でいうところの、620pxが正しく表示できる最大幅だと分かりましたので、
もしこの値を採用するならば、CSSを選択して[Ctrl+C]をクリックすると、
今変更したCSSをコピーすることもできます。

変更したCSSのコピー

デベロッパツールはの使い方はこれだけではありませんし、
ページの読み込みに時間がかかっているコンテンツの調査をしたりと様々なことが行えます。

少しずつ使い方になれて、より効率的に開発を進めていくと、
ストレスが減っていくと思います。

補足

要は、誰のサイトであってもこうやってソースやCSSをのぞかせてもらうことができるのです。
いえ、私のサイトはまだ綺麗に整理ができてませんし、
ガタガタなので・・・見てもいいことはないと思います。

ただ、このサイト綺麗だなーって思った時にこうやってどうやってるか見させてもらうのも、
とても勉強になるものです。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願２０１１－８０１８４号および、商願２０１１－８０１８７号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号：７７３９８２