プログラミングを学習していると、コーディングの結果が思い通りにならずに困ってしまうことがよくあります。そんな時は、検証ツールを使ってみましょう。検証ツールを使えば、簡単にWebページのHTMLとCSSを確認することができます。エラーが発生している部分がすぐにわかるので、コーディングの効率化を図れます。この記事では、検証ツールの使い方を解説します。Web制作に必要な、要素とスタイルの確認、余白の確認方法などを解説しますので、ぜひ参考にしてください。
目次
検証ツールとは
検証ツールとは、WebページのHTMLやCSSを確認できるツールで、Web制作には欠かせません。検証ツールを使用することで、エラーの原因をすぐに発見できるので、作業効率を上げることができます。
なお、検証ツールを起動している状態のことを「デベロッパーモード」と呼ぶこともあります。
検証ツールでは、以下のことが可能です。
- WebページのHTML・CSSを確認・編集
- レイアウト崩れの原因の確認
- 余白の確認
- モバイル・タブレット表示の確認
それでは、検証ツールを起動してみましょう。
コードを確認したいページをブラウザで開き、右クリックします。すると、出現したウィンドウの1番下に「検証」というテキストが表示されます。下の画像の赤枠で示した部分です。この「検証」というテキストをクリックすることで検証ツールを起動できます。
検証ツールを起動すると、下の画像のような画面になります。
HTML、CSSを確認する
表示しているページのHTMLを確認するには、検証ツール上部の「要素」パネルを確認します。
検証ツールの左上の矢印をクリックすると、「検証モード」に切り替えることができます。この状態のまま、要素にカーソルを合わせてみましょう。
ブラウザ側の画面には、カーソルを合わせている部分が青色で表示されました。吹き出しのようなウィンドウにクラス名が表示されています。検証ツールの画面には、カーソルが合っているHTMLタグが灰色で示されています。
カーソルを合わせた要素をクリックすると、要素パネルのタグに青いハイライトがかかります。
検証モードは要素をクリックすると終了してしまいます。要素をクリックするたびに検証モードが終了するのは不便なので、簡単に検証モードに切り替える方法を知っておきましょう。
要素にカーソルを合わせた状態で右クリックし、「検証」というテキストをクリックすることでも検証モードに切り替わります。
要素パネルから要素を指定することも可能です。検証ツール側の画面で要素をクリックすると、ブラウザのどの部分に要素が表示されているのかを確認することができます。
要素パネルを使えば、テキスト部分やクラス名、id名などを書き換えることができます。クラス名や属性の部分をダブルクリックしてみましょう。
ダブルクリックした部分に入力欄が出現しました。ここに任意のクラス名やid名を入力すると書き換えが行えます。さらに属性を追加したり、削除したりすることも可能です。
ただし、検証ツールで行った編集は仮のものであり、実際にコードが変更されるわけではありません。ページをリロードすると、元の表示に戻ります。
続いて検証ツールでCSSを確認・変更する方法を解説します。検証ツールでCSSを確認するには、「スタイル」パネルを確認します。「スタイル」パネルは、下の画像の赤枠で示した部分です。
HTMLで行った作業と同様、矢印をクリックします。
検証モードでブラウザの要素をクリックすると、その要素にどんなスタイルが当たっているのかを確認することができます。
下の画像は、「ZeroPlus Media>キャリア>…」のテキストをクリックしたときの表示です。スタイルパネルにスタイルが表示されています。
スタイルパネルでは、CSSのスタイルを追加したり変更したりすることも可能です。プロパティや値をダブルクリックすると、入力欄が出現します。ここに任意のプロパティや値を入力するとスタイルを変更できます。
検証ツールで余白を確認する
検証ツールを使えば、余白を確認することも可能です。
要素にカーソルを合わせたとき、要素の部分は青色、外側の余白（margin）はオレンジ色、内側の余白（padding）は緑色で表示されます。
検証ツールでモバイル・タブレット表示を確認する
検証ツールを使用することで、モバイル表示やタブレット表示を確認することができます。赤枠の部分に注目してください。
ブラウザ画面の上部に「Dimensions: iPhone SE」というテキストがあります。このテキストをクリックすると、iPhoneやiPad、Ssurfaceなど主要なデバイスの画面幅に表示を変更できます。
また、表示中のデバイスのテキストの隣にある数字は、横幅×縦幅の数値です。任意の数値で横幅を設定したいときは、こちらを使いましょう。
この機能は、レスポンシブ対応（画面幅に応じて適切なレイアウトを作成すること）を行うときに必要となります。レスポンシブ対応は、Web制作に必須のスキルです。検証ツールを使うことで表示状態の確認ができるようにしておきましょう。
チェックテスト
チェックテストを確認する
下記サイトの検証ツールを開き、表示をモバイル表示にし、「「Enjoy Tech!」はこんな方におすすめのスクールです」の画像にカーソルをあてた状態をスクリーンショットで撮影し、discordで共有ください。
