chromeでのページ内検索とサイト内検索
みなさんはchromeのページ内検索やサイト内検索をしたことがありますでしょうか?
ページ内検索

今開いているWebページ内の特定の文字を検索したいときに利用するページ内検索の機能ですが、今回は更に便利に利用するためにショートカットでのページ内検索のやり方やページ内のhtmlを検索する方法をご紹介します。
サイト内検索

サイト内検索は1つのページの中だけではなく、サイト全体で特定のワードを検索する事として今回扱います。
サイトによっては検索窓が設置されているところもありますが、今回はサイトに設置されている検索窓を使わずにchromeの拡張機能でサイト内検索をする方法をご紹介します。
ぜひchromeのページ内検索・サイト内検索機能を使いこなして、Googleで検索しただけではなく、ページ内部での検索スピードをアップさせましょう!
chromeのページ内検索のやり方
chromeでページ内検索をしたい場合はメニューから検索する方法とショートカットで検索する方法があります。それぞれご紹介していきます。
メニューから検索

chromeの[編集]→検索から「検索」を選択しましょう。

するとchromeのウィンドウの右上に検索窓が表示されます。この検索窓に検索したいワードを入力します。
今回は例として「デフラグ」というワードを入力します。

すると今開いているページの「デフラグ」という言葉が黄色背景色でハイライトされます。
対象のワードがページ内に複数ある場合はエンターや、検索まどの矢印をクリックすることで、次の候補に飛ぶことが出来ます。
※戻りたいときは「Shift + Enter」
このように検索したいワードを開いているページから簡単に検索&強調表示させることができます。
ショートカットでのページ内検索のやり方
上記ではメニューから検索窓を立ち上げましたが、実はchromeのショートカットでも検索窓を立ち上げることができます。
ショートカットで検索バーを表示させるには、
Mac: Command + F
Windows: Ctrl + F
となります。Fは「見つける」という意味のFindの「F」でしょうか。

またキーボードで検索ワードを入力するので、キーボード上で完結できるショートカットの方がメニューを使って検索バーを表示させるよりも素早く行えます。
Webページのhtmlをページ内検索したい場合はどうすれば?
Webページはhtmlという言語によって書かれています。htmlを実際に書いていたり、Web広告系の仕事に携わっている方であれば、このhtmlの要素を検索したいという場合もあるかと思います。
この場合はchromeのディベロッパーツールを起動しましょう。ショートカットでの起動方法は
Mac: Command + Option + I
Windows: Ctrl + Shift + I(またはF12)
となります。

すると画像のようなウィンドウがchrome上に立ち上がります。
その中の「Elements」というタブを開きましょう。するとそのページ内のhtmlが表示されます。
※htmlが表示されない方はそのページをリロードして読み込みましょう。

ショートカットで検索バーを表示させます。
Mac: Command + f
Windows: Ctrl + f
で検索窓が立ち上がります。この検索窓に検索したい要素やclass名などを入力しましょう。
上記ではimgというタグを検索しています。するとimgタグの部分がchromeのページ内検索と同じくハイライトされて表示されます。
このようにデベロッパーツールを使うことでhtmlまで検索することができます。
chromeのサイト内検索のやり方
Webサイトに検索窓がついている場合はその検索窓からサイト内をキーワード検索することができるかと思います。
ここではchromeの拡張機能を使ってのサイト内検索の方法をご紹介します。今回使う拡張機能は「Search the current site(サイト検索)」です。
インストールは下記のリンクから行えます。

拡張機能がインストールされるとchromeの右上に虫眼鏡のアイコンが表示されます。クリックをすると検索バーが立ち上がりますので、ここに検索したいワードを入力します。

するとGoogleでそのサイトと検索ワードを指定した状態で検索が行われます。このようにgoogleの検索システムを通すことでサイト内を検索することができます。
注意としてはサイトのすべてのページをgoogleで検索できる訳ではありません。サイトによっては特定のページをgoogle検索できないように設定することができます。
また探したい記事やページが公開されて間もない場合だとgoogleで検索できない場合があります。
今回はgoogleで検索できる範囲でのサイト内検索のやり方になりますので、その点ご注意下さい。
まとめ
今回はchromeを使ったページ内検索とサイト内検索についてまとめました。
ページ内検索はしたことがあるけど、サイト内検索はしたことがないという方が意外に多いのではないでしょうか?
両方とも便利な機能ですので、ぜひ使ってみて下さい。