記事内に商品プロモーションが含まれる場合があります
Googleクロームにはデベロッパーツール（要素の検証機能）というびっくりするくらい便利な機能が備わっています。僕自身ウェブデザインをするときには、多用しまくっています。今回はその中でも特におさえておきたい便利な機能について解説していきます。
1. 検証とは？どんなことができるの？
Chromeの検証（デベロッパツール）を使うと、例えば以下のようなことができます。
デザイン変更テスト
自分のウェブサイトやブログのHTMLとCSSをテストで書き換えて、表示をチェックすることができます。 セクション3〜5で解説
他のウェブサイトのコードをチェック
また、他のウェブサイトのコードがどのように書かれているのかもチェックすることができます。これはかなり勉強になります。 セクション3〜5で解説
複数サイズでの表示チェック
様々な画面サイズでの表示をチェックすることもできます。これはウェブサイトやブログをデザインするうえで欠かせません。 セクション7で解説
他にもChromeのデベロッパーツールには様々な便利な機能があります。今回はウェブデザイナーやブログ運営者がひとまずおさえておきたい機能に絞って紹介していきます。
2. デベロッパーツールを起動する
まず、デベロッパーツールを起動する方法を解説します。
チェックしたいページを開き、画面のどこかを右クリックします。コードを調べたいパーツが決まっているのであれば、そのあたりを右クリックすると後で楽です。
表示されるメニューの中から［検証］をクリックします。
デベロッパーツールが画面の下部に開きます。コードがゴチャゴチャ書かれていて嫌になりそうですが、使っていればすぐに慣れてきます（きっと…！）。
なお、ショートカットを使って起動させることもできます。よく使うので覚えておいても良いかもしれませんね。
以下のコマンドで起動させることもできます。：⌘ + Opt + I ：F12
3. ウェブページのHTMLとCSSを見る
気になるウェブページがどのようなコードで書かれているのかを見てみましょう。例としてAppleのトップページで［検証］を行います。
3-1. 見たい部分のコードを表示
デベロッパーツールの左上にあるをクリックします。これで「選択モード」となり、ページ内でクリックした部分のコードが見られるようになります。
①「ここのコードが見たいな」という部分をクリックします。②すると、下部のウィンドウでクリックしたあたりのコードが表示されます。
3-2. 画面の見方
ここからはウィンドウの見方を解説していきます。
左側にはHTMLコードが表示されます。選択されている要素（タグ）は青くなります。右側には選択中の要素に関わってくるCSSが表示されます。これは便利。
選択要素（青の部分）はキーボードの↑と↓で移動させることができます。また、コードをクリックすれば、そのコードが選択されます。
3-3. HTML（Elements）を展開する
▶をクリックするとHTMLが展開され、中のコード（子要素）を見ることができます。キーボードの→でも展開できます。
altを押しながら▶をクリックすれば、中の子要素が全て展開されます。
3-4. CSS（Styles）の見方
次に右側のCSSの見方を解説していきます。上のタブで［Styles］が選ばれていることを確認しましょう。ここには「選択中の要素」に対して指定されているCSSが全てずらっと表示されます（下にスクロールすればどんどん見ることができます）。
①CSSのセレクタ（適用先）が表示されます。②指定されているCSSが表示されます。①も②も実際にCSSファイルに書かれているものと全く同じ形で表示されています。
③右上に書かれている「◯◯.css」は、このCSSが書かれているファイル名を表しています。
インラインのCSSは「element.style」に表示
インラインに書かれたCSS（HTMLタグ内に書かれたCSS）があれば、１番上の「element.style」というところに表示されます。
取り消し線の意味
取り消し線はそのCSSが適用されていないということを表します。主に「同じプロパティについての指定が複数あり、優先順位が低い場合」にこうなります。
「コードに問題がある」ということを表しているわけではないのでご安心くださいませ。
3-5. Computedとは？
[Styles]の右隣には[Computed]と表示されています。
これをクリックすると選択中の要素に最終的に適用されているCSSの値を一覧で見ることができます。文字色は◯◯で、フォントサイズは◯◯pxで…みたいな感じですね。
これも便利なので覚えておくと良いでしょう。その右側の［Event Listeners］などは主にJavascript/jQueryのチェックに使うものです。詳しくは「クリックイベントを定義している場所を調べる」が参考になりそうです。
4. CSSをテスト的に編集する
デベロッパーツールではテスト的にHTMLやCSSを変えることができます。「この部分を赤にしたらどういう見た目になるかなぁ」というときにサクッとチェックできるわけですね。
4-1. デザインを変えたい部分を選択
さきほどと同じ要領で左上のをクリック⇒デザインを変えたい部分をクリックします。これで要素が選択されます。
変えたい要素の「親要素」や「前後の要素」が選択されてしまうことがよくあるので注意しましょう（展開したり、前後を選択してみたりして目的の要素を見つけ出しましょう）。
4-2. CSSの値を変更する
やることはカンタンで、変えたい値をダブルクリックして入力し直すだけです。ただし、色を変えるときにはカラーコードを入力し直す必要はありません。デベロッパーツールだと色変更がとても楽なのです。
たとえば背景色を変えてみましょう。変えたいカラーコードの左隣の■をクリックします。
カラーピッカーが表示されるので好きな色を選びます。カラーピッカーの下側には表示中のページで使われている色がずらっと並びます。
CSSの変更はリアルタイムでウェブページのデザインに反映されます。
なんとも素敵な機能です。
4-3. プロパティを追加
新しくCSSプロパティを追加したいときは、既存のコードの「;」の後ろあたりをクリックします。これで新しいプロパティと値が入力できるようになります。
4-4. 不要な指定はチェックを外す
それぞれのプロパティの左側にはチェックマークがついています。チェックを外すと、そのプロパティが適用されていない場合の表示を確認することができます。
4-5. コードをCSSファイルにコピペ
書き換えたCSSを実際に使いたいときは、ドラッグしてまるっとコピーしてしまいましょう。これをCSSファイルにペーストすれば、サクッとデザインを変更できてしまうのです（古いコードと置き換えましょう）。
もちろん一部のコードだけ（１行だけとか）コピペすることもできます。 チェックが外れているコードはコメントアウトされてコピーされます。
4-6. hover時やactive時のCSSをチェック
カーソルを当てたとき（hover時）用のCSSを確認・編集することもできます。これもかなり便利です。
右上の［:hov］をクリックします。すると、[:active]や[:hover]などが並んでいます。チェックを入れると◯◯:hover{〜}なども合わせて表示してくれるようになります。
4-7. 新しいセレクタを追加
右上の［＋］をクリックすると、新しいCSSのカタマリを追加することができます。セレクタ名は選択中の要素を指定するものが自動で入力されます。
セレクタを変更
セレクタをダブルクリックすれば、セレクタ名を変更することができます。
4-8. ブラウザのリロードでリセット
ブラウザを再読込すれば、変更した部分はリセットされます。テスト途中にうっかり再読込してしまわないように注意しましょう。
5. HTMLをテスト的に編集する
次にHTMLをテスト的に編集する方法を解説します。CSSに比べると編集の機会は少ないかもしれませんが、こちらもとても便利なので覚えておきましょう。
5-1. 変えたい部分を選択
例によって左上のをクリックします。その後、変更したい部分をクリックして要素を選択します。
5-2. テキストを変更
まずは表示されるテキストを変えてみましょう。
変更したいテキストをダブルクリックすると編集できるようになります。好きなテキストを入力しましょう。
リアルタイムで変更が反映されます。「このテキストにしたらどう見えるのか確認したい」というとき等に便利です。
5-3. タグ名やid名を編集
タグ名やクラス名、id名などを変えることもできます。
変えたいタグ名やクラス名などをダブルクリックすれば編集がデキる状態になります。好きな名前に書きかえましょう。
5-4. 新しいクラス名を追加
①デベロッパーツール右上にある［.cls］をクリックすると、選択中のタグのクラス名が一覧で表示されます。②欄内にクラス名を入力してEnterを押すと…↓
③入力したクラス名がタグ内に追加されます。
5-5. コードをまるごと編集したい場合
タグ・属性・テキストなどをまるごと編集することもできます。
①変えたいコードの上で右クリックします。②[Edit as HTML]をクリックします。
これでコード全体を自由に書きかえられるようになります。中に新しいタグを入れることなんかもできるようにわけですね。
6. 検証機能でテキストやコードを検索する方法
以下のコマンドにより検索機能を使うことができます。：⌘＋F ：Ctrl + F
たとえば「iPad」と検索するとHTMLコード全体から「iPad」を含むテキストやコードを表示してくれます。
よく使うので覚えておくことをおすすめします。
7. スマホサイズなどでの表示を確認する
Chromeのデベロッパーツールでは様々な大きさの端末での表示をシミュレーションすることもできます。この機能はデバイスモードと呼ばれています。ウェブサイトやブログを作るときには欠かせない機能かと思います。
7-1. デバイスモードを起動
をクリックするとデバイスモードが起動します。
7-2. 画面サイズを選択
画面上部に表示される[Responsive▼]をクリックすると端末名がずらっと表示されます。
たとえばiPhone6を選ぶと、画面サイズが375×667となります。このように端末ごとの表示を確認できるのです。
Responsiveを選んでいる場合、表示領域の右端をドラッグすることで自由にサイズを変えられるようになります。
レスポンシブデザインを作るときには大活躍すること間違い無しの機能です。
