ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

【Chrome検証ツール使い方】初心者が抑えておくべき便利な4つの機能の使い方

ツール関連
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

プログラミング初心者の方でHTML,CSSを使用し、何かサイトをコーディングしていると、

  • 思う様に要素の配置ができない
  • 中央揃えが上手くいかない
  • ここの要素のmargin,paddingがどうなっているか確認したい
  • 背景色を変えるとどんな雰囲気になるかテストしたい

この様な悩みが出てきて、なかなか上手くいかず何時間も悩み続けることが出てくるかと思います。

ネコ君
ネコ君

タイトルの下に大きな余白ができてしまってどうすれば消えるのー!

Hiko
Hiko

そんな時はGoogle Chromeの検証ツール(ディベロッパーツール)を使うと直ぐに解決できますよ!

これからご紹介するGoogle Chromeの検証ツールは、初心者だけに限らずフロントエンジニアも必須で使うプログラミングには欠かせないツールです。

Chromeの検証ツールを使うと、どこが問題なのか見つけることができたり、スマホ版のサイトをコーディングする際に大活躍したりと、僕もサイトを作る際は常にディベロッパーツールを使っています!

Chrome検証ツールはJavascriptの開発にもよく使うツールで、機能がとても多く複雑な為、初心者の方はどの機能を使えばいいかわからないかと思います。

そこで今回は、初心者向けに検証ツールの基本的な使い方〜HTML,CSSコーディングの際によく使う機能4つを解説します!

こんな方にオススメ
  • HTML,CSSを使ったサイト作りに苦戦している方
  • Google Chrome検証ツールの使い方を知らない方
  • スマホデバイスに合ったサイト作りをしたい方

※HTML,CSSのみの解説となります。

スポンサーリンク

Chrome検証ツールでできること

  • 既存or製作中のサイトのコードが見れる
  • デザイン、レイアウトの変更テストができる
  • スマホやタブレットでの見え方を確認できる
  • 要素の余白(padding,margin)が一目で分かる(1番使う)

HTML,CSSを学習している人でよく使うディベロッパーツールの機能はこの4つです。

既存or製作中のサイトのコードが見れる

特定のサイトのheaderの部分がとてもおしゃれで、どんなソースコードになっているか気になる際に検証ツールを起動するとコードが見ることができます。

僕の場合はこの色を真似したい時や、フォントは何を使っているか見るときによく使用します。

デザイン、レイアウトの変更テストができる

この要素にflexを適用するとどんな風に配置されるかや、背景色を変えるとどんな雰囲気に変わるかテスト検証することができます。

スマホやタブレットでの見え方を確認できる

今やモバイルファーストの時代で、各スマホデバイスでの見え方も整える必要があります。検証ツールを使うと、iPhone Xやタブレットでの見え方、横画面にした際の見え方も確認することができます。

要素の余白(padding,margin)が一目で分かる

h2タグを使うと自動的にmarginが適用されたりして、思いもよらない場所に余白ができたりします。検証ツールを使うと要素ごとにmargin,paddingを色分けして表示してくれるので一目で確認できます。

ディベロッパーツールの起動方法

Chromeの検証ツールは何もインストールする必要はなく、 Chromeブラウザであれば使うことができます。(Safariでは使えません)

僕のポートフォリオサイトを例にディベロッパーツールの使い方を解説していきます。

右クリック(mac:Ctr+クリック)をすると、検証という項目が出てくるのでクリックします。

もしくは、右上のホームボタンを押し→その他のツール→ディベロッパーツールでも立ち上げることができます。

ショートカットキーが便利!

Mac:⌘+option+i

Windows:F12

検証ツールはを立ち上げるとこの様に画面の下か、右にコードがずらっと並んだのが出てきます。

検証ツールの位置が見にくい場合は×印隣の:を押せば検証ツールの表示位置を変更することができます。

スポンサーリンク

検証ツール画面の基本的な味方

検証ツールの味方はこの画像の通りです。

僕は検証ツールを下に配置して、画面を大きく見える様にしています。

HTML,CSSで作られたサイトだと基本的に使う項目は

  • ポインターに切り替え
  • デバイス毎の表示切り替え
  • Computedの適用されているCSS知覧表示

この3つをよく使用します。

左画面にサイトのHTMLコードが表示されて、適用されている全てのHTMLコードを見ることができます。

右画面にはCSSコードが表示されていて、HTML要素にどんなCSSが適用されているかや、CSSのテスト編集もここで行えます。

HTMLコードをみる&テスト編集

まず始めに特定のHTML要素にどんなコードが当てられているか確認します。

左端のカーソルのアイコンをクリックして、画面にカーソルを合わせると、要素がハイライト表示されます。さらにHTMLソースコードを見ると、どのコードが適用されているか確認することができます。

HTMLのテスト変更

では仮にPHPというh3タグの文字列h1タグのJavascriptの文字列テスト変更してみたいと思います。

始めにテスト変更したい場所までカーソルを持っていきクリック。

するとソースコードにクリックしたコードがハイライト表示されるので、そこをダブルクリック。

背景色が白に変わり編集できる様になるので、好きな文字列&タグにテスト編集してEnter。

すると、画面にJavascriptの文字が反映されているのが分かりますね!

ネコ君
ネコ君

divタグをspanに変えたり、<br>を付け加えてテスト編集ができるね!

▶︎を押すとHTMLタグを展開することができます。

CSSコードをみる&テスト編集

はず始めに左端のカーソルアイコンをクリックして、CSSを確認したい要素にカーソルを合わせてクリックします。

すると左画面にHTMLタグがハイライト表示されて、右画面にHTMLタグに適用されているCSSが表示されます。

CSSのテスト編集

ではCSSをテスト変更してみたいと思います。

始めにテスト変更したいCSSメソッドをクリック(例ではfont-sizeを編集します)

すると編集できる様になるので、好きな値を書きます(35pxから45pxに編集)

Enterを押して確定すると、文字が大きくなっているのが確認できます。

ネコ君
ネコ君

文字や画像の大きさを微調整する際に便利だね!

CSSを追加テストする

次に新しく要素にメソッドを追加す方法をご説明します。

最後の所をクリックすると、: ; が出てくるのでそこに適用させたいCSSを書いてEnterを押します。

例ではcolor:blue;とテスト追加してみました。

すると文字列が青になったのが確認できます。

ブラウザを再読み込みするとテスト変更した部分がリセットされます。

margin,paddingが一目で分かる

検証ツールを使用すると、初心者がつまずきがちなmargin,padding可視化することができるので、簡単に余白の調整ができる様になります。

ネコ君
ネコ君

前はmargin,paddingがどこに適用されているか分からなかったけど、ディベロッパーツールをを使うとすぐに解決できるね!

初心者の方はpadding:20px;やmargin30px;と言われてもどのくらいの幅の余白になるか、まだ感覚がつかめないかと思いますが、検証ツールを使い頻繁に幅を可視化することによって、padding:20px;はこれくらいの幅だな、と感覚的に分かる様になります。

各デバイスでの見え方を確認す

Chromeの検証ツールを使うとiPhoneXでの見え方やAndroid端末での見え方まで確認することができます。

ネコ君
ネコ君

モバイルファーストの時代だから各デバイスの見え方はしっかり確認する必要があるね!

左端のスマホのアイコンをクリックします。

すると画面が縦長になりスマホで見た際にどの様に表示されるか確認することができます。

さらに検証ツールでは様々なデバイス毎の見え方を確認することができます。

iPadやiPhoneX,GalaxyなどのAndroid端末の表示切替も可能なので、サイトを公開する際には全て確認して異常が無いか確認することができます。

例えばiPhone Xを選択すると上に画面の横幅と高さが表示されるので、375pxの横幅を参考に@mediaを使ってブレイクポイントを指定するべきpxも簡単に確認できます。

Chrome検証ツール使い方 まとめ

ネコ君
ネコ君

Chromeの検証ツールを使うとエラーが起こりにくく、コーディングがサクサう進むね!僕も早速使ってみよう!

いかがでしたでしょうか!

フロントエンジニアで検証ツールを使わない人はいないほど、プロでもアマチュアでも使うべき便利なツールです。

他のサイトのコードを見て勉強する際にも活躍するのでぜひ使って見てください!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ツール関連
HikoPro Blog

コメント

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