ブラウザ上でHTML/CSSを変更して表示の確認ができる小技

ホームページ制作で表示の微調整や、表示がうまく行かない時の原因を調べる時に役に立つ小技をご紹介します。

今回紹介するのはブラウザ（Chrome）に標準でついている機能ですが、これを知っていると知っていないとでは圧倒的に作業効率が違います。
自身でページを制作しているショップ様には是非とも知っていただきたい内容です。

今回使うブラウザはChromeです。
下記リンクからダウンロードできます。
Chromeのダウンロード

私の作業環境
OS：Windows XP
ブラウザ：Chrome バージョン22

デベロッパーツールを起動する

まず、Chromeで適当なページ（このページでも構いません）を表示します。

ページの気になる部分を右クリックし、「要素を検証」を選択してください。

するとページ上の右クリックをした要素が選択され、ブラウザの下にHTMLソースとCSSが出てきます。
これがデベロッパーツールと呼ばれるものです。
左側にHTMLソースが表示され、ページ上で選択した箇所のHTMLが選択されています。
右側がその要素に適応されているスタイルです。

逆にデベロッパーツール上のHTMLにカーソルを合わせると、該当箇所をページ上でも確認することができます。

まとめ

ポイント
　ツール左下の「虫眼鏡」ボタンを使うとページ上の要素を調べられます。
　「虫眼鏡」ボタンの横にはタグの入れ子の状況が解り、クリックして選択もできます。

デベロッパーツールでHTMLやCSSを変更する場合に、まず注意していただきたいのは
ここで変更した内容は実際のHTMLに反映されないことです。
（ページを更新すると元に戻ってしまいます。）

デベロッパーツールで変更した箇所を思い出しながら
実際のファイルを編集するか、コピー＆ペーストを駆使して活用ください。

実際のファイルは変更できませんが、色や余白、サイズなどの調整、
ページが崩れたり、上手く表示できない場合の原因を調べる時にとても役に立ちます。

【HTML】

HTMLを変更したい場合は、デベロッパーツールのHTMLが表示されている箇所で、編集したい部分をダブルクリックすると編集できます。

タグで囲まれた中身を変更したい場合は、編集したいタグの上で右クリックして
「Edit as HTML」を選択してください。

タグで囲まれた中身をコピーしたい場合は、コピ―したいタグの上で右クリックして
「Copy as HTML」を選択してください。

右クリックの「delete node」で選択したタグの中身を消すことができます。

【CSS】

スタイルの変更は右側で行います。

element.style　はタグの中にstyle=””で指定するスタイル指定をする書き方です。

クラスの枠内をクリックし、「｝」をクリックするとカーソルが現れ
設定したいスタイルを入力　→　Tabキー　→　値の入力　→　Enterキー
でスタイルを追加できます。

設定されているスタイルや値の上をクリックすると変更できます。

設定されているスタイルのチェックを外すとスタイルが適応されなくなり、チェックを入れると再度適応されます。

横棒で消されているスタイルは、別のスタイルに上書きされている場合や、
綴りを間違えて適応されていないスタイルです。

下にスクロールしていき「Metrics」と書かれたバークリックすると
その要素のmargin、border、padding、width、heightを解りやすく確認することができます。
カーソルを合わせれば実際のページでも確認することができます。

余白やサイズの微調整ですが、例えば要素のmargin-bottomを調整したい時は
margin-bottomの値の方を選択し、キーボードの上下で1ずつ増減させたり、
Shiftを押しながらキーボードの上下で10ずつ増減させることができます。

まとめ
・とにく直感的にいじってみよう

ポイント

今回は以上となりますが、いかがでしたでしょうか。
右クリックから簡単にHTMLとCSSを確認できるので、ぜひとも使ってみてください。

まだまだ、ページ制作の小技はたくさんありますが、
少しずつ小出しにしていきたいと思いますのでよろしくお願いいたします。