GoogleのChromeではWebサイトをブラウザに表示するためのHTMLと、ページのデザインに必要なCSSをChromeのブラウザで検証ツールを使用して検証ができます。
ChromeでWebサイトのページを開きながら検証するHTMLでは要素(Elements)を移動して検証したり、要素の無効化、タグ・属性の追加などの検証。
CSSの検証ではセレクタ、プロパティ、値、ホバー状態を固定しての検証など、Chromeの検証でできることは多岐に渡りますが、私が毎日のようにChromeでHTMLとCSSの検証をしているときのやり方を元に説明します。
ChromeでHTMLとCSSの検証をするには
GoogleのブラウザChromeには「検証ツール」という機能があります。検証ツールは「開発者ツール」「デベロッパーツール 」などの言い方をしますが、どの言い方もWebサイトの検証をする目的が含まれています。
はじめにHTMLとCSSの検証に使用するChromeでの検証ツールの開き方と、開いたChromeの検証ツール画面の見方を説明します。それから、検証ツールをどのような使い方をすればいいのか、HTMLとCSSを検証するやり方を見出しごとに分けて説明します。
デベロッパーツールを開く
デベロッパーツール(検証ツール)をChromeブラウザで開いてHTMLとCSSを検証するときのやり方は、まず検証したいWebサイトのHTMLファイルをChromeで開きます。
Web上に公開されている好きなページで検証ツールを開くこともできます。
次にChromeブラウザに開いたページの画面で右クリックをしてメニュー(コンテキストメニュー)を開きます。
コンテキストメニューに「検証」の項目があるのでクリックすると、Chromeで検証ツールが開きます。
検証ツールをキーボードのショートカットで開く場合
- Mac Command+Option+I
- Windows Ctrl+Shift+I
検証ツールを開くときも閉じるときも上記のショートカットになります。
HTMLとCSSを検証する画面の操作と見方
Chromeに表示したデベロッパーツールでHTMLとCSSを検証する画面の操作と見方を説明します。
必ず覚えておきたいことは検証ツール画面の左上にあるアイコンについてです。「検証モード」を有効にする操作のアイコンです。
検証ツール画面左上のアイコンをクリックすることで「検証モード」が有効になります。
キーボードのショートカットで検証モードにする操作
- Mac Command+Shift+C
- Windows Ctrl+Shift+C
検証モードとは検証する要素をChromeのブラウザ画面から直接選択できる機能です。
検証モードにしてからChromeのブラウザに表示したWebページでマウスポインターを移動すると、ページの各要素がハイライトされます。HTMLとCSSの検証をする操作と共に実際のページを確認しながらの見方ができるので検証がしやすくなります。
次に検証モードを有効にしたままHTMLとCSSを検証するパネルの見方を把握します。
Elementsパネル
検証ツールの画面上部に「Elements」というパネル名が表示されています。
ElementsパネルではWebページのHTML構造を確認することができます。Elementsパネルの画面に表示しているHTML構造は、検証ツールと一緒にChromeで開いているWebページのHTMLソース(DOMツリー)です。
Elementsパネル内の各要素はキーボードの矢印キーで操作することができます。
ちなみにElementsは日本語にすると「要素」です。つまり検証するHTML要素ということですね。
Stylesタブ
CSSはChromeの検証ツール画面のStylesタブを使用します。
StylesタブではElementsパネル側で開いているWebページのHTML要素に適用されているCSSのプロパティ、セレクタ、値が表示されます。
またプロパティ、セレクタ、値がどの要素から受け継いでいるスタイルなのかも確認できますし、どのCSSファイルの何行目に記述しているスタイルなのかも分かるので検証がしやすいです。
ChromeでHTMLを検証するやり方
Chromeの検証ツールでHTMLを検証するときは、先述したElementsパネルを操作します。以下の5つの内容をHTMLを検証する具体的なやり方の例にして紹介します。
- HTMLの要素を移動して検証
- タグ・属性の変更や追加をして検証
- 要素を無効化して検証
- スマホ画面のときの検証
HTMLの要素を移動して検証
Chromeの検証ツールを検証モードにし、Elementsパネル内の検証したい要素の移動はキーボードの上下キーで移動できます。このとき親要素の開始タグ左に右矢印アイコンがあるタグは子要素を開閉することができます。
子要素を開閉するやり方は右矢印をクリックするか、またはキーボードの左右の矢印キーを使用します。
- 右矢印キーで子要素を開く
- 左矢印キーで子要素を閉じる
検証モードと上下左右キーの組み合わせなので、Elementsパネル側で要素を移動するたびにブラウザ側のWebページでは要素のハイライトが効率よくなるので検証するやり方がスムーズです。
要素間の矢印キー移動の他に要素をドラッグ&ドロップで移動して検証に活用できます。例えば上の画像のようにヘッダー下に配置してる画像をheader要素内のタイトルとメニューの間に移動してレイアウトを変更した検証をする場合。
Chromeの検証ツール画面「Elementsパネル」でheader要素の子要素を右矢印キーで開きます。
そしてheader要素下に配置している画像の親要素をマウスでheader内のタイトルとメニューの子要素の間にドラッグ&ドロップします。
するとWebページを表示してるChromeブラウザ画面では要素を移動したレイアウトのままHTMLの検証ができます。イメージとしては検証ツール内でブロックの組み合わせを移動して検証するやり方です。
検証した内容はChromeでリロードすれば元に戻ります。
要素を無効化して検証
Chromeの検証ツールでHTMLの検証をするときに「この要素を消したらどうなるかな？」のような検証をしたい場合には、Elementsパネルで要素を無効化するやり方ができます。
例えば先ほどヘッダーのタイトルとメニューの間に移動した画像を無効化するのを例にしたやり方です。
検証ツールのElementsパネルで無効化する要素を右クリックして表示するコンテキストメニュー内の「Delete element」をクリックします。
すると画像要素を無効化することができ非表示になったChromeのブラウザ側のWebページを検証できます。
検証した内容はChromeでリロードすれば元に戻ります。
タグ・属性の変更や追加
Chromeの検証ツールでHTMLのタグや属性を変更したり追加するやり方です。
HTMLの検証ができるElementsパネルでタグや属性の変更をしたい要素をダブルクリックします。
- タグを変更する場合はタグをダブルクリック
- 属性を変更するなら属性をダブルクリックです。
やり方としては簡単でいいのですが、小さい範囲なので操作を間違えやすい私としては、もう１つのやり方でHTMLのタグや属性を変更したり追加することが多いです。
例としてサイトのサブタイトルを追加するHTMLの検証にします。Elementsパネルでタグや属性の変更をしたい要素を右クリックします。
Edit as HTMLのコンテキストメニューがあるのでクリックします。
すると親要素と子要素を一緒に編集することが可能になるので、サブタイトルとしてspanタグを追加してテキストを加えると、変更した状態をブラウザのページで検証できます。
HTMLのタグや属性だけではなく、検証対象の要素全ての変更と追加がしやすいのでおすすめです。
スマホ画面のときの検証
Chromeの検証ツールではHTMLやCSSを検証するときに、ブラウザに表示したWebサイトのページをスマホ画面にして検証することができます。
スマホ画面にして検証するやり方は、検証ツールの画面左上にあるアイコンをクリックします。アイコンの場所としては検証モードにしたアイコンの右横です。
検証できるのは各スマホ端末ごとのWebページのレイアウトを縦横に切り替えて検証したり、デザインを検証したりなどができます。
たとえばiphoneXのレスポンシブレイアウトを検証するなど、いろいろと活用できます。
ChromeでCSSを検証するやり方
Chromeの検証ツールでCSSを検証するときは、Stylesタブを操作します。以下の4つの内容をCSSを検証する具体的なやり方の例にして紹介します。
- CSSのプロパティと値を変更して検証
- セレクタ、プロパティ、値を変更する検証
- ボックスモデルの検証
- 擬似クラスの状態を固定して検証
CSSのプロパティと値を変更して検証
Chromeの検証ツール画面でCSSの検証ができるStylesタブには、HTMLの検証をするElementsパネルのHTML構造に適用しているCSSが表示されます。
たとえばbody要素に適用されたCSSを確認したい場合のやり方ならElementsパネルでbody要素をクリックすると、Stylesタブでbody要素に適用しているCSSのプロパティと値が確認できます。
このときCSSのプロパティと値を変更して検証するやり方は、Stylesタブ内に表示したプロパティや値をダブルクリックします。
すると編集できるようになるのでプロパティや値を入力し直すだけです。
また適用しているCSSのプロパティと値をまとめて非表示にして検証したい場合には、プロパティ右横のオレンジのチェックボックスのチェックを外すとスタイルを無効化して検証できます。
CSSを検証するStylesタブのすぐ下に「element.style」というプロパティと値なしのセレクタがあります。
これはElementsパネルに表示する要素にインラインスタイルを適用してCSSの検証ができます。
やり方は検証したい要素をElements側で選択しておき、element.styleにマウスをあててみて、目的の要素がハイライトされれば、インラインスタイルでプロパティと値を適用できます。
セレクタ、プロパティ、値を追加する場合
Chromeの検証ツールでCSSの検証をするやり方として、セレクタ、プロパティ、値を追加した検証をする場合です。
Stylesのタブ名があるすぐ下のFilterの右横に視線を移動してみてください。＋のアイコンがあると思います。
この＋アイコンをクリックするとElementsパネル側で選択している要素のセレクタとしてCSSのプロパティと値を指定できるようになります。
この検証機能を活用してセレクタ、プロパティ、値を追加した検証をするやり方の例を紹介します。たとえばヘッダーメニューをホバーするとどんな感じになるか確認したいとき。
Elementsパネルでホバーする要素を選択しておき、Stylesタブの＋アイコンをクリックします。
ホバーする要素のセレクタになるので、セレクタに擬似クラス:hoverを追加記述して検証するホバー状態のプロパティと値を追加します。
するとWebページを表示しているChromeブラウザ側でホバーした要素にマウスをあてればホバー状態の検証が可能になります。
擬似クラスの状態を固定して検証する
CSSで擬似クラスは通常、選択された要素に対して特定の状態のときにスタイルが適用します。メニューボタンにマウスが乗ったら色が変わるとかです。
この時の特定の状態を検証のたびに毎回操作するのは面倒ですが、Chromeの検証ツールでは、CSSの擬似クラスの状態を固定して検証することができます。
CSSの擬似クラスの状態を固定して検証するやり方は、ホバーしている要素を例にすると、検証ツールのElementsパネル側でホバー要素を選択しておきStylesタブの:hovをクリックします。
:hovをクリックするとStylesタブでForce element stateというパネルが開きます。パネルの項目の中の:hoverにチェックを入れます。
すると検証ツールのStylesタブには要素に適用しているホバー要素のCSSが表示でき、Webページを表示してるChromeのブラウザ表示では、ホバーが固定された状態の表示になるので検証がしやすくなります。
検証後に擬似要素の固定した状態を解除するには、:hoverと:hovのチェックを外すことで解除できます。
CSSボックスモデルの検証
要素に適用しているCSSボックスモデルの検証をするやり方です。
コンテンツの縦(height)、横(width)のサイズと余白を形成するmargin、padding、そしてborderを含めたボックスモデルの状態を、Chromeの検証ツールでは分かりやすく表示してくれます。
検証ツールのStylesタブに要素に適用してるスタイルが表示していますが、スタイルの下にCSSボックスモデルの図があります。Chromeのブラウザ画面を小さくしている場合は下スクロールが必要かもしれません。
ボックスモデルの図にマウスをあてると、marginならmarginの余白だけをハイライトしてChromeに表示してるWebサイトのページで検証できます。
また値の数値にautoや%が指定している要素でも、Chromeの検証ツールと一緒に表示している現在のページ寸法で表示されます。
Computedタブに切り替えたCSSボックスモデルの検証のやり方もあります。ComputedタブはStylesタブの右横にあります。
上の画像のように検証中の要素のボックスモデルと、その要素に適用されているCSSを確認しながら検証できます。
Chromeの検証ツールで気をつけたいこと
最後にChromeの検証ツールを使用していて私が気づいたちょっとした気をつけたいことについてです。
ホントにちょっとしたことなのですが、Chromeの検証ツールを開いた状態のままMacでPCを閉じようとすると閉じないです。
寝る前にPCの電源落として部屋も暗いはずがいつまでも明るくて「んだよ！」ってなることに注意です。
私のMacだけだったらすいません。
