この記事ではwebデザインに携わる人、学習する人は必ず押さえたい「デベロッパーツール」の基本的な使い方を解説します。
デベロッパーツールを使いこなせばwebサイトのコーディングが非常にやりやすくなります。
※デベロッパーツールの初心者に向けた解説となっております
デベロッパーツールとは?

「デベロッパーツール」とは、Google Chromeに搭載されているツールで、webサイトのコンテンツの分析を簡単にすることができます。
デベロッパーツールを使えば、普段見ているサイトの構成を知れたり、自分が制作しているサイトのコードを書き換えてテストすることができます。
デベロッパーツールを使いこなそう!
デベロッパーツールの開き方
まずはデベロッパーツールの開き方を2つ紹介します。GoogleChromeを開いている前提です。
①.右クリック→「検証」

②.右上「︙」→「その他のツール」→「デベロッパーツール」

⇩

これでデベロッパーツールを表示させることができます!

デベロッパーツールのレイアウトを変更する
デベロッパーツールのレイアウトを自分が見やすいように変更しましょう。
右上「 ︙ 」→Dock sideから選択

私はいつも右から2番目の「Dock to bottom」を選択しています。レイアウトは以下のようになります⇩

初心者が押さえておきたい便利機能5選
デベロッパーツールの便利機能を紹介します。
- デバイスごとの画面表示が確認できる
- HTMLのコードを選択すると、該当部分の画面構造とCSSが表示される
- チェックマークで適用させたいCSSを選択することができる
- CSSを追加
- margin,padding,borderのレイアウトを確認できる
デバイスごとの画面表示が確認できる
web制作では「PC用」「タブレット用」「スマートフォン用」などデバイスに合わせて画面表示が変更されるように設計します。
デベロッパーツールではデバイス別の画面表示をすぐに確認することができます。
方法:デバイスアイコンを押す

このようにPCの画面でスマートフォンの画面表示を見ることができます。また、画面上部のバーでデバイスや画面幅の変更を行うことができます。

HTMLのコードを選択すると、該当部分の画面構造とCSSが表示される

チェックマークで適用させたいCSSを選択することができる

CSSを追加することもできる

margin,padding,borderのレイアウトを確認できる

デベロッパーツールを使いこなそう!
GoogleChromeに搭載されている機能「デベロッパーツール」を紹介しました。webデザインに携わる人、携わろうとしている人は必ず使いこなしたいスキルです!
まだまだ便利な機能がたくさんあるので、勉強してみてはいかがでしょうか。