2020.10.12  2021.04.04

グーグルクロム(google chrome)開発者ツールの使い方ガイド

皆さんこんにちは!マコブログです!

今回は、google chromeで開発者ツールを使い、おしゃれなWEBサイトのHTMLとCSSを見ながら学習する方法を紹介します。

開発者ツールとは

開発者ツール(デベロッパーツール)は、WEBサイトに表示されているhtml要素、cssを確認でき、
jsファイルや画像を格納しているフォルダの場所なども正確に把握できます。



閲覧中のWEBサイトのHTML要素とCSS要素を見る方法を紹介します。

開発者ツールの利用方法はいたって簡単です。

まず、ブラウザの右上にある点々のマークを押してください。

すると、メニューの中央からやや下に、その他のツール、という項目が出てくると思います。

こちらをクリックして、さらに開くメニューの一番下に、デベロッパーツールというものが現れるので、そちらをクリックしてみてください。

手順:

1:点々を押す

2:その他のツールを選ぶ

3:デベロッパーツールを選ぶ

すると、下記画像の様になっていることが確認できると思います。

このデベロッパーツールの、左側にはサイトのHTML要素、左側にはCSS要素が映っています。

※CSSの要素が映っていない人はデベロッパーツールの端っこをマウスでつかんで中央付近まで持ってきてください。

ここに、Elementと記述があると思いますが、これは、「開発者ツールではサイトの要素を映していますよ」という意味なので、これ以外の場所が選択されている人はこのElementに戻してください。

そして、こちらの矢印マークを押して、WEBサイトの調べたい要素を直接クリックしてみてください。

すると、該当するHTML要素が開発者ツール側で認識され、その要素にあたっているCSS要素が右側に出てきます。

上記のような感じになっていれば問題ありません。


まとめ

いかがでしたでしょうか?

今回は、google chrome 開発者ツールの使い方について紹介しました。
プログラミング初心者向けの記事も掲載しておりますので、是非チェックしてみてください↓
プログラミング初心者 の方々へ

大変便利な機能で、最初は僕もこれでプログラミングの勉強をしていました。

是非皆さんも、開発者ツールを持ちいて、参考になるWEBサイトの研究をしてみてはいかがでしょうか。

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →