googleChrome 開発者ツール（デベロッパーツール）の基本の使い方。

こんにちは。
札幌のwebクリエイター加藤です。

ホームページを制作するのに、必要不可欠なのは、HTMLとCSS、そして画像などの素材です。
もちろん、これらを統合するソフトも必要です。

そこで、ある程度制作していくと、ブラウザでの表示状態を確認する必要があります。

そんな時に、私が何時も使っているのは、googleChrome のデベロッパーツール、開発者ツールです。

その基本的な使い方についてちょっと触れてみたいと思います。

まずは、画像のように右上にあるアイコンをクリックして、ツールを起動させます。

起動すると画像のように表示されます。
左側がHTMLタグが表示されます。右側には設定されているCSSが表示されます。

例えば、ある要素がどのようになっているのか調べる時には、左下にある虫メガのアイコンをクリックして、調べたいHTMLタグをもう一度クリックします。
画像では < a > タグを調べています。

そして、HTMLタグを少し修正したらどうなるのか確認したい時には、右クリックで画像のようにメニューが表示されますので、それぞれの項目をクリックして、修正します。

★Edit Text は、タグに挟まれたテキストを修正できます。
★Edit as HTML は、HTMLを修正できます。

但し、今の状態はあくまでも変更したらどうなるのかを確認するための操作です。
これを修正し、変更を保存もできますが、誤って保存してしまうと、表示が崩れるおそれがありますので、注意して下さいね。

次は、CSSの画面になります。
< a > </ a> タグに設定されているCSSを確認するには、HTMLを選択すると、自動で右側に設定されているCSSがひょうじされます。

そして、このCSSも直接入力することが可能で、変更の確認が出来ます。
もちろん、修正したものを保存することも出来ますが、今は省きますね。

このようにして、今どのHTMLにどんなCSSが設定されているのかを調べることが出来ます。

これらを、動画で解りやすく説明されているサイトが有りますので、是非確認してみてくださいね。

ドットインストール　というサイトです。

※＃01～＃04までをご覧になられると、基本的な使い方がわかると思います。
凄くわかりやすので是非参考にしてください。

加藤でした。