HTMLとCSSを書くMacユーザー向け Chrome DevToolsの使い方

この記事の概要

HTMLとCSSを書くMacユーザーのためのVisual Studio Codeの使い方の記事です。

Chrome DevToolsは非常に多機能なため、単に「便利な使い方を記事にしました」だと際限なく書けてしまいます。
そのため、今回はタイトルにあるような属性の人に絞ってまとめました。

起動方法

option + command + I または F12を押すと起動できます。
起動すると次のように画面が変化します。

起動前	起動後

HTML

HTMLの選択

パネルのElementsタブからHTMLが見れます。

以下の3つの方法で確認することが多いでしょう。

1. 手動で要素を展開して確認する
2. Select an element in the page to inspect itから要素を選択して確認する
3. 検索してヒットした要素を確認する

手動で要素を展開して確認する

次の動画では「ヘッダー内のロゴのスタイルを見たい」という想定で操作しています。

マークアップの階層を理解していて、かつネストが浅い箇所の確認をする場合はこの方法が早いです。

Select an element in the page to inspect itで要素を選択して確認する

次の画像の、緑色の枠で囲った部分をクリックすると使えます。
ショートカットは command + shift + Cです。

一度クリックするとマークが青くなり、その状態でブラウザ内の要素にカーソルをあわせます。
およそのあたりをつけたら、実際に見たいタグをElementsパネル内で探します。

視覚的にはどこにあるか分かっているけど、コードとしてどこにあるかが分からないときにはこの方法が良いです。

検索してヒットした要素を確認する

Elementsパネルを一度クリックした上で、command + Fを押すと検索窓が開きます。
検索したい文字列を入力して、矢印ボタンを押すと次/前の候補にジャンプします。¹

次の動画では「navigationという文字列を含む要素を検索している」という想定で操作しています。

クラス名などは分かっているけど、それがどの要素を指しているか分からないときにはこの方法が良いです。

HTMLの確認

前の章のやり方で目当ての要素を選択できたとします。
今回はページ下部の表を選択したとします。

1. Elementsパネルでハイライトが当たっている部分が該当するコード
   • 以下のようなものが分かる
     • タグ
     • クラス
     • その他の属性（aria-labelやdisabledなど）
2. 青、緑、オレンジにハイライトされているのが幅や高さ、余白
   • 青：要素自体の幅と高さ
   • 緑：padding
   • オレンジ：margin

HTMLの編集

2つのやり方があります。

1. Elementsパネル内でHTMLを編集する
2. document.designModeをonにしてブラウザ内で直接編集する

Elementsパネル内でHTMLを編集する

Elementsパネル内でダブルクリックをして、内容を書き換えます。
動画ではタイトルの文字列を編集していますが、クラス名なども書き換えられます。

document.designModeをonにしてブラウザ内で直接編集する

Elementsパネルの横にあるConsoleパネルを開いて、document.designMode = 'on'と入力します。
すると、サイト内の文字列を直接書き換えられます。

Elementsパネル内からHTMLを書き換える方が自由度が高いですが、コードの構造によっては編集が大変です。
そのため、単なるテキスト編集であればこちらの方法の方が速いです。

CSS

CSSの確認

Stylesパネル

要素を選択すると、その要素にかかるCSSがStylesパネルに表示されます。

Computedパネル

隣のComputedパネルに移ると、ボックスモデルと、最終的に適用されているスタイルが表示されます。

Filter欄にテキストを入力すると、特定の要素だけを抜き出せます。
次の画像はmarginだけのフィルターをかけています。

Show allにチェックを入れるとすべてのCSSプロパティが表示されます。
グレーアウトしているものは指定されておらず、ユーザーエージェントのスタイルが当たっているものです。

CSSの編集

Stylesパネルに表示されているCSSをクリックすると、色々なものが変えられます。

既存のクラスにスタイルを追加・インラインでスタイルを追加

次の画像は新たにプロパティを追加している状態で、それ以外にもクラス名を変更することなども可能です。

既存のクラスのスタイルを無効化

横にあるチェックを外せばプロパティを無効にもできます。

状態変化

要素そのものではなく、要素の状態を変えることもできます。
次の動画はhoverを再現し、その上でCSSを編集しています。

既存クラスの割り当て

プロパティを直接触らず、既存のクラスを追加/削除もできます。
.clsをクリックすることで操作可能です。

新規スタイルの追加

完全に新規のスタイルを追加することも可能です。

ライトモードとダークモードの切り替え

ライトモードとダークモードを切り替えることもできます。
（見本に選んだサイトがダークモード未対応なことに後から気づき、ここだけ違うサイトで実演しています）

デバイス別の見た目

次の画像の、緑色の枠で囲った部分をクリックすると使えます。
ショートカットは command + shift + Mです。

プリセットから色々なデバイスサイズを選べるのに加え、自分で追加することも可能です。

ちなみに、プリセットの1番上にあるResponsiveは自由にサイズを変えられて便利ですが、デフォルトではモバイルデバイス扱いになっているので:hoverの確認ができません。
この場合、More optionsからAdd device typeを選択し、デフォルトがMobileになっているのをDesktopに変えましょう。
これで:hoverの確認もできます。

上手く扱うためのケーススタディ

CSS Overviewをはじめに眺めておく

いきなり初紹介の機能を出してしまいましたがご容赦ください。
右上のケバブメニューからMore tools > CSS Overviewを選択します。

次のようなウィンドウが開くのでCapture overviewを選択します。

レポートが生成されます。
これだけを見てどうのこうのは難しいですが「こんなの、どこで使ってるんだ？」とか「違いの分からない色やフォントサイズ定義が無数にある」など大まかな問題を把握するのには役立つでしょう。

色	フォント	未使用のCSS	メディアクエリ

カスケードの流れを見る

CSSをやっていて「上手くスタイルが当たらない」とき、後から別のクラスが要素を上書きしている可能性は高いです。
Computedパネルから目当てのプロパティを見ることで、今の描画に至るまでにどれだけカスケードが発生しているかを確認できます。

次の例は「本来はfont-sizeを14pxにしたいが、なぜか18pxになっている」シチュエーションだとします（元のサイトのスタイルを私が書き換えました）。
Computedのfont-familyを開くと14pxの定義の後に18pxが定義されていることが読み取れます。
該当のクラスを修正するか、そちらを外して別のクラスをつけるなどの判断ができます。

存在しないクラスを指定していないか見る

Elementsには表示されているクラスがStylesには表示されていない場合、次のようなことが考えられます。

• HTMLでのクラス名とCSSでのクラス名が一致していない
• CSSから定義を消した際、HTMLからは消し忘れて残り続けている

エディタ上では要素ごとに1まとまりに表示されていないため、こうした対応関係の崩れがあっても気づきづらいです。
一度DevToolsで確認して問題のあたりをつけたあと、エディタでのコードやコミット履歴にあたると問題を発見しやすいと思います。

変更した内容だけを抜き出して保存する

新規スタイルの追加にて新規スタイルの追加をしましたが、変更した内容だけを抜き出して保存することも可能です。

まずはスタイルを触ります。
ここでは変化が分かりやすいように大きく変えました。

変更したスタイルを見るとinspector-stylesheetと書いてあります。
これは、DevTools上で変更した内容だけをまとめたCSSへのリンクです。

クリックすると、追加した内容だけがまとまっています。
この上で右クリックをしてSave as...を選ぶとCSSファイルが保存できます。

多くの箇所を変更した後は、どこからどこまでを変更したか忘れてしまう場合もあります。
そのため、こういった手段で保存すると良いでしょう。

最後に

以前似たような趣旨の記事を投稿したのですが、今回もかなり簡単で、知っている内容も多いかもしれません。
しかし、漫然と使うのと、しっかり理解した上で使うのでは作業効率に大きな差が出ます。

CSSのオーバーライド1つとっても、適当にクリックして書き換えれば実施できてしまいますが、今回説明したように目的の違う方法がいくつも存在します。
改めて説明すると以下のような違いがあります。

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

Devトークでのお話してくださる方も募集中です！

1. ショートカットで、returnで次、shift + returnで前の候補にもジャンプできます。 ↩