ITスキル

【webデザインに必須】デベロッパーツールを使いこなそう!(初心者向け)

この記事では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デザインに携わる人、携わろうとしている人は必ず使いこなしたいスキルです!

まだまだ便利な機能がたくさんあるので、勉強してみてはいかがでしょうか。