Slide 1
Slide 1 text
コーディングのお供
Google Chrome 開発者ツールを使いこなそう！
Beans College
月イチ勉強会 [10月]
Slide 2
Slide 2 text
index
gd 開発者ツールの基本と操作…………………………………g
Pd いろいろなパネル……………………………………………6
sd こんな困りごとありませんか？……………………………1&
0d スタイルが適用されていないときのチェックリスト……2P
d 開発者ツールのアクセシビリティ機能……………………2É
&d 他ブラウザの開発者ツール…………………………………32
Slide 3
Slide 3 text
1. 開発者ツールの基本と操作
Slide 4
Slide 4 text
開発者ツールとは
1
ブラウザに搭載されている、Web開発を助ける
ためのツール。Webページの「中身」である
HTML、CSS、JavaScriptを確認できることをは
じめ、色々な機能があります。
このスライドでは、Google Chromeの開発者
ツール（デベロッパーツール、DevTools）の各
種機能を紹介します。
Slide 5
Slide 5 text
開発者ツールを立ち上げる
2
ショートカットキー
Win [Ctrl] + [Alt] + [I]
Mac [command] + [option] + [I]
マウス操作
検証したい箇所で「右クリック」→「検証」
Slide 6
Slide 6 text
開発者ツールの日本語化
3
右上の歯車アイコンをクリック Preferencesの「Language」を選択 「Japanese - 日本語」、または最上
部にある「Browser UI language」
を選びます
開発者ツールが「英語」表示になっている場合、日本語化しておきましょう。
Slide 7
Slide 7 text
表示サイズの拡大・縮小
4
初期設定ではやや文字サイズやUIサイズが小さいので、拡大しておくとよいでしょう。
拡大
Win [Ctrl] + [+]
Mac [command] + [^]
「^」はJISキーボードでは「¥」の左隣。
縮小
Win [Ctrl] + [-]
Mac [command] + [-]
Slide 8
Slide 8 text
検査（ページ内の要素を選択）
5
Webページの要素のタグやスタイルを確認する
には、「検査」を利用します。
Webページ内の各要素にマウスホバーした際
に、その要素のmarginがオレンジ、paddingが
緑、要素の高さ・幅が青、borderが黄色で確認
できます。
また、「display: flex;」が適用されている箇所
には、点線の枠が表示されます。
Slide 9
Slide 9 text
デバイスモードを立ち上げる
6
開発者ツールの左上にある、ラップトップ
PCとモバイルを模したアイコンをクリック
します。
指定の幅ではどんな表示になるのかを確認
でき、右や下のハンドルで幅・高さを調整
できます。
ご入会後の特典スライドです
Slide 10
Slide 10 text
2. いろいろなパネル
Slide 11
Slide 11 text
「要素」・「スタイル」パネル
7
基本の画面が「要素」パネルです。
要素パネルには、右側に「スタイ
ル」などのパネルが表示されます
（レイアウトによっては下側）。
「スタイル」パネルでは、各ルール
セットに対応したファイルとその行
数が右に表示され、その箇所をク
リックすることで「ソース」パネル
の該当の行数が開きます。
入れ子になっている要素の左側には右向き三角「▶」のアイコンがあ
り、クリックで展開できます
Slide 12
Slide 12 text
「スタイル」パネル
8
もう少しスタイルパネルを見ていきま
しょう。
選択中の要素に適用されているスタイル
が、スタイルパネルから確認できます。
詳細度の高い順に、上から表示されてい
て、上書きされていて無効のプロパティ
には、打ち消し線が引かれています。
また、プロパティの上にマウスホバーす
るとチェックボックスが表示され、
チェックを外すとそのプロパティが適用
されていない状態が反映されます。
チェックボックス
打ち消し線
Slide 13
Slide 13 text
「計算済み」パネル
9
「スタイル」パネルの隣の位置にあるパネルで、選択中の要
素は最終的にどのプロパティが適用されているのか、がわか
ります。
たとえば、「スタイル」パネルの場合は、上書きされる前と
後のすべてのプロパティが記載されます。一方「計算済み」パ
ネルの場合、上書き後のプロパティのみが表示されます。
Slide 14
Slide 14 text
「コンソール」パネル（エラーの確認）
10
エラーや警告、ログメッセージを確認
できます。
画面右上の赤い「×」アイコンとその
数字がエラーの数、黄色い「！」アイ
コンが警告の数です。それらの箇所を
クリックする、または[Esc] キーでコ
ンソールパネルが開きます。
コンソールパネルの位置を、要素やソースパネルと同じタブに移動さ
せていますが、通常は下部の位置にコンソールパネルが開きます
エラーと警告の数
Slide 15
Slide 15 text
「ソース」パネル
11
ページ内に読み込まれているファイルを
確認、表示できます。
左側のサイドバーは各ドメインごとに
ファイルの階層と位置が確認でき、自
サーバーや、CDNやGoogleなどから読
み込んでいるかを確認できます。
また、ファイルの下部の「{}」アイコン
をクリックすると、minファイルを圧縮
前の状態に展開できます。
minファイルを展開
Slide 16
Slide 16 text
「アニメーション」パネル
12
ページ内で発生しているCSSアニメー
ションを、視覚的にタイムラインと
して確認、表示できます。
※JavaScriptでのアニメーションを
検証することはできません。
ご入会後の特典スライドです
Slide 17
Slide 17 text
「CSSの概要」パネル
13
「CSSの概要」パネルでは、CSSのセレクタ数や要素数、ページ内に使われている色、
フォント情報、使っていないCSSのプロパティなどを確認できます。
表示させるには、画面右上の「︙（縦型三点リーダー）」→「その他ツール」
→「CSSの概要」と開き、「概要をキャプチャ」のボタンを押します。
ご入会後の特典スライドです
Slide 18
Slide 18 text
「Lighthouse」パネル（表示速度など）
14
「Lighthouse」パネルでは、ページの表示速
度、アクセシビリティ、SEOなどの項目を検
証できる「Lighthouse」を利用できます。
パフォーマンスの点数は、サーバーの都合や
利用しているシステムの都合で低めの点数が
出てしまうこともありますが、ユーザー補助
（アクセシビリティ関連）などはなるべく高
得点を目指しましょう。
点数は100点満点で、90点以上が緑色になります。49点以下
の場合は要改善といえるでしょう
ご入会後の特典スライドです
Slide 19
Slide 19 text
ショートカットキー一覧を知りたい
15
開発者ツールで使えるショートカットキーの
一覧を確認できます。
歯車アイコンの「設定」→「ショートカッ
ト」で一覧画面に移動します。
Macでの表示拡大は、日本語JISキーボードの場合[command]
+ [^]だと思われますが、表示上は[⌘] + [+]である点に注意
ご入会後の特典スライドです
Slide 20
Slide 20 text
3. こんな困りごとありませんか？
Slide 21
Slide 21 text
スクリーンショット（キャプチャ）を撮りたい
16
ページ全体と、端末の範囲のスクリーンショットを
撮影できます。
デバイスモード右上の「︙（三点リーダー）」を開
き、「スクリーンショットをキャプチャ」または
「フルサイズのスクリーンショットをキャプチャ」
選びます。
Slide 22
Slide 22 text
スクリーンショット（キャプチャ）を撮りたい
17
↑左記の範囲をキャ
プチャした結果
「この部分のキャプチャがほしい」というときには「ノードのスクリーンショット」
を使うとよいでしょう。
要素パネルで要素を選んで右クリックし、「ノードのスクリンショット」を選ぶと、
そのタグの範囲をスクリーンショットとして保存できます。
Slide 23
Slide 23 text
ブレークポイントが知りたい
18
「メディアクエリを表示」すると、上部
に橙色と水色のバーが表示され、CSSと
して設定されているメディアクエリの一
覧が視覚的にわかります。
水色は「max-width」の、橙色は「min-
width」のメディアクエリで、クリックす
るとページ側もそのメディアクエリの幅
になります。
表示させるには右上の「︙（三点リー
ダー）」を開き、「メディアクエリを表
示」を選びます。
Slide 24
Slide 24 text
マウスホバー状態のスタイルを確認したい
19
スタイルパネル上部の「:hov」の項
目をクリックすると、「:active」
「:hover」などの項目とチェック
ボックスが表示されます。
マウスホバーをしていない状態で
も、ホバーしている状態を強制でき
ます。これによって、開発者ツール上
で:hoverなどのセレクタの適用済み
のプロパティが確認できます。
「要素の状態を強制」が適用されていると、要素の先頭にオレンジ色
の●が表示されます
Slide 25
Slide 25 text
classが外れたら・別のclassが追加されたらどうなるのか
20
スタイルパネル上部の「.cls」の項目
をクリックすると、選択中の要素に
付与されているclassが表示され、
チェックを外すとそのclassが要素か
らの適用外の状態を確認できます。
また、テキストボックスに記入する
と、その文字列がclass名として要素
に付与されます。
ご入会後の特典スライドです
Slide 26
Slide 26 text
flexboxがどうなっているかわからない
21
「display: flex;」が適用されいてる
プロパティには、右隣にアイコンが
表示され、クリックすることで
flexboxエディタが開きます。
flexboxエディタでは、flex-wrap,
flex-direction, justify-content,
align-itemsなど、flexbox関連プロ
パティをクリックで追加・変更でき
るため、挙動の確認がしやすいもの
となっています。
要素パネル内のflexboxが適用されているタグには、右端に「flex」の
ボタンが表示されます。クリックして有効化すると、画面内にflexが
適用されている様子が点線の枠で表示されます
ご入会後の特典スライドです
Slide 27
Slide 27 text
4. スタイルが適用されていないときの
チェックリスト
Slide 28
Slide 28 text
CSS未適用のときに開発者ツールで確認するリスト
確認したい要素は合っているP
スタイルは存在している？（class名は合っている？5
記述したはずの行数にはちゃんとプロパティがあるP
プロパティが無効になっていないP
セレクタの詳細度は問題ないP
効果のないプロパティを使っていない？
22
Slide 29
Slide 29 text
確認したい要素は合っている？
23
画面内の右クリックで「検証」から
開発者ツールを立ち上げると、いち
ばん内側の要素を選択します。
選択中の要素にスタイルが当たって
いない場合、親要素や先祖要素を順
に選択し、それぞれのスタイルを確
認していくことで、どの要素がどの
スタイルなのかを確認していくとよ
いでしょう。
上記の例は、角丸のカード型レイアウト部分全体を選びたかったのにh2
タグを選択してしまっている様子。この場合は、すぐ外側のdivタグの
「.infosession__content」を選択して、そこに探しているスタイルがな
いかどうかを確認します
Slide 30
Slide 30 text
スタイルは存在している？（class名は合っている？）
24
class名のタイプミスがある場合も
スタイルは反映されません。そこ
で、検索機能を利用します。
要素パネルを開いている状態で
[Ctrl (command)] + [F] キーを押す
と、要素パネルの下部に検索フォー
ムが表示されます。
ページ内のclass名や要素名、本文
の単語などを検索できます。
検索された単語は、黄色くハイライトされます
検索フォーム
一致した単語がハイライト
Slide 31
Slide 31 text
記述したはずの行数にはちゃんとプロパティがある？
25
開発途中のサイトの場合、CSSファ
イルが最新でない場合や、別のディ
レクトリにアップロードされている
ような場合もあります。
そんなときは、「ソース」からCSS
ファイルを確認し、自分自身で記述
した行数の箇所に、しっかりとプロ
パティが記述されているかを確認し
ましょう。
上記は圧縮されたファイルを展開したものなので、5行目以降は「-」の
表示となっています
行数表示
Slide 32
Slide 32 text
プロパティが無効になっていない？
26
要素に間違ったプロパティが適用され
ている場合、スタイルパネルのプロパ
ティの先端に黄色い「!」のアイコンが
表示され、打ち消し線が引かれます。
「!」アイコンにマウスホバーした際
に、「不明なプロパティ名」と出た場
合はプロパティの左側であるプロパ
ティの「名前」が間違っています。
「プロパティ値が無効」の場合は右側
の「値」が間違っています。
間違ったプロパティの場合、エディタでエラー表示になることも多
いです
ご入会後の特典スライドです
Slide 33
Slide 33 text
セレクタの詳細度は問題ない？
27
スタイルパネルで、class名やid名などのセレクタの箇
所にマウスホバーすると、「特異性:（0, 1, 0）」など
の項目が表示されます。
これは詳細度のことで、CSSの適用される優先度をあら
わしています。この優先度による影響で、スタイルが反
映されていない場合があります。
開発者ツールでは、上から順に詳細度が高い、つまり
優先されているルールセット（プロパティの集まり）
が表示されますが、詳細度が表示されることで、優先
される順番の確認がしやすくなっています。
日本語表示では「特異性」という、Specificity
の直訳になっていますが、「詳細度」とする訳
語のほうが一般的です
詳細度が表示される
ご入会後の特典スライドです
Slide 34
Slide 34 text
効果のないプロパティを使っていない？
28
「display: flex;」でないときのflexbox
関連のプロパティや、「position:
static;」の際のtopなどのプロパティ
は、設定しても効果が見られません。
それらのプロパティがある場合、グレー
アウトされ、その右端の「i」アイコン
にマウスホバーすることで理由が表示さ
れます。
ご入会後の特典スライドです
Slide 35
Slide 35 text
5. 開発者ツールのアクセシビリティ機能
Slide 36
Slide 36 text
要素を選択中のアクセシビリティ情報
29
「検査」を利用中に、詳細表示の下
部にアクセシビリティ関連の情報が
表示されます。
たとえば、背景色と文字色の差が小
さい場合、読みにくくなってしまい
ます。これはContrast（コントラス
ト）の項目で確認でき、赤い「!」ア
イコンが出ている場合は改善すると
よいでしょう。
問題がある場合の表示
Slide 37
Slide 37 text
カラーピッカーのアクセシビリティ情報
30
color（文字色）プロパティのカラーピッカーを開
いている場合、「コントラスト比」の項目が表示
され、WCAGのAAやAAAに準拠しているかどうか
を確認できます。
このとき、2本の白い線が表示され、「このライン
より上（下）ならAA（AAA）準拠」という基準が
視覚的にわかります。
「コントラスト比」を開閉する
2本の白い線
Slide 38
Slide 38 text
色覚特性のシミュレーション
31
色覚特性を持っている方の「見え方」をシミュレーショ
ンすることができます。
「レンダリング」パネルを開き、下部にある「色覚異常
をエミュレート」から、「1型2色覚」などを選ぶと、そ
れらに応じた表示になります。
レンダリングパネルは、[Esc] キーでドロ
ワーを表示させ、左端の縦型三点リーダー
（︙）をクリックした一覧から選択できます
Slide 39
Slide 39 text
6. 他ブラウザの開発者ツール
Slide 40
Slide 40 text
Chrome以外のブラウザの開発者ツール
32
Microsoft Edge
開発者ツール
Firefox
ウェブ開発ツール
Safari
Webインスペクタ
Chrome以外の各ブラウザにも、Webページを検証できるツールが搭載されています。
Slide 41
Slide 41 text
Safariの「開発」メニューを表示させる
33
「開発」メニューが有効になっていない場合、ショートカットキーも効かないです。
有効化の手順は、(1) メインメニューの「設定…」を開く、(2)設定内の「詳細」タブ、
(3)「Webデベロッパ用の機能を表示」にチェック、となります。
Slide 42
Slide 42 text
SafariとSimulatorで検証ができる
34
Xcodeに付属している「Simulator」を使うことで、Mac上でiOSのSafariを立ち上げられ、
Mac版SafariのWebインスペクタから、Simulatorで表示中のWebページの検証ができます。
XcodeメニューからSimulatorを立ち上げる Mac版Safariの「開発」からSimulator（上記はiPhone 15 Pro
Max）を選択できます
ご入会後の特典スライドです
Slide 43
Slide 43 text
SimulatorはDockに残せる
35
「Simulator」はXcode経由でなくとも、Dockに残しておくことで単体で立ち上げられます。
ご入会後の特典スライドです