プログラミング初心者の方でHTML,CSSを使用し、何かサイトをコーディングしていると、
- 思う様に要素の配置ができない
- 中央揃えが上手くいかない
- ここの要素のmargin,paddingがどうなっているか確認したい
- 背景色を変えるとどんな雰囲気になるかテストしたい
この様な悩みが出てきて、なかなか上手くいかず何時間も悩み続けることが出てくるかと思います。
タイトルの下に大きな余白ができてしまってどうすれば消えるのー！
そんな時は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の検証ツールを使うとエラーが起こりにくく、コーディングがサクサう進むね！僕も早速使ってみよう！
いかがでしたでしょうか！
フロントエンジニアで検証ツールを使わない人はいないほど、プロでもアマチュアでも使うべき便利なツールです。
他のサイトのコードを見て勉強する際にも活躍するのでぜひ使って見てください！
最後までご覧いただきありがとうございました！
