1.デベロッパーツールとは何か

数回に渡り、Webデザイナーのためのデベロッパーツール（開発者ツール）入門記事をお届けします。
HTML, CSSのデバッグ作業としてだけでもWebデザイナー、コーダーが使うメリットがたくさんあります。

「まだWebデザイン初心者だから」
「なんとなく難しそう」

CSSに悩んでいる方、なぜか崩れてしまい、きちんとコーディングできないと悩んでいる方にこそ読んで頂きたい記事です。

目次

デベロッパーツールとは、Googleが提供しているブラウザ、Chromeに付属しているツールの一つです。
クローム以外のブラウザだと、Firebug（firefoxプラグイン）、Webインスペクタ（Safari）、開発者ツール（Internet Explorer）といったものがあり若干操作は違いますが、基本的に全て同じものです。

普段ウェブサイトを閲覧している人にとっては無用のものですが、Webデザインをお仕事にしているデザイナーやコーダーはもちろん、普段はちょっとしたサイトの修正や更新を行っているウェブ担当者も覚えると色々と効率よく時間短縮になるツールですので、是非とも覚えていきましょう。
数回に分けてデベロッパーツールの魅力と使い方を詳しく説明します。

何ができるようになるか

• 特定の場所のHTMLやCSSがどのように反映されているか即座に知ることができる
• 今まで一つ一つなんとなく書いていたCSSがリアルタイムに反映され視覚的にわかりやすく構築できる
• ChromeやFirefoxでは問題ないのにInternetExplorerで起きていた不具合をすぐに見つけられる
• 他のサイトで「この部分どうやって書いているんだろうな」と思っていたところがわかるようになる（！）
• Facebookのいいねボタンなどの動的に出力されている箇所のCSS制御ができるようになる

などなど、色々とできる事があり使わない手はないという機能が満載です。

デベロッパーツールを使えるようになるのは大変か

デベロッパーツールとはこの画像の赤枠で囲った部分のことです。

クリックして拡大

今まで一度でも見たことがある人は、

「使いにくそう。自分には無理だ」
「本当にこれが使えるようになるの？」

といった感想を持ったことがあるかもしれません。
僕も最初はそうでした（笑）。しかしちょっとずつ使っていく内に「これは使えるようになったら早くエラーを見つけられるのでは？」と感じるようになり、今ではなくてはならないツールとなりました。

はじめは大変かもしれません。慣れない画面や英語ばかりの部分なので「なんかよくわからない」となりがちです。
しかしまずは必要な部分だけを見るようにし、慣れていけば怖くはありません。まずはデベロッパーツールを使いはじめる、という第一歩を踏み出しましょう。

たまに更新でhtmlやcssをちょっといじるのであれば覚えて損はない

よくあるのが、

「自分で書いたCSSが効いていない」
「なぜ、ここはこうやって崩れてしまうのか」

というちょっとしたことでエラーになってそれを調べるので多くの時間を費やさないといけないというパターンです。

たまにしかhtml, cssをいじらないためすぐに原因がつかめません。そういう状況の場合、デベロッパーツールの使い方を知っておけばすぐに原因がわかることが多々あります。
（そして大体はスペルミスや閉じ忘れなど、ケアレスミスなのです。。。）

非常に効率の悪い従来の制作方法

今まではDreamweaver等のソフトやテキストエディアを使ってhtmlを書いたり、cssを打ったりしていました。
そして保存、ブラウザ更新。これでも間違いではないのですが非常に効率が悪く、時間がかかってしまいます。

バグがどこで起きているかわかりづらかった

大きな原因の一つに、「どこでバグが起きているのかわからない」ということが挙げられます。
CSSの崩れ。ちゃんと書いているのにどこが悪いのか？そういった原因を上記の従来での構築方法だとなかなか発見できません。
やはり人間ですのでキーボードの打ち間違え（よくあります）、打ったつもりでも打ち忘れ（本当によくあります）などミスはつきもの。
そういったケアレスミスで時間を費やすのはもったいないですよね。そこをカバーしてくれるのがデベロッパーツールなのです。

ここではChromeのデベロッパーツールを使って進めていきます。
Chromeをお使いでなければ是非この機会にChromeブラウザを使ってみてください。

Chrome ブラウザ