などの上記疑問や悩みを解決してまいります。
検証ツールの代表的な機能の１つとしてWebページのHTMLを確認したり編集したりすることができます。
Web開発において欠かせない機能の１つになるので是非覚えていきましょう。
今回は例として自身のポートフォリオサイトを検証ツールで確認していきます。
HTMLを確認してみよう
それでは検証ツールで各要素を見てみましょう。
今回は例として「Webサイトで~」の部分を検証ツールで見てみます。
「Webサイト」の部分を右クリック ⇒ 「検証」を押してみましょう。
すると「Webサイト」が青く、そしてそのコードの場所も青く表示されました。
要素上の数字はその要素の大きさを示しています。
つまり「Webサイト」の要素の大きさはwidthが384.58px、heightが97pxということです。
ポイント
検証ツールでは要素の大きさもすぐわかる
また調べたい要素にカーソルを合わせて右クリック ⇒ 「検証」とすることで、該当のコードを瞬時に開いてくれます。
「F12」でも検証ツールは開けるのですが、要素を指定しているわけではないので子孫要素は閉じている状態でコードが表示されます。
いちいちコードを開いて探していてはかなり面倒ですよね。
なので基本的には検証ツールで調べたい要素を右クリック ⇒ 「検証」で検証ツールを開きましょう。
ポイント
要素の状態を確認したい場合は、確認したい要素を右クリック ⇒ 「検証」で開く
HTMLを編集してみよう
検証ツールではその場でHTMLの編集、削除を行うことが可能です。
今回は「Webサイトで課題解決しませんか？」を編集してみましょう。
それでは「課題解決しませんか？」にカーソルを合わせて右クリック ⇒ 「検証」をクリックします。
クリックするとHTMLコードの位置まで移動してくれますので、HTMLコード上で右クリックします。
するとたくさんのメニューが出てきます。
主に使うのは上4つです。
Add attribute ⇒ 属性を追加する
Add attributeクリックすると属性を追加、編集することができます。
属性とはクラス属性やスタイル属性のことですね。
今回は「課題解決しませんか？」の文字色を変更したいと思います。
①「Add attribute」を選択します。
strongタグの右側に入力スペースができました。
ここに属性を追加します。
②今回は文字色を変更したいのでstyle属性を追加したいと思います。以下のコードを入力してください。
style = "color: red;"
③入力したらEnterキーを押します。すると…
「課題解決しませんか？」が赤色の文字色に変更できましたね！
このように属性を追加や削除など編集ができ、その場で反映後の内容を確認することができます。
Edit as HTML ⇒ HTMLとして編集する
Edit as HTMLをクリックするとそのタグの中身ごと丸々HTMLとして編集することができます。
今回は「Webサイトで課題解決しませんか？」のテキストを丸々変更したいと思います。
①「Webサイトで課題解決しませんか？」を囲っているpタグを右クリックしてEdit as HTMLをクリックしてください。
すると以下のようにpタグの中身を編集できるようになります。
②このようになりましたら「Webサイトで課題解決しませんか？」を囲っている<strong>タグを以下に書き替えてみましょう。
検証ツールについて<br>勉強中です。
③入力できましたらCtrlキー + Enterキーを押します。すると…
このように書き替えることができました！
Duplicate element ⇒ 要素の複製
Duplicate elementをクリックするとそのタグの中身ごと複製することができます。
今回は「Webサイトで課題解決しませんか？」のテキストを下にもう一つ増やしたいと思います。
①「Webサイトで課題解決しませんか？」を囲っているpタグを右クリックしてDuplicate elementをクリックしてください。
②クリックすると…
下にもう1つ同じHTMLを複製することができました！
Delete element ⇒ 要素の削除
Delete elementをクリックするとそのタグの中身ごと削除することができます。
今回は「Webサイトで課題解決しませんか？」のテキストを削除してみましょう。
「Webサイトで課題解決しませんか？」を囲っているpタグを右クリックしてDelete elementをクリックしてください。
クリックすると以下のようにHTMLコードが削除され「Webサイトで課題解決しませんか？」のテキストが表示されなくなりましたね。
以上の4つ覚えておけばWeb制作をする上で特に問題ありません。
その他にも機能はありますが、今回の記事では説明しませんので自身で確認してみてください。
