【イベント報告】『検証ツールの使い方』を開催いたしました

今回のライブ授業は！？

今回のライブ授業は、サイト分析シリーズの第一回、「検証ツールの使い方」を開催しました！Webサイトを作る際に必須とも言われている検証ツールの使い方についてSTUDIO山口の粟屋トレーナーに教えていただきました。これを覚えれば作業効率アップ間違いなし！

検証ツールって？

Webページを作成する際に、ブラウザで表示しているページのHTMLやCSSを確認、編集できるツールのことで、「開発者向けツール」「要素の検証」とも言います。

具体的には

・HTMLの確認や変更を試す

・CSSの確認や変更を試す

・レスポンシブの確認

などができます。

粟屋トレーナーが紹介する「検証ツール使い方」のうち、特に「これを使ったら効率が良くなりそう！便利だな～！」と思ったものを紹介したいと思います。

まずは基本操作から

①ページ上で右クリック→「検証」もしくはショートカットキー(F12またはoption+command+I　/　Alt+Ctrl+I) で検証ツールを開きます。

②HTML内の選択したい要素をクリックもしくは選択モードでサイト上の要素をクリックします。

[Styles]タブ

・適用されているCSSと詳細度の確認

・CSSのON/OFF

・記述場所の確認

・疑似クラスのON/OFF

・CSSの追加・変更・削除

・クラスの追加・ON/OFF

[Computed]タブ

・計算後の数値の確認

・適用されているCSSの確認

・記述場所の確認

・[Styles]タブで街頭の場所へ移動

・[Sources]タブで該当の場所へ移動

効率よく検証するために

・Filterの活用

・上下キーの活用

＋Shift：10単位で変更

＋option/Alt：0.1単位で変更

・Tabキーの活用

（ファイルを編集してサーバーにあげ、サーバー上での表示を確認するよりも、検証ツール上でちょこちょこと編集した方が、ステップが少なくて効率が良いそう。）

[Sources]タブ

[Show console drawer]>[Coverage]

使用されていない外部ファイルを見つけることができる

使用されていないコードがハイライトされる

（CSS自体が読み込めていない！などはここで確認することが出来るそう。）

デバイスツールバー

・プレビューするデバイス変更

（デバイスの追加・削除も可能）

・表示倍率の変更

・ネットワークやパフォーマンスの変更

（CPUスロットリングは使用PCの性能に比例）

などなど、検証ツールを使う上で便利なタブやキーはたくさんあるそうです。

これらを活用して、作業を効率よく行えるようになりたいですね。

STUDIO山口では 「Zoom」 と呼ばれるPC・スマートフォンでご利用可能な無料のアプリを使用して説明会を行っています。ビデオ通話でも背景は変更が可能ですので、どこにいても安心してご参加いただけます。

オンライン説明会へのお申し込みはコチラ

Web制作現場に就職・転職する人に向けてサポートを強化した新パックがSTUDIO山口でも開始！
第一線で活躍しているプロに基礎から応用までスキルを学び、無理せず続けられるワークスタイルに変えて自分の時間を手に入れよう。

見学説明会へのお申し込みはコチラ