Progate（プロゲート）でGoogle Chrome検証ツールの学習メモ

こんにちは。Tomoyuki（@tomoyuki65）です。

Web開発時にGoogle Chromeの検証ツール（デベロッパーモード）を使うことがあると思いますが、Progateで学んで参考になったので、この記事に記録を残しておきます。

Google Chromeの検証ツールを使う

Google Chromeの検証ツールを使うには、Webサイトで右クリックしてメニューを開き、「検証」をクリックする。

検証ツールが開くので、左上のアイコンをクリックする。

アイコンが青色になったら、Webサイトの対象箇所をクリックする。

例としてボタン「新規登録はこちら」をクリックすると、ボタンのHTML、CSS、marginやpaddingなどを確認できる。

カーソルを乗せた時の状態などのCSSを確認したい場合、Filter横の「:hov」をクリックする。

メニューが開くので、例として「:hover」をクリックする。

対象のCSSが表示され、確認できます。

尚、検証ツールからコードを修正して、レイアウトの変化を見ることも可能。その場合は保存されるわけじゃないので、更新すれば元に戻る。

特にpaddingやmarginなどは、細かい調整をする際に有効に使えそう。

最後に

Google Chromeの検証ツールを使えば、参考にしたいWebサイトのHTMLやCSSを確認できるので、オリジナルのポートフォリオを作る際にも、有効的に使えそうです。

プロが作って実際に使われているWebサイトをチェックして、参考にしていきましょう。

合わせて読みたい👇

プログラミングスクールおすすめは？比較一覧まとめ

2019年4月28日

IT・Webエンジニア転職サイト・エージェントおすすめ比較一覧まとめ

2019年4月29日

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Tomoyuki

SEを5年経験後、全くの未経験ながら思い切ってブロガーに転身し、月間13万PVを達成。その後コロナの影響も受け、以前から興味があったWeb系エンジニアへのキャリアチェンジを決意。現在はWeb系エンジニアとして働きながら、プロゲーマーとしても活躍できるように活動中。

最新記事 by Tomoyuki (全て見る)

• モンハンワイルズでおすすめの太刀装備まとめ【MHWilds】 - 2025年3月9日
• Nest.jsでGraphQLなどのBFF（Backend for Frontend）を開発する方法まとめ - 2025年2月23日
• モンハンワイルズの序盤で集めたい調合品と素材の場所まとめ【ハチミツ・にが虫の苦汁・マンドラゴラ・雷光虫の蓄電素・ネムリ草・マヒダケ】 - 2025年2月17日