【イベント報告】『検証ツールの使い方』｜STUDIO山口｜デジタルハリウッドの専門スクール（学校）

『検証ツールの使い方』を開催しました

こんにちは、デジタルハリウッド山口スタッフです。
先日、STUDIO山口の澄田トレーナーを講師に迎え、オープンセミナー「検証ツールの使い方」を開催しました！
今回のイベントでは、検証ツールの基本的な操作から応用まで幅広く教えていただきました。

検証ツールとは

検証ツールとは、Webサイトを作成する際にブラウザで表示しているページのHTMLやCSSの確認や変更、レスポンシブの確認などができる開発ツールのことです。

また、検証ツールの正式名称は「デベロッパーツール」といいます。
名称は様々なツールで呼び方が変わってきます。
SafariではWebインスペクター、Microsoft Edgeは開発者ツール、Firefoxは開発ツールといいます。

基本的な使い方

まずは、検証ツールの基本的な使い方を学んでいきました。

検証ツールを立ち上げる基本操作が下記の通りとなります。

⓵ページ上で右クリック→「検証」
もしくはショートカットキー（Mac:command+option+i or F12、Win:Ctrl+Shift+i or F12）
②選択モードでサイト上の要素をクリック、またはHTML内の要素をクリック

実際に制作しながら検証ツールを使う時は、検証ツール内でHTMLやCSSの確認や変更をしながら、修正箇所はDreamweaverなどのWebデザイン制作ツールで修正していきます。

検証する時の3つのポイント

・三角ボタンを閉じて見やすくする！
・大きな枠組みから小さな枠組みへ！
・Dreamweaverのプレビューは使わない！

検証する時は自分の見たい部分に辿り着くことが難しいことがあります。
その為、大きな枠組みから小さな枠組みへと辿るように見ていくと探していきやすいとおっしゃられていました。
そして、探していく時に自分が見たい部分と違う場合は三角ボタンを閉じると見やすいそうです。
また、Dreamweaverのプレビューは少し見ずらいと言います。
その際は、Dreamweaverを直接ブラウザで見るようにすると、検証もしやすくなるとおっしゃられていました。

応用

次は、基本操作を踏まえ、応用の使い方を紹介していただきました。

キャッシュの無効化

ブラウザのキャッシュとは、表示したデータをPCの中に一時的に保存する機能のことです。
メリットとしては、同じページを繰り返し閲覧する時に素早く表示できることです。
ただ、便利な機能にはなりますが、開発者側としては少し厄介な機能になることがあるとおっしゃられていました。
例えば、クライアントからページの修正依頼があった際に修正したデータを渡しても、クライアントのキャッシュが残っていると最新のデータが反映されず古いデータが表示されてしまうことがあります。
その場合は、都度クライアントにキャッシュを消すようにお願いします。
キャッシュの削除方法は検証ツールを開いた状態で左上のリロードボタンを右クリックすると表示されます。

・通常の再読み込み　command/Crtl＋R
・ハード再読み込み　command/Crtl＋Shift＋R　CSSや画像などのキャッシュの削除
・キャッシュの削除とハード再読み込み　JavaScriptなど含めたキャッシュの削除

クライアントにキャッシュの削除をお願いする時は「キャッシュの削除とハード再読み込み」をするように伝えるとおっしゃられていました。
今回はChromeのやり方をお伝えしました。他のブラウザだと方法も変わりますので、その都度調べていただきたいと思います。

CSS　Overview

CSS　Overviewとは、日本語で概要パネルといいます。表示しているページで指定されている「色」「フォント」などを確認することができるものとなります。
サイトの配色を見て参考にする際は非常に便利な機能だとおっしゃられていました。
表示の仕方は、検証ツールの右上にある縦3つに並んでいるボタンをクリックした後、その他のツールの中の「CSSの概要」をクリックすると表示されます。

iOS　Safari　Webインスペクタ

MacとiOS端末をUSB接続するとiPhoneで表示したサイトをMacのSafariの検証ツールを使って、検証できる機能となります。
iPhoneで表示されているページをPCで検証できる為、iPhoneのSafariでページが崩れてしまっている時など役立ったとおっしゃられていました。
こちらの機能はMacとiPhoneを使用している人限定の機能となります。

などなど、検証ツールを使う上で便利な機能は沢山あります。澄田トレーナーにはこの他にも多くの機能を紹介していただきました。