要素の検証とは何ですか?
サイト制作を行う上で、開発ツール(ヨウ素の検証)を使えるようにしておくと便利です。
こちらではsafari、Chromeでの開発ツールの使い方と、要素の検証でできることを説明いたします。
開発ツールの使い方
safari の場合
safariを立ち上げた状態で、左上のタブから「safari」→「環境設定」を開きます。
![safari画面](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools1.png)
右端にある詳細タブ(歯車のアイコン)の一番下にある「メニューバーに開発メニューを表示」にチェックを入れます。
![safari環境設定画面](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools2.png)
右クリック(副クリック)から要素の検証を選択すると、検証ツールが表示されます。
Google Chrome の場合
右上の赤いマークをクリックします。
![Chrome画面](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools3.png)
「その他のツール」→「デベロッパーツール」をクリックします。
![Chrome設定画面](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools4.png)
右側に検証ツールが表示されます。
要素の検証でできること
表示されているWEBページの要素を表示させることができるので、調べたい部分がどのようなコードで書かれているのかがわかります。
選択モードにして、調べたい部分をクリックすると、その部分のHTMLコードと、そこに含まれているCSSがどうなっているのか、が表示されます。
safari の選択モード
![safari要素の検証選択モード](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools5.png)
Google Chrome の選択モード
![Chrome要素の検証選択モード](https://wiki.toiee.jp/wp-content/uploads/2020/03/Development-tools6.png)
どんなフォントを使っているのか?何色を使っているのか?などを調べることができます。
また、表示されているCSSを書き換えて、どのように変化するのかを確認することもできます。
※自分だけでテストできる、というものなので、実際のサイトは書き変わりません。