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

スポンサーリンク
ITスキル

この記事ではwebデザインに携わる人学習する人は必ず押さえたい「デベロッパーツール」の基本的な使い方を解説します。

ワカバ
ワカバ

デベロッパーツールを使いこなせばwebサイトのコーディングが非常にやりやすくなります。

※デベロッパーツールの初心者に向けた解説となっております

スポンサーリンク

デベロッパーツールとは?

「デベロッパーツール」とは、Google Chromeに搭載されているツールで、webサイトのコンテンツの分析を簡単にすることができます。

デベロッパーツールを使えば、普段見ているサイトの構成を知れたり、自分が制作しているサイトのコードを書き換えてテストすることができます。

スポンサーリンク

デベロッパーツールを使いこなそう!

デベロッパーツールの開き方

まずはデベロッパーツールの開き方を2つ紹介します。GoogleChromeを開いている前提です。

①.右クリック→「検証」

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

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

デベロッパーツールのレイアウトを変更する

デベロッパーツールのレイアウトを自分が見やすいように変更しましょう。

右上「 ︙ 」→Dock sideから選択

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

初心者が押さえておきたい便利機能5選

デベロッパーツールの便利機能を紹介します。

  1. デバイスごとの画面表示が確認できる
  2. HTMLのコードを選択すると、該当部分の画面構造とCSSが表示される
  3. チェックマークで適用させたいCSSを選択することができる
  4. CSSを追加する
  5. margin,padding,borderのレイアウトを確認できる

デバイスごとの画面表示が確認できる

web制作では「PC用」「タブレット用」「スマートフォン用」などデバイスに合わせて画面表示が変更されるように設計します。

デベロッパーツールではデバイス別の画面表示をすぐに確認することができます。

方法:デバイスアイコンを押す

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

HTMLのコードを選択すると、該当部分の画面構造とCSSが表示される
チェックマークで適用させたいCSSを選択することができる
CSSを追加することもできる
margin,padding,borderのレイアウトを確認できる

デベロッパーツールを使いこなそう!

GoogleChromeに搭載されている機能「デベロッパーツール」を紹介しました。webデザインに携わる人、携わろうとしている人は必ず使いこなしたいスキルです!

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

ワカバ

コメント

タイトルとURLをコピーしました