書籍、ビデオ、オンラインコースなど...ウェブ開発に便利なスキルの醸成方法は数多くあります。ブラウザにある要素の検証ツールも、これの一つに数えられます。言うなれば、手軽に使える学習ツールです。
「要素の検証」機能を使えば、ウェブサイトの内部構造を見ることができます。対象となるのは、HTMLやCSS、JavaScriptなどのフロントエンドのマークアップだけですが、開発者がどのようにウェブサイトを構築したかを正確に知ることができます。
この記事では「要素の検証」ツールの使い方と、関連する技術、特徴、機能をご紹介します。最初に「要素の検証」ツール自体の説明からです。
動画版でもこのコンテンツをご覧いただけます。
「要素の検証」ツールの基本
ウェブ黎明期には、ウェブサイトのコードを見るには「ソースの表示」という方法しかありませんでした。
このような状況は、CSS（Cascading Style Sheets）やJavaScriptが普及していなかった時代に見られたものです。Web制作者は、コンテンツやデザインなど、サイトのすべての要素にHTMLを使用していました。
ウェブが進化し、基盤となる技術が強力になってくると、より優れたツールを開発する必要が生じました。そこで、FirefoxのFirebugが、ウェブサイトのパフォーマンスや内部の動作を確認するためのソリューションとして登場しました。
その後、この機能はほとんどのブラウザに搭載されるようになりました。現在では、「要素の検証」ツールとして知られています。
これは、ウェブサイトの基本的な技術やコードを確認するための強力な手段です。ツールバーのメニューや、ページを右クリックしてオプションを選択したり、キーボードショートカットを使ったりと、複数の場所からアクセスできます。
「要素の検証」ツールは、ページのHTMLとCSSに主眼を置いていますが、それ以外にもさまざまなことができます。
「要素の検証」にあるパネルの中身
「要素の検証」ツールは、単にコードを表示するだけのものではありません。多くの場合、複数のパネルが存在します。
- 【インスペクタ/Inspector】これは、一部のブラウザではエレメント/要素と呼ばれています。「要素の検証」ツールのメイン画面で、ページのコードと、要素固有のCSSが表示されます。また、サイトの「グリッドシステム」などの情報も確認できます。
- 【コンソール/Console】サイトのフロントエンドの警告ログであり、コードスニペットを入力してアイデアを素早くテストすることもできます。
- 【ネットワーク/Network】ここには、すべてのPOSTおよびGETリクエストなど、サーバーとの間で行われるリクエストが表示されます。
- 【パフォーマンス/Performance】サイトのパフォーマンスは高くなければなりません。そのため、重要な指標を測定するための専用ツールがあります。この機能については、ブラウザ間で性能の違いがあります。
- 【メモリ/Memory】このパネルでは、サイトがメモリをどのように使用しているかを見ることができます。また、一部のブラウザでは広範な指標も確認可能です。
- 【アプリケーション/Application】このパネルでは、サイトのキャッシュやバックグラウンドサービスなど、さまざまな情報を確認することができます。
さらに、パネルの追加も可能です。
「Media」のようなシンプルなパネルもあれば、「JavaScript Profiler」や「Performance monitor」のような複雑なパネルもあります。一言で言えば、「要素の検証」ツールという名前では謙虚すぎるほどです。実際の機能は非常に奥深く、ウェブ開発者のワークフローの中心となるべき存在でしょう。
「要素の検証」を使うべき理由
「要素の検証」ツールは、開発時にこれさえあれば間違いないと言っても過言ではないソリューションです。その理由については、本記事の残りの部分で技術的な詳細を交えてご説明します。その前に、「要素の検証」ツールを使用する理由についてお話しましょう。
このツールが多くの人に活用されている理由はいくつかあります。
- 他のサイトを見て、自分のサイトを作るためのヒントを得られる
- 他のサイトや開発者がどのようにして特定の技術を実現しているかを知ることができる
- 自分のサイトで（実際に改変することなく）テストができる
- ほとんどの場合、サイトをデバッグする機能がある
- 問題となっているサイトの状況を詳しく知ることができる
つまり、ウェブ制作を学ぶには、ウェブサイトの良い例を見て、その特徴を知ることが大切なのです。
「要素の検証」ツールでは、サイトで使用されているHTMLやCSSを正確にチェックすることができるので、その要素やテクニックを自分のサイトに反映させる上での大きな手がかりとなります。
ブラウザの「要素の検証」ツールはどこにあるのか
「要素の検証」ツールは簡単に見つけられます。ほとんどの場合、ページを右クリックして、「検証」または「要素の検証」を選択するだけです。
デフォルトでは、分割したウィンドウが現れます。多くの場合、右側に表示されます。しかし、これを自分の好みに合わせてカスタマイズすることができ、ツールを別ウィンドウで開くこともできます。
ブラウザのツールバーやキーボードショートカットからも「要素の検証」が開けます。具体的な方法は、ブラウザによって異なります。例えば、Firefoxでは、「ツール」＞「ブラウザツール」メニューの中にWeb開発者ツールがあります。一方、Brave（およびその他のChromiumベースのブラウザ）では、「表示」＞「開発」メニューにあります。
キーボードショートカットは、大体似通っています。「Command + Shift + C（WindowsではControl + Shift + C）」です。このショートカットを使えば、作業に必要なツールをすぐに呼び出すことができます。
これまで「要素の検証」ツールを開いたことがない場合は、先に述べたように、メニューの右側に表示されていることが多いです。これを変更するには、「要素の検証」ツールバーにある三点リーダー（縦）メニューをクリックします。ここで、ドックの表示される側を切り替えることができます。
なお、Firefoxはデフォルトで「トリプルペイン」表示を採用しており、「要素の検証」ツールで多くの情報を確認できるようになっています。
さて、ツールを開いたところで、そのツールで何ができるのかを見てみましょう。次はこれについて説明します。
「要素の検証」ツールの利用シーン3選
ここまで、「要素の検証」ツールの使い方をいくつかご紹介してきましたが、具体的な使用例もいくつか見てみましょう。
1. ウェブページの特定の要素を探す
「要素の検証」ツールの主な目的は、その名のとおり、ウェブサイトの要素を検証することです。これを使うには、対象のウェブページにアクセスして、開発ツールを開きます。
パネルが開いたら、対象の要素のセレクタである矢印をクリックします。
ここで、ページ上の任意の要素にカーソルを合わせると、「Inspector/Elements」ウィンドウでその要素が強調表示されます。
このように使い方は簡単です。これこそが、「要素の検証」ツールがウェブ開発者の間で非常に人気がある理由のひとつです。
2. デバイス、ディスプレイ、ブラウザのエミュレート
「要素の検証」は、一種のデバイスエミュレーターとしても機能します。つまり、ウェブサイトが特定のデバイスでどのように見えるかを確認することができます。選択できるデバイスは数多くあります。
このエミュレーターは、モバイルファースト戦略やレスポンシブデザインが正常に機能しているかを確認するのに便利です。200台ものデバイスを机の上に置いておくよりも費用対効果が高く有用です。
デバイスエミュレーション機能は、「要素の検証」パネルに位置する小さなアイコンを押すことで利用できます。
このアイコンをクリックすると、選択したデバイス上でのあなたのサイトの見え方が表示されます。
これについては後で詳しく説明しますが、デバイス間でデザインを統一するのに非常に便利です。
3. ウェブページのパフォーマンスを把握する
「要素の検証」ツールの「Performance」パネルでは、ウェブサイトの速度や性能を診断することができます。
この機能では、特定の要素やスクリプトの読み込み時間が「記録」されます。Chromiumベースのブラウザでは、豊富な情報が確認できます。読み込み中のページが記録され、その結果がタイムライン形式で表示されます。
これを使って、特定のページのパフォーマンスが一定のレベルに達しているかを確認できます。そこから、Google PageSpeed InsightsやLighthouseなどのツールを使って、サイトの性能をさらに向上させることもできます。Chromiumベースのブラウザには、Lighthouseのレポート生成機能が組み込まれています。
また、他のタブではパフォーマンステストの要約を見ることができます。例えば、コールツリー、全体の概要、イベントログ等です。
このツールだけで、自分のウェブサイトのパフォーマンスや機能の大部分を診断可能です。実際の仕組みについては、次の項目で説明します。
「要素の検証」ツールの使い方とポイント
「要素の検証」ツールが、一見しただけではわからないほど強力であることは、すでにお話ししたとおりです。続いては、その機能を最大限に活用するためのコツやヒントを、基本的なところから見ていきましょう。
1. 要素のプロパティ、値、および状態の変更
ここまでは、「要素の検証」ツールを使ってサイトに一時的な変更を加えるという概念に触れただけでした。以下では、その方法をさらに詳しく説明します。
手順は簡単です。まず、矢印のアイコンを使って、要素を選びます。各要素の上にカーソルを置くと、その要素に対応するオーバーレイが表示されます。
対象の要素を選択したら、要素パネル内のタグがあるほぼすべてのコードをダブルクリックして、編集できます。例えば、Kinstaホームページ上部に大々的に表示されているテキストを別のものに変更したいとします。
また、HTMLと同じようにCSSを扱うこともできます。例えば、KinstaのホームページにあるCTA（コール・トゥ・アクション）ボタンを見てみましょう。
ポインターでボタンを選択すると、そのボタンに関連するCSSが右側の「Styles」パネルに表示されます。
HTMLの場合と同様に、値を変更したり、CSSを追加したりできます。
ボタンのような要素では、特定の状態を編集したいこともあるかもしれません。この例では、「:hover」の状態を変更できます。これを行うには、スタイルパネルの「:hov」をクリックします。これを選択すると、要素の状態が一覧で表示されます。その中から表示したいものを選択します。
すると（実際にユーザーとしてその操作をしなくても）ウェブページの特定の状態が表示されます。ここでは、デフォルトのボタンの状態と区別できるよう、ホバー時の色を変えています。
画像のURLを取得して、他のものと入れ替えることもできます。Kinstaのトップページでは、MyKinstaのスクリーンショットを表示しています。
その要素を探し出し、画像のソースURLを変更することで、他の画像を試してみることができます。
ここでの変更は永久的なものではありませんので、ページを更新することで元に戻ります。または、HTMLとCSSをエディタにコピーして、コードに組み込むことで変更を保存することもできます。
2. 特定の要素を探す
要素に手を加える前に、その要素を見つけなければなりません。「要素の検証」ツールには使い勝手の良い検索機能があり、ウェブページ内のあらゆるものを見つけることができます。
具体的には、以下の通りです。Chromiumベースのブラウザでの「公式」な方法では、ページの右側にある三点リーダー（縦）メニューから「Search」を選択します。
これを使うと、コンソールパネルが開き、「Search」タブが表示されます。ここで、テキストボックスに目的のタグを入力すると、ページ上の関連する要素の一覧が表示されます。
なお、他のブラウザでは、この機能が別の場所に位置していることもあります。例えば、Firefoxでは、「Inspector」パネルの上部に検索ボックスが用意されています。
もうひとつ、簡単なヒントをご紹介しましょう。「Elements」ペイン内で右クリックし、「Expand recursively」を選択することで、様々なノードや要素の展開を行うことができます。
「Styles」パネルには、「Filter」というテキストボックスがあります。このテキストボックスを使って、CSSプロパティのフィルタリングができ、グローバル検索機能との相性が抜群です。
2つのフィルターと検索機能により、必要なものを見つけるのは、決して難しいことではありません。
3. ボックスモデルの基礎知識
「要素の検証」ツールでは、CSSプロパティが要素にどのように作用するかを知るために、視覚的な「ボックスモデル」パネルを使用できます。
この概要からは、特定のボックス（「element」や「div」など）が画面上でどのように表示されるかがわかります。言い換えれば、マージン、パディング、ボーダー、コンテンツがどのように組み合わされて、画面に表示されるのかを概観するものです。
CSSボックスモデルの全体像と、それがウェブページのHTMLとどのように相互作用するかについては、今回のテーマの範囲を超えるため省略します。ちなみにこの概念を詳細に解説したMozillaの素晴らしい記事が公開されています。
「Box Model」パネルは、「要素の検証」ツールの右側のペイン内、「Layout」や「Computed」セクションにあることが多いです。
他の要素やプロパティと同様に、特定のボックスの値や設定を変更することもできます。また、ボックスの位置を決めたり、z-indexを設定したり、floatやdisplayの設定を適用したりするためのプロパティも用意されています。
ボックスモデルを使って作業をすると、ページ上でのグリッドシステムの動きを確認することができます。「Layout」パネルを見てみましょう。「Grid」メニュー下にあります。
希望の表示設定、オーバーレイを選択すると、画面上に表示されます。ボックスモデルを使ってサイトの要素を操作することで、より正確な判断が可能になります。
4. 「要素の検証」によるデバイスのエミュレーション
今ではバズワードから辞書に載る一般用語へと変化した「レスポンシブ」と「モバイルフレンドリー」は、ウェブ開発の重要なポイントです。要素検証ツールには、これに関する機能がいくつかあります。
ほとんどのブラウザでは、「要素の検証」ツールの上部にあるメニューバーにモバイルデバイスのアイコンが表示されます。
しかし、Safariは違います。「Develop」メニューから「Enter/Exit Responsive Design Mode」をクリックして操作できます。
どちらの方法であれ、このオプションを選択すると、ウェブページがあたかも小さな端末で見ているかのように表示されます。
Safariでは、選択できるのはApple製のデバイスのみですが、他のブラウザでは、モバイルファーストの原則に基づいてデザインするために必要なツールが用意されています。例えば、ビューポートの方向を選択したり、どのデバイスをエミュレートするかを選択したりできます。
他にも2つの興味深い機能があります。まず、エミュレートしたネットワークの速度を選択できます。これはSafariにはなく、Chromiumベースのブラウザでは、ネットワークスロットルの選択肢は限られています。
この点では、Firefoxが最も優れており、ネットワークの選択肢が充実しています。
最後に、触覚フィードバックとセンサー認識もシミュレートできます。これは、Chromiumベースのブラウザではデフォルトでオンになっており、Firefoxでは手動でオンにする必要があります。
Firefoxはこの点で劣っており、ChromeやBraveなどでは、カーソルが小さな「指先のような」オーバーレイとして表示されます。この機能は、どのブラウザでも完璧というわけではありません。ただし、他のデバイスでサイトがどのように動作するかを判断するのに使える、頼りになる機能です。
こういったテストは、多くのウェブ開発者にとって、往々にして見過ごされがちです。しかし、ブラウザがこのような包括的なソリューションを搭載している今、実施しない手はありません。
5. 「要素の検証」ツールのキーボードショートカット
キーボードショートカットは、どのブラウザでも大抵同じです。サイトをテストするのに様々なツールを使い分けている方には朗報です。
ここでは、最も人気の（そして便利な）ショートカットをご紹介します。
| 「要素の検証」ツールを開く | Mac＝「Command + Shift + C」、Windows＝「Control + Shift + C」 |
| ノード間を移動 | 上下の矢印 |
| 選択したノードを展開 | 右矢印 |
| 選択したノードを折りたたむ | 左矢印 |
| 再帰的にノードを展開、折りたたむ | Mac＝「Option + Click」、Windows＝「Alt + Click」 |
| ノード内を移動してアトリビュートを操作 | EnterまたはReturn |
| ノードのアトリビュートを順に進む | Tab |
| ノードのアトリビュートを逆に進む | Shift + Tab |
| 選択したノードの表示/非表示 | H |
| HTMLとしてのノードの編集/停止 | F2 |
| CSSプロパティが選択されている時に、値を1つ増やす | 上矢印 |
| CSSプロパティが選択されている時に、値を1つ減らす | 下矢印 |
| CSSプロパティが選択されている時に、値を10ずつ増やす | Shift + 上矢印 |
| CSSプロパティが選択されている時に、値を10ずつ減らす | Shift + 下矢印 |
| CSSプロパティが選択されている時に、値を0.1ずつ増やす | Mac＝「Option + 上矢印」、Windows＝「Alt + 上矢印」 |
| CSSプロパティが選択されている時に、値を0.1ずつ減らす | Mac＝「Option + 下矢印」、Windows＝「Alt + 下矢印」 |
もちろん、これ以外にもたくさんのショートカットがあります。MozillaはFirefoxについての情報豊富なドキュメントを用意していますし、Chrome、Brave、Edgeなどでもショートカットが公開されています。Appleはと言うと、ヘルプページには、Safariの開発者向けショートカットが掲載されていないため、少し不便です。代わりに、Safariの開発者ツールの公式ドキュメントを読むことをお勧めします。
まとめ
ウェブ開発に必要なのはもはやHTMLだけではありません。さまざまな技術が関わっています。HTML、CSS、JavaScriptを駆使するだけでなく、それらをどのように組み合わせてウェブサイトが構築されているのかを理解する必要があります。
ブラウザの「要素の検証」ツールは、ウェブサイトの中身を覗き、その仕組みを詳細に確認するのに便利です。勉強になるだけでなく、サイトを試験的に変更したり、さまざまなデバイスやモバイルネットワークでの挙動を確認したりするのにも使えます。
「要素の検証」ツールを普段からお使いですか？お気に入りの機能は何ですか？コメント欄でご意見をお聞かせください。
コメントを残す