【検証ツールの使い方】HTMLの確認・編集する方法を解説します。

Web制作 便利ツール

【検証ツールの使い方】HTMLの確認・編集する方法を解説します。

なやむくん
Webページで使われているHTMLを確認したい。
なやむさん
HTMLを編集してどのようなレイアウトになるか確認したい

などの上記疑問や悩みを解決してまいります。

検証ツールの代表的な機能の1つとしてWebページのHTMLを確認したり編集したりすることができます。

Web開発において欠かせない機能の1つになるので是非覚えていきましょう。

今回は例として自身のポートフォリオサイトを検証ツールで確認していきます。

HTMLを確認してみよう

それでは検証ツールで各要素を見てみましょう。

今回は例として「Webサイトで~」の部分を検証ツールで見てみます。

「Webサイト」の部分を右クリック ⇒ 「検証」を押してみましょう。

「Webサイト」の部分を右クリック ⇒ 「検証」を押してみましょう。

すると「Webサイト」が青く、そしてそのコードの場所も青く表示されました。

要素上の数字はその要素の大きさを示しています。
つまり「Webサイト」の要素の大きさはwidthが384.58px、heightが97pxということです。

ポイント

検証ツールでは要素の大きさもすぐわかる

また調べたい要素にカーソルを合わせて右クリック ⇒ 「検証」とすることで、該当のコードを瞬時に開いてくれます。

「F12」でも検証ツールは開けるのですが、要素を指定しているわけではないので子孫要素は閉じている状態でコードが表示されます。

いちいちコードを開いて探していてはかなり面倒ですよね。

なので基本的には検証ツールで調べたい要素を右クリック ⇒ 「検証」で検証ツールを開きましょう。

ポイント

要素の状態を確認したい場合は、確認したい要素を右クリック ⇒ 「検証」で開く

なやむくん
要素の状態を知りたいなら「F12」で開くことはまずないかな…

HTMLを編集してみよう

検証ツールではその場でHTMLの編集、削除を行うことが可能です。

今回は「Webサイトで課題解決しませんか?」を編集してみましょう。

それでは「課題解決しませんか?」にカーソルを合わせて右クリック ⇒ 「検証」をクリックします。

クリックするとHTMLコードの位置まで移動してくれますので、HTMLコード上で右クリックします。

HTML編集メニュー
機能が多いですが今回は上から4つについて解説していきます

するとたくさんのメニューが出てきます。

主に使うのは上4つです。

Add attribute ⇒ 属性を追加する

Edit as HTML ⇒ HTMLとして編集する

Duplicate element ⇒ 要素の複製

Delete element ⇒ 要素の削除

Add attribute ⇒ 属性を追加する

Add attributeクリックすると属性を追加、編集することができます。

属性とはクラス属性やスタイル属性のことですね。

今回は「課題解決しませんか?」の文字色を変更したいと思います。

①「Add attribute」を選択します。

①「Add attribute」を選択します。
HTMLコードを右クリック ⇒ 「Add attribute」をクリック

strongタグの右側に入力スペースができました。

ここに属性を追加します。

②今回は文字色を変更したいのでstyle属性を追加したいと思います。以下のコードを入力してください。

style = "color: red;"
②今回は文字色を変更したいのでstyle属性を追加したいと思います。
style = "color: ○○;と好きな色を入れてみましょう

③入力したらEnterキーを押します。すると…

③入力したらEnterキーを押します。すると…
色が変わればOKです

「課題解決しませんか?」が赤色の文字色に変更できましたね!

このように属性を追加や削除など編集ができ、その場で反映後の内容を確認することができます。

Edit as HTML ⇒ HTMLとして編集する

Edit as HTMLをクリックするとそのタグの中身ごと丸々HTMLとして編集することができます。

今回は「Webサイトで課題解決しませんか?」のテキストを丸々変更したいと思います。

①「Webサイトで課題解決しませんか?」を囲っているpタグを右クリックしてEdit as HTMLをクリックしてください。

①「Webサイトで課題解決しませんか?」を囲っているpタグを右クリックしてEdit as HTMLをクリックしてください。
HTMLコードを右クリック ⇒ 「Edit as HTML」をクリック

すると以下のようにpタグの中身を編集できるようになります。

選択したタグ内全体を編集することができるように
選択したタグ内全体を編集することができるように

②このようになりましたら「Webサイトで課題解決しませんか?」を囲っている<strong>タグを以下に書き替えてみましょう。

検証ツールについて<br>勉強中です。
テキストを書き替えてみましょう

③入力できましたらCtrlキー + Enterキーを押します。すると…

テキスト内容を編集できました

このように書き替えることができました!

Duplicate element ⇒ 要素の複製

Duplicate elementをクリックするとそのタグの中身ごと複製することができます。

今回は「Webサイトで課題解決しませんか?」のテキストを下にもう一つ増やしたいと思います。

①「Webサイトで課題解決しませんか?」を囲っているpタグを右クリックしてDuplicate elementをクリックしてください。

HTMLコードを右クリック ⇒ 「Duplicate element」をクリック

②クリックすると…

「Webサイトで課題解決しませんか?」が複製されます

下にもう1つ同じHTMLを複製することができました!

Delete element ⇒ 要素の削除

Delete elementをクリックするとそのタグの中身ごと削除することができます。

今回は「Webサイトで課題解決しませんか?」のテキストを削除してみましょう。

「Webサイトで課題解決しませんか?」を囲っているpタグを右クリックしてDelete elementをクリックしてください。

HTMLコードを右クリック ⇒ 「Delete element」をクリック

クリックすると以下のようにHTMLコードが削除され「Webサイトで課題解決しませんか?」のテキストが表示されなくなりましたね。

「Webサイトで課題解決しませんか?」のテキストがなくなりました
みつた
レスポンシブがうまくいかないときやレイアウトが崩れているときに原因が考えられるタグを削除してみましょう。削除して解消されれば削除したタグ内に問題があるというのがわかります。ちなみに削除したタグは Ctrl + Z で元に戻せます!

以上の4つ覚えておけばWeb制作をする上で特に問題ありません。

その他にも機能はありますが、今回の記事では説明しませんので自身で確認してみてください。

  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-Web制作, 便利ツール