HTML&CSSのお勉強(002)

多くの人が何気に使っているブラウザですが実はWEBの閲覧だけでなく、お勉強するのにお役立ち機能がついています。GoogleCromeでは右クリックで「検証」FireFoxは「要素を調査」、MicrosoftEdgeなら「開発者ツールで調査する」で現れるデベロッパーツールです。大体どれも同じインターフェースになっているのでどれか使いやすいものを使えばいいと思います。Cromeは残念ながら英語ですが(2021/04/04現在)、同じレンダリングエンジンを採用しているEdgeが日本語化されているので近いうちに日本語化されるとのことです。

デベロッパーツールを開くとウインドウが2分割され半分(左右か上下は設定で選べる)がツール画面になります。
ツールカラムの左上にあるアイコンで要素を選択するとマウスオーバーで色が変わりクリックで該当する行がハイライトされます。
検証?とか何かと思いましたが表示されている要素を「調査」したり表示のされ方を「検証」したりするのに便利ですね。ちなみにCromeでは選択の隣(FireFoxは右側)にある「Toggle device toolbar」でレスポンシブデザインをエミュレートできます。

ここのファンクションの使い方はQiitaさんのページが詳しいです。

#ノート #独学 #HTML #webサイト #Web初心者