ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。
そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。
基本的な操作を知っているだけでも、「どこを編集すれば何が変わるのか」がわかるようになります。
目次
デベロッパーツールとは
デベロッパーツールとは、ウェブサイト上で様々なテストや検証ができるデバッグツールです。
Google Chromeで使えます。検証モードや開発者ツールとも呼ばれており、サイトのバグや不具合を見つけるためにも利用されます。
色んなブラウザでデベロッパーツールが利用できますが、当記事ではGoogle Chromeのデベロッパーツールについて解説いたします。
デベロッパーツールでできること
デベロッパーツールでできることは多岐に渡りますが、基本的な使い方を覚えるだけでも、次のようなことが可能です。
- ウェブサイトでどんなHTMLやCSSが適用されているのかがわかる。
- ウェブサイト上でHTMLやCSSの編集を検証できる。
- 他のサイトのソースコードを調べれば、自分のサイトにも応用できることがある。
- スマホやタブレット等での見え方を擬似再現できる。
- サイトで起きているエラー内容を確認できる
これらはほんの一部で、基礎中の基礎のような部分ですが、他に次のようなことも可能です。
デベロッパーツールの基本的な使い方
デベロッパーツールは、Google Chromeでページを開いた状態で、次のショートカットで即起動できます。
Windows：F12キー
Mac：Command＋Option＋Iキー
すると下記のような画面が表示されます。
上記画面がデベロッパーツールを開いた状態です。
基本的な操作方法は以下で解説しますが、動画解説が見たい方はこちらをどうぞ。
当記事では初心者向けに、基本的な使い方を3つ解説いたします。
HTMLやCSSを編集する
今回は、一部のCSSを編集してみてましょう。デベロッパーツール上で変更してもサイトには影響しないので、気軽に試してみてください。
style.cssなどを直接編集せずに、変更内容を簡単に再現できる点もデベロッパーツールのメリットです。
操作手順は次の通り。
- カーソルアイコンをクリック
- 編集したい要素を選択
- スタイルタブ内でCSSを編集する
1. カーソルアイコンをクリック
デベロッパーツールの下記箇所に表示されている「カーソルアイコン」をクリックします。
カーソルアイコンの色が変わればOKです。
2. 編集したい要素を選択
カーソルアイコンの色が変わった状態で、任意の要素を選択します。
今回は、当サイトトップページの「キャッチコピー」を選択します。
要素を選択すると、デベロッパーツール内のHTMLがマークされ、選択した要素に適用されているCSSが、右下のスタイルタブに表示されます。
3. スタイルタブ内でCSSを編集する
スタイルタブ内のCSSは自由に編集できます。
今回は、「font-size: 38px」という箇所の数値を変更してみましょう。
数値を入力してもいいですし、キーボードの「↑」「↓」ボタンで微調整することも可能です。
ちなみにスタイルタブ内のチェックボックスをクリックすると、チェックが外れ、適用されていたスタイルが無効化されます。ワンタッチでそのCSSの有無を検証できます。
デベロッパーツールはあくまで検証のためのツールで、編集内容はあなたのPC上でのみ反映されます。
サイトに実際に反映したい場合は、内容をコピーしてどこかにメモしておきましょう。
ちょっとしたCSSの変更ぐらいであれば、TCDテーマなら簡単に反映できます。
>> 編集内容をサイトに反映する方法を見る
別デバイスでの見え方を再現する
デベロッパーツールを使えば、実機が手元になくてもスマホやタブレット表示を再現できます。
画面左側の「サイズ：レスポンシブ」という箇所をクリックします。表示されていない場合は、画面右側のアイコンをクリックしてください。
上記箇所から色んなデバイスを選択できます。
例えば、「iPhone6/7/8」を選択すると次のように表示されます。
スマホでどのように見えるか簡易的に確認可能です。
デバイスを変更後にリロード（Ctrl ＋ R / command + R）することで、そのデバイス用のスタイルが反映されます。もちろんPC画面と同じように各要素を選択してHTMLやCSSを仮編集できます。
実機と見え方が異なることもあるので、あくまで参考程度に留めておきましょう。
ホームページやWebサイトは、スマホやタブレットなど、様々なデバイスで閲覧されることを考える必要があります。 Chromeのデベロッパーツールでもモバイルデザインのシミュレーションはできますが、多機能な反面、操作画面は少し煩雑な印象です。Webサイトの資料やプレゼンとして見せたいときにはあまり...
エラーを確認する
デベロッパーツールでは、サイトで発生しているエラー内容を確認できます。デベロッパーツールのコンソールタブを選択すると次のような画面に切り替わります。
何もエラーがなければ、上記のように「エラーなし」と表示されます。
一方でエラーがある場合は、次のようにエラーメッセージが表示されます。
上記は、デベロッパーツール上でわざと表示させた構文エラーですが、右端のリンクからエラーの原因箇所を確認できます。
コンソールで確認できるエラーには様々な種類がありますが、JavaScriptで発生するエラーはこちらの記事にまとめていますので、参考にご覧ください。
JavaScriptのコードを実行する際、意図した通りに動作しないことが良く起こります。しかし、コンソールに表示されるエラーメッセージを読み解くことで、問題を解決できる場合がほとんどです。 今回は、エラーの読み取り方を知るために、エラーの種類とその内容を見ていきます。 エラーの種類 Jav...
エラーメッセージをGoogleで検索すると、エラーの原因や解決策に近づけるかもしれません。
サイトの開発者や制作会社などにお問い合わせする際にも、このようなエラーメッセージを共有することで解決がスムーズになります。
エラーメッセージ上で右クリックすると「名前を付けて保存」が表示されます。
「.log」という拡張子で保存されるので、そのファイルをお問い合わせ先に共有すればOKです。
TCDのサイトに編集内容を反映させる方法
TCDテーマをお使いの方向けに、デベロッパーツールで編集した内容を、サイトに反映させる方法をご紹介いたします。テーマオプションに設定項目が無い箇所でも、簡単なカスタマイズができるようになります。
今回は、CSSの編集だけで簡単に実現できる「文字サイズの調整」を例に説明いたします。
手順は次の3ステップです。
- 要素のCSSを確認する
- デベロッパーツールでテストする
- 内容をカスタムCSSにコピペする
1. 要素のCSSを確認する
サイズを変えたい要素のCSSを確認するために、デベロッパーツールで要素を選択します。今回は日付のサイズを変えてみましょう。
WordPressテーマ「HOLOS」のブログ記事の日付を選択中
2. デベロッパーツールでテストする
フォントサイズを14px → 16pxにサイズアップできるかデベロッパーツールでテストします。
「font-size: 14px;」の部分を「font-size: 16px;」に変更して変化があるか確認してみましょう。ちゃんとサイズが変われば問題ないです。
3. 内容をカスタムCSSにコピペする
TCDテーマの場合は、デベロッパーツールでテストした内容を、カスタムCSSにコピペするだけで、簡単に反映できます。style.css等のファイルを編集する必要はありません。
先ほどテストした箇所のCSSをまるごとドラッグしてコピーします。
.date_list .date {
color: #999;
position: relative;
font-size: 16px;
padding-left: 20px;
margin-right: 10px;
margin-bottom: 10px;
}今回の場合はサイズを変えるだけなので、「font-size: 16px;」以外は削除して問題ないので、こうなります。
.date_list .date {
font-size: 16px;
}あとは、TCDテーマのテーマオプション > 基本設定 > カスタムCSS内にペーストすればOKです。
サイトに反映されていることが確認できるはずです。
カスタムCSSの詳しい使い方は下記記事を参考にご覧ください。
TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。 当記事では、カスタムCSSの使い方について紹介していきます。 また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください...
今回は文字サイズを例にご紹介しましたが、同じ要領で文字の色を変えたり、スペース（margin/padding）を変更することも可能です。
カスタムCSSに書いた内容を削除すれば元通りなので、デベロッパーツールを使ってぜひ色々試してみてください。
まとめ
初心者向けに、Google Chromeのデベロッパーツールの使い方を解説いたしました。
基本的な操作方法を知っていれば、ウェブサイト上でテストや検証が可能です。「サイトの一部を微調整したい」という場面でも、どのHTML、CSSを変更すればいいかすぐにわかります。
サイトで発生しているエラーの原因究明にも利用できますので、ぜひ使い方を覚えておきましょう。
開発や検証に関する記事一覧
「不安定な（速度の出ない）通信環境だとどうなるのか。」 「ページの読み込みが滞る際にどんな挙動になるのか。」 Web制作に携わっていると上記のような検証が必要なシーンがあると思います。 例えば、4Gや5G回線が普及していないエリアでは通信環境が不安定ですし、回線エリア以外の要因で通信環...
ユーザーによって閲覧するデバイスは異なりますので、WEBサイトにはレスポンシブデザイン（画面サイズやブラウザに応じて変更されるデザイン）が求められます。なので、制作段階ではさまざなサイズでの検証が必要になるわけです。 Chromeのデベロッパーツールを使って、他のデバイスでの表示を仮検証できま...
ホームページやWebサイトは、スマホやタブレットなど、様々なデバイスで閲覧されることを考える必要があります。 Chromeのデベロッパーツールでもモバイルデザインのシミュレーションはできますが、多機能な反面、操作画面は少し煩雑な印象です。Webサイトの資料やプレゼンとして見せたいときにはあまり...
