Web制作に必須!Chromeの検証機能の便利な使い方を紹介

Web制作

 

Web制作をやる上で、おそらくもっとも必須になるツールがChromeの検証機能です。

ただ、この検証機能は結構機能が多く、初心者の方は使い方がわからないと思います。

 

そこで今回は、初心者が押さえておくべき二つの機能について紹介します。

 

Chromeの検証とは?

Chromeの検証とは、サイトのソースコードを確認する機能です。

言葉じゃわかりづらいので、実際に例を見てみましょう。

 

今回はYahoo Japanを例に説明します。

 

まずは適当なところで右クリック。すると、検証という項目があります。

 

ここをクリックすると、右側にHTMLコードかかれたバーが出てきます。

 

HTMLタグをクリックすると、CSSコードが表示されます。

 

これで、サイトに使われているHTML/CSSコードが簡単に確認できます。

 

それでは、ここから便利な機能を紹介します。

 

選択機能

選択機能とは、サイトの選択した部分のCSSがすぐ見れる機能です。

 

まず、右上の四角にカーソルが乗っているアイコンをクリックします。

 

次に、CSSコードを確認したい場所にマウスを持っていきます。

 

右側に、指定した場所のCSSが一発で表示されました。

 

特にランディングページを作成しているときは、分量が多く見たいコードの場所を探すのが大変です。

選択機能を見て効率よくCSSを確認しましょう。

 

コード修正

次に紹介するのが、検証上でHTML/CSSコードを修正して確認できる機能です。

検証状で修正しても保存されないので、サイトを更新したら元どおりになります。

 

実際の使い方を見ていきましょう。

 

まずは適当にHTMLのタグをダブルクリックします

 

idをいじれるようになったので、試しに消してみます。

classが消えて、サイトのレイアウトが変わりました。

 

 

次に、CSSを開いて見ましょう。

 

CSSコードの隣にチェックマークがあるので、試しに外してみます。

 

このように、チェックを外した部分のCSSが無効になりました。

 

もう一つが、コードの修正です。

先ほどと同様に、CSSを開きます。

 

marginの部分をクリックしてみましょう。

 

値が変更できるので、適当にいじってみます。

今回はmargin: 100px 200px;としてみましょう。

 

HTMLに適用されました。

 

この機能は、marginのような値だけでなく、colorやdisplay要素なんかも変更できます。

 

当然ですが、一時的に形を変えてるだけなので内容は保存されません

実際に変更したい場合は、HTML/CSSファイルを編集しましょう。

 

個人的に、検証の中で最も使う機能です。必ず覚えておきましょう。

 

 

レスポンシブ確認

最後は、レスポンシブを手軽に確認する機能です。

レスポンシブ対応のサイトを作るときはこれを覚えておくだけで、めちゃめちゃ効率化できます。

 

検証の上にある、スマホっぽいアイコンをクリックします。

 

クリックすると、サイトの上部にレスポンシブメニューが開かれます。

Responsiveという部分をクリックしてみましょう。

 

クリックすると、タブレット/スマホの端末リストが表示されます。

これらを選択すると、端末に対応したサイズに画面が縮小します。

 

もっと手軽に確認する方法が、レスポンシブバーです。

検証の上のグレー部分にマウスを載せると、デバイスサイズが表示されます。

 

ここをクリックすると、対応したサイズに拡大/縮小されます。

 

一般的なラップトップ、タブレット、スマートフォンサイズにすぐ変更できるので、手動で縮める必要なくなります。

 

レスポンシブサイトを作るときは、このバーを用いるとかなり効率化できます。

 

まとめ

初心者の方は、

・選択

・修正

・レスポンシブ

この三つだけ押さえておけばとりあえずOKです。

 

プログラミングスキルが上達して、検証を楽々使いこなせるようになったら新たな機能に挑戦しましょう٩( ‘ω’ )و