頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

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

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

魔法のF12

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

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

01_デベロッパツールの表示

デベロッパツールの表示

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

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

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

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

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

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

01_デベロッパツールの表示

デベロッパツールの表示

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

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

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

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

03_対象要素へフォーカス

対象要素へフォーカス

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

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

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

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

05_適用中スタイルの確認

適用中スタイルの確認

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

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

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

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

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

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

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

08_カラム落ちの確認

カラム落ちの確認

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

日付のdiv要素幅

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

09_ブロック要素サイズの確認1

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

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

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

コンテンツの要素幅

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

10_ブロック要素サイズの確認2

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

  • 要素[水色]: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でカラム落ち
したわけです。

いかがでしょうか。

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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

11_変更したCSSのコピー

変更したCSSのコピー

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

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

補足

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

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


Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。
Google Chrome™ ブラウザはGoogle Inc. の登録商標です。
登録番号は商願2011-80184号および、商願2011-80187号です。
Google Chrome™およびロゴはGoogle Inc. の国際登録商標です。
国際登録番号:773982

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - CSS, HTML , ,

  関連記事