【プログラミング入門】中学生でも分かるGoogle Chromeデベロッパーツールの使い方

こんにちは～！アメリカ・シリコンバレー在住のSeikaです😊

今回は、Google Chromeデベロッパーツール（以下、DevTools）の使い方をわかりやすく説明していきたいと思います。

(2023年7月26日公開)

---

1、Chrome DevToolsとは？

Google Chrome DevToolsとは、Googleのウェブブラウザ「Chrome」に組み込まれている便利なツールのひとつです。

DevToolsを利用するメリットは以下が挙げられます。

1. 他のウェブサイトから学べる
   他のウェブサイトのコードを見ることができ、そこから学ぶことができます。
   

2. デザインとレイアウトの調整
   色、ボタンの大きさを変えたり、画像を動かしたりした際、すぐに結果を見ることができます。
   

3. ウェブサイトの問題を見つける
   何がウェブサイトを遅くさせているのかを見つけることも可能。
   

4. モバイルデバイスの表示を確認できる
   スマートフォンやタブレットのような異なるデバイスで、どのように表示されるかを確認までできます。

2、DevToolsへのアクセス

それでは、実際にDevToolsを開いてみたいと思います。

まずはDevToolsを開いてみます

1、Googleのウェブブラウザ「Chrome」を開く。
2、任意のウェブサイトで右クリック
3、メニューから「検証」を選択

DevToolsへのアクセス

DevToolsが開きました

3、CSSスタイルの表示

CSSスタイルの表示させます。

DevToolsの「Elements」タブをクリック

Elementsタブをクリック

CSSが確認できました。

CSS

4、CSSスタイルを修正

今度はCSSを修正したいと思います。

1、CSSルールの値をクリック
2、値を変更
3、Enterキーをクリック

バックグラウンドのカラーを変更します。

黒にしました

変更前

変更後

🌟修正する際の注意点

1. CSSルールを変更すると、一つ以上の要素に影響を与える可能性があります。

2. DevToolsはウェブページに加えた変更は保存されません。

5、CSSスタイルを追加

既存のCSSルールを修正するだけでなく、新たなCSSルールを追加することもできます。

1. 右上隅にある+アイコンをクリック

2. 要素のセレクタ内でクリックし

3. 新たなCSS宣言を追加

background-color: red;

新たなCSS宣言を追加

背景が赤になりました

6、HTMLを変更

DevToolsを使って、ウェブページのHTML内容を直接変更することも可能です。

<h1>中学生でも分かるChrome DevToolsの使い方</h1>を変更します

中学生を小学生にしました

小学生になりました

---

そんなに複雑ではないかと思います！
ぜひやってみてくださいね。

それでは今回は以上です。
また、次の記事でお会いしましょう～🥰

Follow me here😊
Youtube│Instagram│Twitter│Dribbble│Linkedin│Behance│Notion│Portfolio│Figma │質問箱