• 締切済み

ページ内検索について(ソースコードのサンプル)

初めて投稿させていただきます。 ブラウザ上において、「Ctrl+F」でページ内のキーワード検索ができる機能が あると思いますが、この機能を、自作しているホームページに実装したいと 考えています。どのようなソースを記述すればよいか教えていただけませんか。 HTMLだけでは難しいと思うのですが、javascriptの知識が全く無いので困っています。 なお、IEの「Ctrl+F」のように、キーワードがヒットした場合、ヒットしたキーワードが 全て反転し、enterボタンを押すごとに上から順にヒットしたキーワードにページ移動 するようにしたいのです。 宜しくお願いします。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

>ただ、そのような機能がある事を知らない人も多いと思っていて、 どうしてもウェブページで実装したいのです・・・。  それなら、ごく簡単な方法を・・数十行のスクリプトで可能です。 ・あなたのサイトのすべてのページをCGI経由で出力するように変更します。 ・index.cgi がDIRECTRY_INDEXで実行されるようサーバーの設定を変更します。   .htaccessかhttpd.conf で <IfModule dir_module> DirectoryIndex index.cgi index.html index.htm index.sh </IfModule> ・index.cgiで、PATH_INFOから必要なHTMLを書き換えて出力します。  そのとき検索結果語句を<span class="search">などでマークアップします。  また、検索フォームを追加しておきます。 ・スタイルシートでspan.seachのデザインを指定します。  javascriptを止めているユーザーにも有効です。ユーザー側の手を煩わすこともまったくないです。

tokyocafe1025
質問者

お礼

ご回答ありがとうございます。 遅くなって申し訳ありません。。 頂いた回答で実現できるか確認していないのですが、 サーバの設定を変更したり、スタイルシートを追加したりなどは あまり考えていなくて・・・。 検索ボックスを設置するWEBページのソースに 必要な記述を追加するものと思っていました。 ソースを追記するような方法ではできないのでしょうか? (せっかく回答頂いたのに色々文句ばかり言って申し訳ないのですが・・・)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

それは、ウェブページの機能ではなく、ユーザーの使用しているブラウザに任せるべきです。 ほとんどのブラウザが持っている機能ですし・・

tokyocafe1025
質問者

お礼

ご回答どうもありがとうございます。 おっしゃる通りだと思います。 ただ、そのような機能がある事を知らない人も多いと思っていて、 どうしてもウェブページで実装したいのです・・・。 いろいろ調べて、検索だけなら実現できそうなのですが、 色を反転させたりと、IEと全く同じようには出来なくて。。 無理なんですかね・・・

関連するQ&A

  • ウェブページでの単語検索(ctrl+F)が見にくい

    ウェブページでctrl+Fで単語検索をした時に、ヒットした単語が見にくいことが時々あります。 私が考えている原因は下記2点です。 1,ヒットした単語は選択されて色が反転した状態になるが、ウェブページの背景色や文字の色との兼ね合いで(同系色だったりして)、ヒットした単語がどこにあるか見つけづらい 2,文字が小さかったり、情報量が多かったりで、ヒットした単語がどこにあるか見つけづらい この問題を解消する方法はありませんか? 例えば反転の色を変えることができたり、反転+点滅なんかしれくれたら、かなり見つけやすいのになぁと思います。 OSはWindows7です。 宜しくお願いいたします。

  • ページ内検索が出来る拡張機能を探しています

    Google Chromeの拡張機能を探しています。 通常機能で「Ctrl」+「F」を使用すればページ内検索が可能ですが、こちらでは1つのキーワードでしか実行できません。 私が望んでいるのは事前に複数のキーワードを登録しておき、それらの該当箇所にジャンプすることができる機能になります。 そのような拡張機能はございますか。 ご教授いただければ幸いです。

  • 【DreamWeaver】ソースコードを下から上に検索したい

    ドリームウィーバー8(Win-XP)使用者です。 HTMLソースコード内で指定文字を検索するときは 「Ctrl」「F」で検索していますが、常に上から下に向かってヒットしていきます。これを逆順にヒットさせることはできないものでしょうか?うっかり行きすぎてしまった場合に「ひとつ戻りたい!」と思うことがよくありますので。 お詳しい方、よろしくお願いいたします。

  • ホームページ内検索をフォームとJavaScriptで実現したい。

    簡単なホームページを作っているのですが、例えばページ内の特定のテキストを検索する場合は Ctrl+Fで検索できますが、自分で作っているページなので、FORMとJavaScriptを使って キーワードを formのテキストに入力し、検索ボタンを押すと、1つめのfind位置にジャンプし、 ページ内のキーワード全てに黄色の反転をさせたいのですが、可能でしょうか? DOM?というものを詳しく知る必要があると思いますが、お勧めの書籍がありましたら教えてください。

  • ページ全体の拡大/縮小が行える、JavaScriptのサンプルを教えていただけますでしょうか?

    ページ全体の拡大/縮小をJavaScriptにて行いないたい(対象はIEのみ)のですが、検索をしてみると、「文字サイズの拡大/縮小」や「画像の拡大/縮小」はよく見つかるのですが、ページ全体の拡大/縮小のサンプルを掲載しているページはあまり見かけません。 検索("ページ ズーム javascript"等のキーワードで)で何件か見つかって、試してはみたのですが、それらのプログラムですと、私のほうのHTML+CSSで使用すると、何とも説明しがたいおかしな挙動をしてしまいます。HTML+CSSの見直しも色々行ってみたのですが、なかなか改善されません。 みなさんがご存知のJavaScriptのサンプル(ページ全体の拡大/縮小)が掲載されているURLを教えていただけますでしょうか? 教えていただいたサンプルを実装し、色々探ってみたいと思っています。 ※ちなみに、イメージは↓このような感じです。 http://appleworld.com/4tr/

  • 異ページキーワード検索エンジン

    YahooやGoogleといった検索エンジンは複数キーワードを入力した ときに同じHTMLページ内で複数キーワードがヒットしたかを みますよね。そうではなくて例えばAというキーワードが多いAページ とBというキーワードが多いBページがあってA,Bで検索したときに そのページのホームページアドレスは検索されるような検索 エンジンは存在しないでしょうか。知ってらっしゃる方が いましたら教えて下さい。

  • [Ctrl]+[F] 検索する文字列 → でヒットしない文字列

    エクセルで作った文書をHTML形式で保存(拡張子.htm)   ↓ インターネット上にアップロード   ↓ キーワードで検索するときは [Ctrl]+[F] 検索する文字列 → " " で検索してもらう。 さて、この検索において 明らかにそのウェブページに存在するキーワードを検索したのに [ドキュメントの検索が終了しました]というメッセージが出て ヒットしないことがあります。 これはどのようなことが考えられますでしょうか。 よろしくお願い申し上げます。

  • ブラウザの検索機能でwebページ内を検索(IE5.5)ができません。

    以前まで不自由なく検索できていたのですが、突然HITしなくなりました。 (Ctrl+Fで検索の窓を出しキーワードを入れるという基本的な方法です) 綴りや単語の入力ミスはありません。 さっき試しにこのページから"質問""教えて""コンピューター""インターネット "とコピー&ペーストでやってみても・・・ 「見つかりません」でした。 こういうエラー?ってあるものなんですか? どこかのファイルが壊れてるのでしょうか? 結構不便です。 原因・対処方法 ご存知でしたら教えて下さい。 よろしくお願いします。

  • 日付が変わるごとにページを更新

    日付が変わるごとに自身のページを更新するには、 Javascriptでどう記述すればいいですか?

  • 検索機能とページ送りについて

    はじめまして。 検索機能とページ送り(ページング)の実装について方法を模索中です。 category/ ├ page001.html ├ page002.html ├ page003.html ├ page004.html ├ page005.html ├ page006.html ├ page007.html ├ page008.html ├ page009.html ├ page010.html ├ page011.html ├ page012.html ├ page013.html ・ ・ ・ ○現在、全てHTMLのみの静的ページ ○検索機能を実装、検索結果ページは「ページ送り」を実装したい。 ex.[前へ] 1 2 3 4 5 [次へ] 他サイトや質問を参考にJQueryやPHPを用いた方法などがあるところまでは分かったのですが、 例えば、下記のようなサイトはどのような方法を用いているのか分かりません。 http://www.google.co.jp/search?~ http://www.brand-index.jp/search?min_sale_price=8000&max_sale_price=15000 など、「search?~」はどのような言語を用いて実装しているのでしょうか? もし分かれば、実装の選択肢に入れたいと思ってますので、ご教授をお願いいたします。

専門家に質問してみよう