フロントエンドエンジニアの必須アイテム「検証ツール」 | 長期有給インターン生の日常|株式会社ガーディアン | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す

「検証ツール」、聞いたことがあるでしょうか。

デベロッパーツールとも言います。

フロントエンドエンジニアには必須の

ツールなので、WEBサイト制作気になるな、

という方はぜひ使えるようにしましょう！

検証ツールとは何か

WEBサイトが実際どのようなソースコードで

書かれているか見ることができるツールです。

その場で編集してサイトに反映することもできます。

今日はフロントエンドエンジニア的な仕事をしていて、

ずっとお世話になっていました笑

実際に使ってみましょう。

どうやって使うか？

Windowsの場合で話していきます。

WEBサイトのどこかにカーソルを合わせ、右クリック。

下のほうに出てくる「検証」をクリック。

右側に何やら出てくるので

その左上の矢印をクリック。

そうするとHTMLやCSSのコードと画面上の

対応が分かりやすくなります。

コードと画面の結び付けが難しい

フロントエンドエンジニアからしたら大助かりです！！

ここからちょっとだけ編集してみましょう。

検証ツールの行の左の...をクリック、

その後Edit as HTMLを選択。

ここからHTMLで書きかえてみましょう。

本来Googleのロゴが入るべきところに、

自分の入れたい文字列を入れられます。

例えば

<div id="logo"></div>
となっているところを

<div>こんにちは</div>

にすると今日の日記のトップのように

文字を変えられます。

これができたらフロントエンドエンジニア

への第一歩かも！？

※あくまで個人で楽しむ範囲にとどめてください。

他人のブログを編集してスクリーンショットを

SNSに挙げる、などの行為は名誉棄損などに

該当する恐れがあります。