Google Chrome デベロッパーツール使い方 | 変更保存で改善速度を爆速に！

2022年5月11日
2022年5月12日
Web制作
google, 無料, webツール, 業務効率化, web制作, 初心者向け, ノウハウ, webデザイン

Google Chrome デベロッパーツールについて解説します。Chrome デベロッパーツール使い方を学ぶことで、ホームページの修正、改善、などのスピードがグッと速くなります。ビジネスにおいて、ホームページでの情報開示スピードアップは、武器です。web制作会社とのコミュニケーションツールにも使えるので、Chrome デベロッパーツールは便利ですよ！

Google Chrome デベロッパーツールとは、検証機能とも呼ばれます。なぜ、Chrome デベロッパーツールが、検証ツールなのかというと、HTMLなどのソース、タグや、CSS、javascriptなどの挙動や記述、制御などが一目でわかるからです。

また、Chrome デベロッパーツールは、一時的に、ページ自体の編集も可能ですし、どのファイルからデータを読み始めているか？なども確認できます。ページ速度が遅い！どこでひっかかっているんだろう？なども調査できるのです。

この記事は、Chrome デベロッパーツールとはどんなものかを解説しつつ、Chrome デベロッパーツールできること、使い方、見方をまとめていきます。ホームページの改善、バグ調査、編集などの効率化、作業時間短縮、web制作会社とのコミュニケーションツールとして、活用いただけますよ。web制作にかかわる方、web制作者、事務、営業、企画、マーケッター、webディレクター、webデザイナー、コーダー、プログラマー、エンジニア、SEなどにおすすめの記事です。Google の Chrome デベロッパーツールを知って、web制作の効率化を上げましょう！！

1 Chrome デベロッパーツールとは
2 Chrome デベロッパーツール見る方法
3 Chrome デベロッパーツールショートカットキー
4 Chrome デベロッパーツールスマホ
5 Chrome デベロッパーツールスマホ機種追加方法
6 Chrome デベロッパーツール日本語表示にする方法
7 Chrome デベロッパーツール使い方
8 Chrome デベロッパーツール保存方法
9 chrome デベロッパーツール解説動画
10 まとめ chrome デベロッパーツールで検証を簡単に！改善修正の効率化に！
11 ■ web制作人気記事

Chrome デベロッパーツールとは

Google Chrome デベロッパーツールとは、Googleが開発した Chrome ブラウザに入っている検証機能のことを指します。普段、webサイトを見るときには、使いません。

Chrome デベロッパーツールはホームページ webプログラム開発者用の検証ツールなので、一般的に見ることは少ないかもしれませんね。

ただ、Chrome デベロッパーツールはエンジニア、プログラマー、webデザイナー、コーダー、webディレクターにとっては、とても利用頻度の高いツールです。

Chrome デベロッパーツールは、ホームページのタグの確認などができるほか、ネットワークなど、表示速度などのパフォーマンスもチェックできます。また、タグの改修、修正を保存できるため、webサイト運用の業務効率を向上させてくれる機能が多数入っているものなのです。

Chrome デベロッパーツールをもっと具体的に解説すると、ホームページのソース確認、ページの表示スピード、ネットワーク状況、javascriptのテスト、webデザインのチェックに活用可能ですね。

ちなみに、この Chrome デベロッパーツールは、似たような機能が、Microsoft Edge、firefox、Safariといったwebブラウザにもあります。

Chrome デベロッパーツール見る方法

Chrome デベロッパーツールをブラウザで動かすための方法を解説していきます。

Chrome デベロッパーツール起動手順は

対象のホームページに遷移
調べたい箇所で右クリック
メニューの中にある検証をクリック
画面の下部 or 右側に Chrome デベロッパーツールが起動

というようなかんじで、Chrome デベロッパーツールを見ることができるようになります。

ちなみに、Chrome デベロッパーツールの表示を消す場合は、ブラウザのウィンドウを消すように、×ボタンをクリックすれば、Chrome デベロッパーツールの表示ではなくなります。

なお、もっと簡単に、Chrome デベロッパーツールを開くには、ショートカットで開く方法もあります。

Chrome デベロッパーツールショートカットキー

Chrome デベロッパーツールを起動させるためのショートカットキーは、OSごとに、ちょっとだけ異なります。

windowsなら

Ctrl+Shift+I

Macなら、

Command + Option + I

で、Chrome デベロッパーツールが起動します。

なお、windowsのキーボードなら、F12 のキーでも、Chrome デベロッパーツールは起動させることが可能です。

Chrome デベロッパーツールスマホ

Chrome デベロッパーツールは、スマートフォンで、対象のホームページを見たときに、どんな見た目になるのかを、チェックできます。

スマホのwebブラウザでのエミュレータとして機能するのが、Chrome デベロッパーツールなのです。

Chrome デベロッパーツールでスマホ表示を確認する方法は、かんたんです。

Chrome デベロッパーツールを起動
Chrome デベロッパーツールの Elements の左にあるアイコンをクリック

これで、スマートフォンでの見た目をチェックできます。

このスマホ／タブレットのアイコンをクリックすることで、スマートフォンから、PCでの閲覧環境に戻すことも可能です。

Chrome デベロッパーツールスマホ機種追加方法

Chrome デベロッパーツールで、表示させたいスマホによっては、画面のサイズも変わってきます。それゆえ、Chrome デベロッパーツールは、スマホ機種ごとに、その表示が変わるようになっています。

Chrome デベロッパーツールで、スマホモードにすると、画面上部に、機種選択のバーが出ていて、ここで、スマホの機種の変更ができます。

Chrome デベロッパーツールでスマホ機種を追加することも可能で、スマホ機種追加方法は、以下の手順です。

Chrome デベロッパーツール起動
スマホモードへ
画面上部のバーでスマホの機種名をクリック
選択肢の中のEditをクリック
Add custom deviceをクリック
Device Nameに追加したい機種名を入力

これで、スマホ機種の追加が可能です。

最新のスマホの場合、横幅が異なったりします。ファーストビューなど、しっかりと、これで確認するようにしましょう。

参考までに、iPhone12 のサイズです

iPhone12 or iPhone12Proなら、390×884 ピクセル
iPhone12miniなら、375×667 ピクセル

です。

Chrome デベロッパーツール日本語表示にする方法

Chrome デベロッパーツール英語表記が基本になっています。しかし、わかりにくい！と思う方もいらっしゃるかと。

そこで、Chrome デベロッパーツール日本語表示にする方法を解説します。

Chrome デベロッパーツール日本語にする手順は

Chrome デベロッパーツール起動
Chrome デベロッパーツール右上の歯車アイコンをクリック
Language 項目から Japanese ? 日本語に変更
設定画面を×アイコンクリック
Chrome デベロッパーツール再起動

これで、Chrome デベロッパーツールは、再起動完了後に、日本語表示になります。かんたんに変わってくれますよ！！

Chrome デベロッパーツール使い方

Chrome デベロッパーツール使い方をまとめていきますね。

まずは、セレクトモードについて、解説していきます。

セレクトモード Chrome デベロッパーツール使い方

セレクトモードとは、webページ内の確認、検証をしたいテキストや画像などを選択して、その対象ソースなどを見れるようなモードです。

Chrome デベロッパーツールの基本機能です。

Chrome デベロッパーツールの左上にある矢印アイコンが青になっていると、セレクトモードとして、Chrome デベロッパーツールは機能します。

webページ上でマウスをあてると、マウスの要素に、Chrome 上で色が付きます。そして、デベロッパーツールのHTMLソースでも、表示がハイライトされます。

このときの色にも、意味があります。

青　コンテンツサイズ
緑　パディングサイズ
オレンジ　マージンサイズ

で表現されます。よく、余白の調整をしたいケースがあると思いますが、こういうときに多いのは、緑のパディングの調整だと思います。

Elementsパネル Chrome デベロッパーツール使い方

続いて、Elementsパネルについて、解説します。

Elementsパネルは、タブで、Elementsと出ている個所になります。

このElementsパネルは、webページのHTMLやCSSの編集を行えて、編集した結果が、chromeブラウザにて、リアルタイムに表示されます。

ただ、保存はされませんので、リロード（更新）をブラウザにかけると、元の表示に戻ってしまいます。

Elementsパネルでのソースは、あくまで、chromeブラウザで読み込んだソースをPCのローカル環境で編集している状態なので、サーバには反映されません。

このElementsパネルでHTMLの削除したい場合は、削除したい要素を選択して、右クリックして、delete elementをクリックしてください。

htmlだけでなく、CSSも編集することができるので、Elementsパネルを使いこなせれば、デザインや表示の調整が、各段に速くなります！

新しいCSSプロパティを追加することも可能です。CSSセレクタのプロパティの空白スペースをクリックすれば、CSSプロパティの入力欄が出てきて、CSSの追加も可能になります。
色なども簡単に変えられるので、とっても便利です。

inspector-stylesheet とは

inspector-stylesheetとは、Chrome デベロッパーツールで、仮に作ったCSSファイルのことを指します。

追加したCSS、なんだっけ？というときに、とても便利です。

ルーラー表示非表示 Chrome デベロッパーツール使い方

実は、Chrome デベロッパーツールには、ルーラーを出せるのです。画像のサイズなどをはかるときなど、便利です。

ルーラー表示方法は、スマホなどの表示切替ができるデバイスモードにして、右上にある3点リーダーから、Show rulers を選択してください。

ピクセル単位のルーラーになっています。

Chrome デベロッパーツール保存方法

Chrome デベロッパーツールで、編集・変更をしたHTMLやCSSのスタイルを保存する方法を書きますね。

Chrome デベロッパーツール起動
Sourcesタブを開く
サイドバーから Overrides をクリック
+ Selected folder for overrides をクリック
保存用のフォルダを選択
許可をクリック
Elementsのタブで HTML や CSS スタイルの更新
Sourcesタブを開く
OverridesのフォルダにあるHTML、CSSファイルを選択して右クリック
Save as メニューアから、変更されたファイルを保存

というかんじです。

CSSなどの変更をリアルにチェックした後で、実際のソースに反映させるときには、とっても便利ですよ。

chrome デベロッパーツール解説動画

Google chrome デベロッパーツール解説動画をご紹介します。今回のchrome デベロッパーツール解説では、デジタルハリウッドの講師が、がっつりと、chrome デベロッパーツールを解説している動画を選びました。

この動画のコメント欄、見てみてください。chrome デベロッパーツール解説が、とってもわかりやすい！とか、書かれています。感謝の気持ちのコメントも多いです。

それだけ、chrome デベロッパーツール知りたい人多いんですよね。chrome デベロッパーツール使い方について、学べるYoutube動画、参考にしてください。

デジタルハリウッドは、大手のITスクールなので、さすが、わかりやすい講師の方がいらっしゃるんですよね。すばらしいですよね。

chrome デベロッパーツールって、自分は、よくわかっている！と思っていても、意外と知らない機能もあるんですよね。使わない機能は、なかなか、というかんじですね。

Youtube動画なので、画面も見ながら、解説されているので、知らない機能でも、イメージがつきやすいと思います。ぜひ、chrome デベロッパーツール学習の参考にしてくださいね。

まとめ chrome デベロッパーツールで検証を簡単に！改善修正の効率化に！

chrome デベロッパーツールとは、どんなツールなのか、をベースに、解説、ご紹介をしてみました。

web制作などに携わっている人でないと、chrome デベロッパーツールは見る機会も少ないと思いますが、web制作会社の人とのコミュニケーションや、システム開発会社の方に、デザインの指摘をするときなどに、chrome デベロッパーツールは便利です。

chrome デベロッパーツールの機能を把握して、ぜひ、活用してみてください。ホームページの挙動検証などにも有効的ですよ。

本番ファイルをいきなり修正するのではなく、予行演習が可能。
PC、スマートフォン、タブレット各デバイスでの表示確認

といった点で便利です。

ホームページの検証、システムの検証、改善などの作業時間を短くしたいとき、コミュニケーションを促進したいとき、不具合改善をスピーディーにしたいときに、chrome デベロッパーツールは、おすすめツールです。web制作、webアプリケーション開発の効率化を、chrome デベロッパーツールで、促進しましょう。

リード広告で見込み顧客獲得！リード獲得広告メディア事例メリット解説