WEB制作をしていく中でとても便利な機能があります。

Chromeのデバロッパーツールです。

非常に使えるので覚えておいて損はないです。

WEB制作をするならChromeのデベロッパーツール(検証機能)を使いこなそう

デバロッパーツールでできることは以下です。

・デザインをチェックしながら作業ができる
・レイアウトを変更できる
・他のサイトのコードをチェックできる

イメージがしにくいと思いますので、早速使っていきましょう。

デベロッパーツールの使い方

まずは、サイトを開き、デベロッパーツールを起動します。

検証を開く

右クリックすると、「検証」が出てきますので選択してください。

デベロッパーツールを開く

画像のように左側に出てくる場合や右・下の場合もあります。

次は、デベロッパーツールを使ってサイトを操作してみましょう。

デベロッパーツールでHTMLを見てみる

デベロッパーツールでそのサイトのHTMLやCSSが見れます。

デベロッパーツールでサイトを見てみる
先ほど出したデベロッパーツールの左上を押してください。

そしたら少し青くなるので画面のどこでもいいので選択してみてください。

すると画像のように左下にCSSが表示されます。

CSSが表示される

どんな書き方をしてるのか、色は何を使ってるのかを見るだけでも勉強になります。

気になった色合いを見てみたり、フォントを調べるときなど結構使える場面があるよ

HTMLを見る

HTMLの階層も見ることができます。

HTMLの階層を見る

見たい階層の左側▶︎を押すと表示されます。

クラス名やidなどどういった階層でできているのか確認することができます。

ちなみにここではHTMLの変更もできます。

変更したいところをクリックすると変更できます。

[imgad]

デベロッパーツールでCSSを見る

先ほどのHTMLを例に出すと下の方にCSSが表示されます。

CSSが下に表示される

例では、文字のフォントやサイズを見ることができます。

よく見ると1つ1つ囲われているのですが、その1つ1つの右上を見てみると文字が書いてあると思います。

CSSの文字

ここでは、「overview.css:29」と表示されています。

つまり「overview.cssの29行目にこのCSSが書いてあるよ」ということを教えてくれています。

CSSを変更してみる

文字の色を変えてみたいと思います。

文字の色を変える

クリックすると書けるようになります。
今回はcolor:red;を入力しました。

文字が赤色になる

文字が赤色になればOKです。

ちなみにCSSの左側に書いてあるを押せば表示非表示になります。

デベロッパーツールでスマホサイズを確認

デベロッパーツールではスマホの表示も確認することができます。

スマホを表示する

検証を開いたら画像の通りにクリックしてください。

スマホを表示する

すると縦長(スマホサイズ)に表示されます。

様々なスマホ表示

赤枠で囲まれたところを選択するとiPhoneの種類からiPadまで色々な表示ができます。

スマホ横向き

スマホやiPadなどの横向きの表示を見てみたいと思ったら左上をクリックします。

WEB制作する上でレスポンシブは重要ですので活用していきましょう。

さいごに

WEB制作をする中でこれを知っているのと知らないとでは作業効率が違います。
最初はなれないかもしてませんが、どんどん使ってみてください。

人気記事フリーランス向けの求人サイトとサービス【全て無料】
人気記事WEB制作を独学するため勉強法とおすすめサービス・本【初心者向け】

あわせて読みたい記事