index.md

title	ブラウザの開発者ツール

import CodeBlock from '@theme/CodeBlock'; import Term from "@site/src/components/Term"; import OpenInCodeSandbox from "@site/src/components/OpenInCodeSandbox"; import inspectElementsVideo from "./inspect-elements.mp4"; import { GrSelect } from "react-icons/gr";

開発者ツールを起動する

Google Chrome などのブラウザに搭載されている開発者ツールには、ウェブ開発をサポートする様々な機能が提供されています。

:::info Google Chrome 以外の開発者ツール Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。 :::

開発者ツールは、Cmd (Ctrl) + Opt (Shift) + I キー、もしくは F12 キーを押すことにより起動できます。

HTML や CSS の構造の確認

Elements タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。

また、表示中の HTML 要素を右クリックして 検証 メニューをクリックするか、開発者ツールの中のインスペクトボタン (<GrSelect style={{ verticalAlign: "middle" }} />) をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。