WebデザイナーのためのChromeデベロッパーツール(検証)の使い方

クロームの要素の検証の使い方

Googleクロームにはデベロッパーツール(要素の検証機能)というびっくりするくらい便利な機能が備わっています。僕自身ウェブデザインをするときには、多用しまくっています。今回はその中でも特におさえておきたい便利な機能について解説していきます。

1. どんなことができるの?

Chromeのデベロッパツールを使うと、例えば以下のようなことができます。

デザイン変更テスト

デベロッパツールの用途 01

自分のウェブサイトやブログのHTMLとCSSコードをテストで書き換えて、表示をチェックすることができます。 セクション3〜5で解説

他のウェブサイトのコードをチェック

デベロッパツールの用途 02 min

また、他のウェブサイトのコードがどのように書かれているのかもチェックすることができます。これはかなり勉強になります。 セクション3〜5で解説

複数サイズでの表示チェック

デベロッパツールの用途 03 min

様々な画面サイズでの表示をチェックすることもできます。これはウェブサイトやブログをデザインするうえで欠かせません。 セクション7で解説

他にもChromeのデベロッパーツールには様々な便利な機能があります。今回はウェブデザイナーやブログ運営者がひとまずおさえておきたい機能に絞って紹介していきます。

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

まず、デベロッパーツールを起動する方法を解説します。

画面のどこかを右クリック

チェックしたいページを開き、画面のどこかを右クリックします。コードを調べたいパーツが決まっているのであれば、そのあたりを右クリックすると後で楽です。

右クリック→検証

表示されるメニューの中から[検証]をクリックします。

デベロッパツールが開く

デベロッパーツールが画面の下部に開きます。コードがゴチャゴチャ書かれていて嫌になりそうですが、使っていればすぐに慣れてきます(きっと…!)。

なお、ショートカットを使って起動させることもできます。よく使うので覚えておいても良いかもしれませんね。

ショートカット

以下のコマンドで起動させることもできます。 + Opt + I F12

3. ウェブページのHTMLとCSSを見る

気になるウェブページがどのようなコードで書かれているのかを見てみましょう。例としてAppleのトップページで[検証]を行います。

3-1. 見たい部分のコードを表示

要素選択のアイコンをクリック

デベロッパーツールの左上にあるアイコンをクリックします。これで「選択モード」となり、ページ内でクリックした部分のコードが見られるようになります。

クリックしてその部分のコードを表示

①「ここのコードが見たいな」という部分をクリックします。②すると、下部のウィンドウでクリックしたあたりのコードが表示されます。

3-2. 画面の見方

ここからはウィンドウの見方を解説していきます。

デベロッパーツールの画面の見方

左側にはHTMLコードが表示されます。選択されている要素(タグ)は青くなります。右側には選択中の要素に関わってくるCSSが表示されます。これは便利。

選択要素(青の部分)はキーボードので移動させることができます。また、コードをクリックすれば、そのコードが選択されます。

3-3. HTML(Elements)を展開する

HTMLの展開

▶をクリックするとHTMLが展開され、中のコード(子要素)を見ることができます。キーボードのでも展開できます。

ショートカット

altを押しながら▶をクリックすれば、中の子要素が全て展開されます。

3-4. CSS(Styles)の見方

次に右側のCSSの見方を解説していきます。上のタブで[Styles]が選ばれていることを確認しましょう。ここには「選択中の要素」に対して指定されているCSSが全てずらっと表示されます(下にスクロールすればどんどん見ることができます)。

stylesの見方

①CSSのセレクタ(適用先)が表示されます。②指定されているCSSが表示されます。①も②も実際にCSSファイルに書かれているものと全く同じ形で表示されています。

CSSが書かれているファイル名

③右上に書かれている「◯◯.css」は、このCSSコードが書かれているファイル名を表しています。

インラインのCSSは「element.style」に表示

element.styleにインラインのCSSが書かれる

インラインに書かれたCSS(HTMLタグ内に書かれたCSS)があれば、1番上の「element.style」というところに表示されます。

取り消し線の意味

取り消し線の意味

取り消し線はそのCSSが適用されていないということを表します。主に「同じプロパティについての指定が複数あり、優先順位が低い場合」にこうなります。

「コードに問題がある」ということを表しているわけではないのでご安心くださいませ。

3-5. Computedとは?

[Styles]の右隣には[Computed]と表示されています。

computedの意味

これをクリックすると選択中の要素に最終的に適用されているCSSの値を一覧で見ることができます。文字色は◯◯で、フォントサイズは◯◯pxで…みたいな感じですね。

これも便利なので覚えておくと良いでしょう。その右側の[Event Listeners]などは主にJavascript/jQueryのチェックに使うものです。詳しくは「クリックイベントを定義している場所を調べる」が参考になりそうです。

4. CSSを編集する

デベロッパーツールではテスト的にHTMLやCSSを変えることができます。「この部分を赤にしたらどういう見た目になるかなぁ」というときにサクッとチェックできるわけですね。

4-1. デザインを変えたい部分を選択

デザインを変えたい部分をクリック

さきほどと同じ要領で左上のアイコンをクリック⇒デザインを変えたい部分をクリックします。これで要素が選択されます。

変えたい要素の「親要素」や「前後の要素」が選択されてしまうことがよくあるので注意しましょう(展開したり、前後を選択してみたりして目的の要素を見つけ出しましょう)。

4-2. CSSの値を変更する

やることはカンタンで、変えたい値をダブルクリックして入力し直すだけです。ただし、色を変えるときにはカラーコードを入力し直す必要はありません。デベロッパーツールだと色変更がとても楽なのです。

CSSの値を編集

たとえば背景色を変えてみましょう。変えたいカラーコードの左隣の■をクリックします。

色を変更してみる例

カラーピッカーが表示されるので好きな色を選びます。カラーピッカーの下側には表示中のページで使われている色がずらっと並びます。

変更が反映される

CSSの変更はリアルタイムでウェブページのデザインに反映されます。

なんとも素敵な機能です。

4-3. プロパティを追加

Cssを追加

新しくCSSプロパティを追加したいときは、既存のコードの「;」の後ろあたりをクリックします。これで新しいプロパティと値が入力できるようになります。

4-4. 不要な指定はチェックを外す

CSSのチェックを外す

それぞれのプロパティの左側にはチェックマークがついています。チェックを外すと、そのプロパティが適用されていない場合の表示を確認することができます。

4-5. コードをCSSファイルにコピペ

書き換えたコードをコピー

書き換えたCSSを実際に使いたいときは、ドラッグしてまるっとコピーしてしまいましょう。これをCSSファイルにペーストすれば、サクッとデザインを変更できてしまうのです(古いコードと置き換えましょう)。

もちろん一部のコードだけ(1行だけとか)コピペすることもできます。 チェックが外れているコードはコメントアウトされてコピーされます。

4-6. hover時やactive時のCSSをチェック

カーソルを当てたとき(hover時)用のCSSを確認・編集することもできます。これもかなり便利です。

hover時のデザインを変える

右上の[:hov]をクリックします。すると、[:active]や[:hover]などが並んでいます。チェックを入れると◯◯:hover{〜}なども合わせて表示してくれるようになります。

4-7. 新しいセレクタを追加

セレクタを追加

右上の[+]をクリックすると、新しいCSSのカタマリを追加することができます。セレクタ名は選択中の要素を指定するものが自動で入力されます。

セレクタを変更

クラス名を変更

セレクタをダブルクリックすれば、セレクタ名を変更することができます。

4-8. ブラウザのリロードでリセット

ブラウザを再読込すれば、変更した部分はリセットされます。テスト途中にうっかり再読込してしまわないように注意しましょう。

5. HTMLを編集する

次にHTMLをテスト的に編集する方法を解説します。CSSに比べると編集の機会は少ないかもしれませんが、こちらもとても便利なので覚えておきましょう。

5-1. 変えたい部分を選択

変えたい文字をクリックして選択

例によって左上のアイコンをクリックします。その後、変更したい部分をクリックして要素を選択します。

5-2. テキストを変更

まずは表示されるテキストを変えてみましょう。

文字を変更

変更したいテキストをダブルクリックすると編集できるようになります。好きなテキストを入力しましょう。

表示が変更される

リアルタイムで変更が反映されます。「このテキストにしたらどう見えるのか確認したい」というとき等に便利です。

5-3. タグ名やid名を編集

タグ名やクラス名、id名などを変えることもできます。

HTMLを変更

変えたいタグ名やクラス名などをダブルクリックすれば編集がデキる状態になります。好きな名前に書きかえましょう。

5-4. 新しいクラス名を追加

クラス名を追加

①デベロッパーツール右上にある[.cls]をクリックすると、選択中のタグのクラス名が一覧で表示されます。②欄内にクラス名を入力してEnterを押すと…

クラス名が追加される

③入力したクラス名がタグ内に追加されます。

5-5. コードをまるごと編集したい場合

タグ・属性・テキストなどをまるごと編集することもできます。

edit as html

①変えたいコードの上で右クリックします。②[Edit as HTML]をクリックします。

HTML編集モードに

これでコード全体を自由に書きかえられるようになります。中に新しいタグを入れることなんかもできるようにわけですね。

6. テキストやコードを検索する方法

検索バーの表示

以下のコマンドにより検索機能を使うことができます。F Ctrl + F

検索する例

たとえば「iPad」と検索するとHTMLコード全体から「iPad」を含むテキストやコードを表示してくれます。

よく使うので覚えておくことをおすすめします。

7. スマホサイズなどでの表示を確認する

Chromeのデベロッパーツールでは様々な大きさの端末での表示をシミュレーションすることもできます。この機能はデバイスモードと呼ばれています。ウェブサイトやブログを作るときには欠かせない機能かと思います。

7-1. デバイスモードを起動

スマホサイズやタブレットサイズでの表示を確認

デバイスモードをクリックするとデバイスモードが起動します。

7-2. 画面サイズを選択

iPhoneサイズで表示

画面上部に表示される[Responsive▼]をクリックすると端末名がずらっと表示されます。

iPhone6を選んだ場合

たとえばiPhone6を選ぶと、画面サイズが375×667となります。このように端末ごとの表示を確認できるのです。

Responsiveの場合

Responsiveを選んでいる場合、表示領域の右端をドラッグすることで自由にサイズを変えられるようになります。

レスポンシブデザインを作るときには大活躍すること間違い無しの機能です。

サルワカ