ワードプレスで作成したサイトのHTML文を確認したい時があります。固定ページや投稿ページのHTML文は記事内の「テキスト」欄で確認したり編集したりすることができますが、サイト全体のHTML文を確認したい時にこの方法を知っていると役に立ちます。グーグルクロームとマイクロソフトエッジは操作方法が似ていますので、このページにまとめました。
この記事は、クロームやエッジでHTML文を見る方法と、文書内のワード検索の方法について図解しています。
サイトのHTML文書の開き方3種
1.マウスを使う
まずは基本的な方法です。HTML文を確認したいページを開き、リンクが張られていない場所で右クリックします。右クリックによって表示された選択肢からクロームの場合は［ページのソースを表示］、エッジの場合は［ページのソース表示］を選んでクリックしてください。
以上で、そのサイトのHTML文書を開くことができます。
2.キーボードを使う
次はキーボードを使います。いわゆるショートカットキーです。［Ctrl］キーと［U］キーを同時に押します。コツは、先に［Ctrl］キーを押し、キーを押したまま［U］キーを押すイメージです。
ショートカットキーは、クロームでもエッジでも操作方法は同じです。
3.URLを打ち込む
アドレスバーに「view-source:」に続けてURLを直接入力して移動します。
当サイトの場合は、
このような感じです。
アドレスバーに直接URLを打ち込む方法も、クロームとエッジで違いはありません。
検索する
語句を検索する場合も、マウスでクリックする方法と、ショートカットキーで検索する方法があります。
1.マウスで検索する
マウスを使って検索窓を出す場合、クロームとエッジで操作方法は非常に似ていますが同じではないため、それぞれ画像を使用して説明します。
クロームの場合は、右上にある「︙」マークをクリックしてから、［検索］をクリックします。
エッジの場合は、右上にある「…」マークをクリックしてから［ページ内の検索］をクリックします。
クロームエッジともに、HTML文書を開くときは「右クリック」でしたが、今回は通常のクリックです。［検索］と書かれているテキストをクリックすると、検索窓が開きます。
検索窓に検索したい語句を入力すると、そのページ内に該当する語句がいくつあるか表示されます。ページ内のテキストには蛍光ペンでその語句に印がつけられ（黄色）、そのうちの何個目の語句を参照しているかわかるように1つの語句だけにオレンジ（赤）色の蛍光ペンがつけられています。
右側の小さな三角ボタンをクリックすれば、前後に移動して赤色の蛍光ペンに照らされた語句を参照することができます。調べ終わったら、「×」ボタンを押して閉じて終了です。
2.キーボードで検索する
検索のショートカットキーもあります。クロームとエッジ共に［Ctrl］キーと［F］キーを同時に押せば検索窓が開きます。コツは、先に［Ctrl］キーを押して、キーを押したまま［F］キーを押すイメージです。
検索の方法は「マウスで検索する」で記載したものと全く同じ方法です。検索窓に語句を入力して「いくつ目の語句がどこにあるか」蛍光ペンが教えてくれます。
確認を終えたら「×」ボタンをクリックして画面を閉じます。
検索する語句を入力する際の注意点
検索する語句を入力する場合、英文や英単語、数字などの場合は、半角や全角に注意して入力してください。半角文字を検索したいのに、全角文字で入力すると「該当なし」の結果になってしまいます。
また、正しく打ち込んでいるようでも、日本語の場合は「パ」と「バ」のように、濁音などが見にくい場合があるので、誤字にも気を付けると良いと思います。
最も確実な方法は「コピー＆ペースト機能を使うこと」です。検索したい語句がもともと表示されている場合、コピー＆ペーストをすれば確実です。
