この記事では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デザインに携わる人、携わろうとしている人は必ず使いこなしたいスキルです！
まだまだ便利な機能がたくさんあるので、勉強してみてはいかがでしょうか。
ワカバ
