ブラウザの開発者ツール
開発者ツールを起動する
Google Chrome などのブラウザに搭載されている開発者ツールには、ウェブ開発をサポートする様々な機能が提供されています。
Google Chrome 以外の開発者ツール
Google Chrome 以外のブラウザにも開発者ツールは搭載されています。ほとんど同等の機能が提供されているので、基本的にはどれを使っても構いません。しかしながら、Google Chrome のものが最も多く使用されており、本カリキュラムでも基本的には Google Chrome を用いるものとします。
開発者ツールは、command + option + I (macOS) / Ctrl + Shift + I (Windows) キーを押すことにより起動できます。
HTML や CSS の構造の確認
Elements
タブを用いると、ウェブサイト上に現在表示されている HTML の構造や、各 HTML 要素に適用されている CSS の状態を確認したり、その場で値を書き換えて、表示が変化する様子を確認したりすることができます。
また、表示中の HTML 要素を右クリックして 検証
メニューをクリックするか、開発者ツールの中のインスペクトボタン () をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。