プログラミングを学習していると、コーディングの結果が思い通りにならずに困ってしまうことがよくあります。そんな時は、検証ツールを使ってみましょう。
検証ツールを使えば、簡単にWebページのHTMLとCSSを確認することができます。エラーが発生している部分がすぐにわかるので、コーディングの効率化を図れます。
この記事では、検証ツールの使い方を解説します。Web制作に必要な、要素とスタイルの確認、余白の確認方法などを解説しますので、ぜひ参考にしてください。
- 検証ツール（デベロッパーモード）とは
- 検証ツールでできること
- 検証ツールの起動方法
- 検証ツールの言語設定
- 検証ツールの使い方
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
検証ツール（デベロッパーモード）とは
検証ツールとは、WebページのHTMLやCSSを確認できるツールで、Web制作には欠かせません。検証ツールを使用することで、エラーの原因をすぐに発見できるので、作業効率を上げることができます。
なお、検証ツールを起動している状態のことを「デベロッパーモード」と呼ぶこともあります。
検証ツールでできること
検証ツールでは、以下のことが可能です。
- WebページのHTML・CSSを確認・編集
- レイアウト崩れの原因の確認
- 余白の確認
- モバイル・タブレット表示の確認
検証ツールの起動方法
検証ツールを起動してみましょう。
コードを確認したいページをブラウザで開き、右クリックします。すると、出現したウィンドウの1番下に「検証」というテキストが表示されます。下の画像の赤枠で示した部分です。
この「検証」というテキストをクリックすることで検証ツールを起動できます。
検証ツールの起動はショートカットキーでも可能です。
検証ツールを開くショートカットキー
Macの場合は ⌘ (Command) + Opt + I
Windowsの場合は Ctrl + Shift + I
検証ツールを起動すると、下の画像のような画面になります。
これで検証ツールの起動は完了です。
検証ツールの言語設定
検証ツールは、初期設定だと英語で表示されます。英語だとわかりづらい方は、言語設定を日本語に設定しましょう。
言語設定の方法は以下の通りです。
検証ツールの右上、赤枠で示した部分の歯車マークをクリックしてください。
すると、下の画像のように表示されます。赤枠内の部分をクリックしてみましょう。
下の画像のように、各国の言語が表示されました。Japanese-日本語をクリックし、右上の×マークをクリックします。
すると、検証ツールの上部にiマークと英語のテキストが表示されます。Reload DevToolsというボタンをクリックすることで、言語設定の変更が適用されます。
これで、日本語設定は完了です。
検証ツールの表示位置を変更する
検証ツールの表示位置は自由に変えることができます。検証ツールの表示位置を変更したい場合は、右上にある3点リーダー（…）をクリックしましょう。下の画像の右上、赤枠で示した部分に注目してください。
すると、下の画像のようなウィンドウが表示されます。
「固定サイド」という部分のアイコンをクリックすることで、検証ツールの表示位置を右側・左側・下側・新しいウィンドウから選択できます。
右側表示
左側表示
下側表示
新しいウィンドウで表示
自分が見やすい位置に設定しましょう。
検証ツールの使い方
検証ツールでHTMLを確認・変更する
表示しているページのHTMLを確認するには、検証ツール上部の「要素」パネルを確認します。
検証ツールの左上の矢印をクリックすると、「検証モード」に切り替えることができます。この状態のまま、要素にカーソルを合わせてみましょう。
ブラウザ側の画面には、カーソルを合わせている部分が青色で表示されました。吹き出しのようなウィンドウにクラス名が表示されています。検証ツールの画面には、カーソルが合っているHTMLタグが灰色で示されています。
カーソルを合わせた要素をクリックすると、要素パネルのタグに青いハイライトがかかります。
検証モードは要素をクリックすると終了してしまいます。要素をクリックするたびに検証モードが終了するのは不便なので、簡単に検証モードに切り替える方法を知っておきましょう。
要素にカーソルを合わせた状態で右クリックし、「検証」というテキストをクリックすることでも検証モードに切り替わります。
要素パネルから要素を指定することも可能です。検証ツール側の画面で要素をクリックすると、ブラウザのどの部分に要素が表示されているのかを確認することができます。
要素パネルを使えば、テキスト部分やクラス名、id名などを書き換えることができます。クラス名や属性の部分をダブルクリックしてみましょう。
ダブルクリックした部分に入力欄が出現しました。ここに任意のクラス名やid名を入力すると書き換えが行えます。さらに属性を追加したり、削除したりすることも可能です。
ただし、検証ツールで行った編集は仮のものであり、実際にコードが変更されるわけではありません。ページをリロードすると、元の表示に戻ります。
検証ツールでCSSを確認・変更する
検証ツールでCSSを確認するには、「スタイル」パネルを確認します。「スタイル」パネルは、下の画像の赤枠で示した部分です。
HTMLで行った作業と同様、矢印をクリックします。
検証モードでブラウザの要素をクリックすると、その要素にどんなスタイルが当たっているのかを確認することができます。
下の画像は、「ZeroPlus Media>キャリア>...」のテキストをクリックしたときの表示です。スタイルパネルにスタイルが表示されています。
スタイルパネルでは、CSSのスタイルを追加したり変更したりすることも可能です。プロパティや値をダブルクリックすると、入力欄が出現します。ここに任意のプロパティや値を入力するとスタイルを変更できます。
スタイルパネルに表示されているクラス名の左にチェックボックスがあります。このチェックボックスのチェックを外すと、スタイルを外すことができます。
スタイルの変更も、HTMLの書き換えと同様にリロードで元に戻ります。
検証ツールで余白を確認する
検証ツールを使えば、余白を確認することも可能です。
要素にカーソルを合わせたとき、要素の部分は青色、外側の余白（margin）はオレンジ色、内側の余白（padding）は緑色で表示されます。
marginとpaddingの違いは、初心者にとっては難解な部分です。検証ツールを上手に使うことで、理解しやすくなるでしょう。marginとpaddingについては、こちらの記事でより詳しく解説しています。ぜひ参考にしてください。
検証ツールでモバイル・タブレット表示を確認する
検証ツールを使用することで、モバイル表示やタブレット表示を確認することができます。
赤枠の部分に注目してください。
ブラウザ画面の上部に「Dimensions: iPhone SE」というテキストがあります。このテキストをクリックすると、iPhoneやiPad、Ssurfaceなど主要なデバイスの画面幅に表示を変更できます。
また、表示中のデバイスのテキストの隣にある数字は、横幅×縦幅の数値です。任意の数値で横幅を設定したいときは、こちらを使いましょう。
この機能は、レスポンシブ対応（画面幅に応じて適切なレイアウトを作成すること）を行うときに必要となります。レスポンシブ対応は、Web制作に必須のスキルです。検証ツールを使うことで表示状態の確認ができるようにしておきましょう。
スタイルをレスポンシブ対応させるには、「メディアクエリ」という記述が必要です。メディアクエリの書き方はこちらの記事で詳しく解説しております。学習時の参考にしてください。
まとめ
検証ツールは、Web制作を行うなら欠かせないツールです。要素が表示されない時の記述の確認や、レスポンシブ対応を行う時の表示確認に役立ちます。
検証ツールを使うことでエラーの解消がすばやくでき、コーディングの効率が上がります。Web制作者としてレベルアップするためにも、検証ツールを使いこなしていきましょう。
Web制作を効率よく学ぶには？
Web制作では、デザインやコーディング以外に多くのスキルが必要です。しかし、勉強を始めたばかりの方はどんなスキルが必要なのかわからない場合も多いのではないでしょか。
Web制作の初学者を脱するために必要なスキルをこちらの記事で解説しております。
効率よくWeb制作を学習したい方は、ぜひお読みください！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
