こんにちは。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サイトをチェックして、参考にしていきましょう。
Tomoyuki
最新記事 by Tomoyuki (全て見る)
- Go言語(Golang)専門の技術ブログ「Golang-Tech」を開設!? - 2024年9月26日
- 【2024年】モンハンワイルズの推奨スペックとおすすめのゲーミングPCを紹介! - 2024年9月26日
- 37歳Web系エンジニア3年目。生成AI(ChatGPT・Gemini)現る。 - 2024年7月3日
コメントを残す