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サイトをチェックして、参考にしていきましょう。

 

 

The following two tabs change content below.
Tomoyuki

Tomoyuki

元SE。30歳を目前に仕事や将来に悩み、Web業界へ転職を目指すも失敗。 「好きなことで生きる」に憧れてなんのあてもなく仕事を辞め、ガチ初心者からブロガーに挑戦し、月間13.3万PV(上昇中)を達成! ブログでは大好きなパソコン情報をはじめ、様々な役立つ情報を発信中。 そして次はプロゲーマーとしても活動するため、ゲーム練習と合わせて攻略記事を書いたり、YouTubeでも活動中。








シェアはこちらから


ゲーミングPCならBTO

最近はゲーミングPCを購入する人も増えましたが、「どう選べばいいの?」という人も多いですよね。BTOなら自分好みにカスタマイズすることも可能でおすすめなので、ぜひ一度チェックしてみて下さい!



デジタルコンテンツ素材販売店

ひょんなことから、私はiPhoneだけでデジタルコンテンツ(画像や動画など)を作成するチャレンジを始めました。

そこで、試しに自作したデジタルコンテンツの素材販売店をオープンしてみたので、よければぜひ一度チェックしてみて下さい!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です