HTMLのヘッダ-（フッター）共通化で困っています
- HTMLとJavascript初心者の方が、ある元のHTMLのヘッダー部分を共通化しようとしています。しかし、phpやSSIといった技術を使わずに共通化する方法を探しています。
- ビュー機能内では正常に表示されるが、ブラウザで見るとうまく読み込まれない問題が発生しています。いくつかのサイトで提案された方法を試しましたが、うまくいかず困っています。
- 質問者はC言語を勉強しているプログラマーであり、同じような問題に直面している方や解決策を知っている方からの助言を求めています。
- ベストアンサー
HTMLのヘッダ-（フッター）共通化で困っています
ＨＴＭＬとJavascriptは初心者の部類です。 仕事上、ある元のHTML（index.html）のヘッダー部分を取り出し、別のHTML（header.html）に書き込み、何らかの方法で元HTMLへ、先程取り出して新しく作ったHTMLの内容を引き込めないか考えています。（他にも何枚もあるHTMLファイルのヘッダ部分を一度に共通化したい為。）ネットをぐるぐるさがして、phpやSSIなる技術を使うと簡単に出来るよと書いてありますが、サーバーの設定をいじらなければならないので、今はあえて触れていません。いろいろ探して、以下のサイトにJavascriptを利用して、別ＨＴＭＬを引き込むスクリプトを発見したので、早速試してみました。 参照サイト:http://d.hatena.ne.jp/kenpoco/20080501/1209636103 ＨＰ編集用に、フリーソフトのＨＰＰｒｏｊｅｃｔ2を利用しているのですが、そちらのビュー機能では正常に表示されるところまで作成できました（リンクや画像、CSS等も生きてます）。ただ、肝心のブラウザで見た時に、うまく読み込まれませんでした。 別の方法で、以下のサイトの方法も試してみました。 参照サイト:http://tani.dank-hearts.com/2008/03/javascripthtml.html こちらに関しては、ビュー機能内でも正常に表示されず、header.html内の内容がそのまま文字列として出力されてしまったり、文字化けしてしまったりしました。 こちらの都合でソースコードを上げることができないので、説明不足かもしれませんが、同じような問題に遭遇した方や、なにか他に注意するべきことがあることをご存知の方がいらっしゃりましたら、お知恵をお貸しいただければとても助かります。よろしくお願い致します。 （プログラミング経験ですが、C言語はひと通り勉強しています）
- someofquestion
- お礼率16% (2/12)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
基本的にそのような目的にjavascriptは決して使いません。ヘッダー部分は、検索エンジンが最初に解釈する部分ですが、検索エンジンはjavascriptなんて理解しません。検索エンジンどころかjavascriptでドキュメントの書き換えを禁止しているユーザーや、そもそもjavascriptを解釈しないユーザーエージェントには無意味です。 高機能なテキストエディタで、一挙に書き換えるほうが断然早いし簡単です。 /^\t<div class="header">.*$\t<\/div>/$header/s; とか・・・・・もちろんPerlを使っても良い。 もちろん、一番簡単なのはサーバー側で書き換えることですが・・phpもSSIも使わず、簡単なCGIだけで・・ .htaccess AddType application/x-httpd-cgi html; とでもして html は単純なCGIで内容は open FILE,$ENV{'PATH_INFO'}; while(<FILE>){ s/__HEADER__/$header; s/__FOOTER__/$footer; print; } とか・・・
その他の回答 (3)
- flyingbee
- ベストアンサー率26% (49/182)
JAVAScriptのDocument.writeでタグを書き出してくれます。 例えば document.write('<p>あいうえお</p>'); これをヘッダ部にやればいけるかもしれませんが、たぶんダメでしょう。 理由はヘッダ部のJAVAScriptは多分、定義だけで実行しないのではないでしょうか。 それとヘッダ部が厳しい理由にもう１つ、遅延が挙げられます。 ヘッダ部が<head>ではなく<div class="header">の意味でしたら、 上記の方法で関数をよんであげればいいです。 DreamWeaverを使えば共通化ができます。 あまりにも必要だったらC言語なんかで変換プログラムを作った方が早いような。 どうせ相手はテキストですし。
- dscripty
- ベストアンサー率51% (166/325)
1) Dreamweaver のような高機能な HTML エディタを使う。 ヘッダ、フッダなどの共通部分を無理なく、全ページ同時に編集できるらしいよ？ 楽でいいね。 2) 高機能なテキストエディタをつかう。 複数ファイルにまたがって、文字列の置換ができるよ？ 慣れれば、かなり早く一度に置換できるからおすすめ。 3) あとは、php や Perl をサーバじゃなくて、ローカルで実行して、出力される結果をファイルに保存してそれをサーバにアップロードする。 表結果を確認するのに、HTML の出力が必要だから、HTML と CSS に不慣れだと、すこし大変かな？ さいごに、 共通部分を JavaScript でインクルードすると、JavaScript を無効にしてるひとには全く表示されないからおすすめできないよ？ それなら、フレームで作ったほうがまだましかなぁ。。。
各ページのレイアウトを指定したいのでは無いですか？ 若しそれで有れば『ヘッダ』の所でCSSファイルを指定すればOK <link rel="stylesheet" href="http://www.XXX.com/home.css" type="text/css" />
関連するQ&A
- htmlでヘッダやフッタを共通化したい
ヘッダ、サイドバー、コンテンツ、フッタというレイアウトで 100ページぐらいあるWebサイトを構築する場合、 ヘッダやフッタに変化がないのであれば、共通化したくなります。 （変更があった時に、1箇所変更すればいい、という風にしたいため） そこで、例えば、PHPが使えるところであれば、includeすればいいのですが、 使えない場合、JavaScriptを使えば可能ではあると思います。 しかし、JavaScriptはOffにされた時のことを考えると このやり方はリスクがあるような気がします。 そこで、知りたいのですが、htmlを共通化したい場合、 PHPなどを使う以外に、どんなやり方があるのでしょうか？ できれば、サーバサイドに仕込む方法ではないやり方でお願いします。
- ベストアンサー
- HTML
- サイトの共通ヘッダーのHTMLソース管理について
PHPを用いない、HTMLのみのサイトの 共通ヘッダーやフッターを1ファイルで管理するため、 SSIで、<!--#include file=\"***.html\" -->と設定し、 読み込むファイルは拡張子を.htmlとしたいです。 ヘッダーやフッターには、テキストリンクや画像のみをおくこととします。（プログラム的な動作はしない） みなさんは、ヘッダーやフッターのデータをどのように管理されているでしょうか。 DreamweaverのTempleteやLibraryを使っていますか。 SSIを使っていますか。 includeをするためだけにPHPをつかっているのでしょうか。
- ベストアンサー
- HTML
- ヘッダーやフッター全ページ共通部分の生成
全ページ共通のヘッダーやフッターを外部ファイルとして持ち、PHPで表示させるやり方があると思うのですが（すみません表現が間違ってるかもしれませんが）、拡張子は全て.phpにせざるを得ないでしょうか？ SSIでもJavascriptでもなく共通をファイルを使い回す方法は他にないでしょうか？
- 締切済み
- PHP
- 各ページに共通するヘッダーやフッターの記述
各ページに共通するヘッダーやフッターの記述 ホームページ作成について質問です。 過去の質問を検索しましたが 解決できなかったので質問させていただきます。 ホームページビルダーで各ページに共通するヘッダーやフッターをテンプレートにすると 全てのページにヘッダーに使われている文章やリストなどのhtmlソースがすべて記述されてしまいます。 いろんなサイトを見るとヘッダー部分は同じなのにhtmlソースが記述されておりません。 SSIのincludeもなくphp、java scriptも記述されていません。 別ページにリンクさせているようなアドレスが記述されています。 そのような方法はあるのでしょうか？ またSEO対策としてはどちらがいいのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- HPで各頁に共通したヘッダーhtml全部をつけたい
ホームページで各ページに共通したヘッダーを JavaScriptのdocument.write()を利用してつけようとしています。 OSはwindows Xpで、制作ツールは、alphaEDITを使用しています。 １．「header.js」ファイルを用意 document.write("<header.html>header"); ２．「index.html」を用意 <html> <head></head> <body> <script language="JavaScript" src="header.js"></script> 中身 </body> </html> ３．スタイルシートsample3.cssを用意 ４．header.html を用意 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>ヘッダー</title> <meta content="text/html; charset=shift_jis" http-equiv="Content-Type"> <link rel="stylesheet" type="text/css" href="sample3.css"> <script language="JavaScript" src="func.js"></script> </head> <body> （かなり長いので省略） <p> </p></body></html> これで「index.html」を実行しますと、 header 中身 と表示されます。 headerという文字ではなく、header.html 全部を表示し、かつスタイルシートも反映させたいのですが、どうすればいいですか？ 教えて下さい。 参考にしたＵＲＬ 各ページに共通したヘッダー(フッター)をつける http://tagland.net/technique/common_header.html
- ベストアンサー
- JavaScript
- 全ページに共通のヘッダーを設定する方法
こんにちは。 教えていただきたいのですが すべてのページに共通のヘッダーを効率よく設定する方法を知りたいです。 ちなみに設定するのは既存のサイトです。現在１ページごとに 作成していますがこれをすべて同じものを読み込む？ようにしたいのです。 一般的に、大規模なサイトのヘッダー部分のナビはどのように 作成されているのでしょうか。 javascriptで読み込んだり、ssiで読み込んだりすることもあると思いますが、 そのほかどんな方法があるのでしょうか？ dreamweaverの「ライブラリ」の機能を最近知ったのですが あれだともとのライブラリファイルに変更を加えたら、 サーバーアップ時にライブラリファイルだけではなく それを読み込んでいるファイルもアップしなおさなくては結果が 反映されないですよね。 なにか効率のよいやり方をご存知の方いらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLファイルのインクルードで文字化けしてしまう
下記のサイトを参考にHTMLファイルのインクルードを試したところ、 インクルードされた側のHTMLで文字化けしてしまいます。 http://tani.dank-hearts.com/2008/03/javascripthtml.html ↓の文字コード指定を記述してもダメでした。。。 <meta http-equiv="content-type" content="text/html;charset=shift_jis"> <script type="text/javascript" src="js/ajaxcodedisplay-or.js" charset="shift_jis"></script> 原因がわかる方いらっしゃいましたら、 ご教授お願いいたします。
- ベストアンサー
- HTML
- css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- ヘッダをJavaScriptで追加する方法
個人のWebサイトを運営している者です。 今まですべてのページのヘッダにナビゲーションバーを逐一記述していたのですが、これだとコンテンツの追加・削除があるたびにすべてのページのナビゲーションバーを書き直さないといけないのでめんどうです。 SSIを使えばよいのでしょうが、私が借りているサーバはSSIやCGIが使えないので、JavaScriptで代用できないものかと考えています。 JavaScriptのdocument.createElementを使えばタグの追加はできるようですが、HTMLの追加はできるのでしょうか？ ちなみに、ナビゲーションバーは <div id="header"> <ul> <li><a href="aaa.html">あああ</a></li> （中略） <li><a href="iii.html">いいい</a></li> </ul> </div> という感じです。
- 締切済み
- JavaScript
- HTMLの中にフッターを
HPの複数ページに共通するところ（ヘッダーとフッター、つまりナビゲーションなんですが）は、外部ジャバスクリプトを使っています。ただ、ジャバスクリプトをオンにしていない人が訪問すると、当然、ナビゲーションが表示されませんから、そのページからどこへいっていいかわからなくなります。だから、ページの一番下にトップページのURLと（C）2003といれてあるのですが、この2003というのは毎年変わるものなので、できれば１つの外部ファイルを作って、HTMLに挿入ということにしたいと思います。ただ、.js にすると、見れない人もいます。また、SSIを使うのも手間がかかって問題外です。なにか、そのほかのいい方法があれば教えてください。 ――説明、ちょっと長くなってすみません。
- ベストアンサー
- HTML
お礼
この場を借りて、皆様に感謝申し上げます。みなさま回答ありがとうございました。おっしゃる通りだと思います。相当調べたのですが、やはり難しいし、本来の目的にそぐわない手段であることが重々わかりました。これは無謀な方法だったということが分かったことも、一つ勉強になったと思います。ありがとうございました。