各ページに共通したヘッダー(フッター)をつける

HTMLページに共通したヘッダーやフッターを表示させることができます。
以前、このページにもヘッダーをつけていました。　

　←コレです。
コンテンツごとに色を分けたり、リンク部分を変えていたりしたのですが、これはページ内にタグを書いているわけではありません。
「ソースを表示」させてみてもその部分のタグは表示されません。
そのかわり、以下のソースが表示されます。
<SCRIPT language="JavaScript" src="xxxxx.js"></SCRIPT>
これは、"xxxxx.js"というファイル内にヘッダーとして表示させたいタグを書き、JavaScriptを使って表示させているのです。
この方法を使うと、"xxxxx.js"というファイルを修正するだけで各ページのヘッダーを変えることができます。
ページ数が多いときや、同じヘッダーを各ページに表示させたいときには大変便利な手法だと思います。
また表示させる場所によってフッターにさせることもできますし、フレーム分けにしないでメニューを表示させることも出来ます。

では、まずヘッダーとして表示させる「jsファイル」を作成します。
名前は何でも構いませんが拡張子だけは「.js」として、テキストエディタ(NotePadや秀丸など)で開きます。

この中に表示させたいタグを書いていきます。

	1.		jsファイル内の全体を「document.write("」と「");」で挟み、全てを1文(1行)で記述します。間に改行があるとエラーになってしまうので気をつけてください。
	2.		「"」(ダブルクウォーテーション)の前には必ず半角の「\」をつけます。これを一箇所でも忘れると正しく表示されなくなってしまいます。(普通にタグを書いたあとに「"」を「\"」に一括置換するといいです) ただし、「document.write("」と「");」の、「"」を「'」で記述すると、「\」は不要です。(こっちの方が楽ですね) また、「'」にした場合、カッコ「 ( と ) 」の中に「'」があるとエラーとなりますので、「'」の前に「\」をつけてください。

あとは、表示させたいページの表示させたい部分に
<SCRIPT language="JavaScript" src="xxxxx.js"></SCRIPT>　を記述します。
「xxxxx.js」に作成したjsファイルを絶対パスまたは相対パスで指定します。
上記のScriptタグの記述場所によってはレイアウトが崩れてしまうかもしれないので、必ずブラウザで正しく表示されるかどうかを確認してくださいね。

　jsファイル内のエンコードと、jsファイルを設置するページのエンコードが違う場合
jsファイル内のエンコードと、jsファイルを設置するページのエンコードが違う場合、文字化けをおこしてしまいます。例えば、「UTF-8」で書かれているページに「Shift_JIS」のjsファイルを設置する…などです。
そのほかに、Googleなども「UTF-8」のため、jsファイルがその他のエンコードであれば、検索結果に文字化けしたものが表示されてしまいます。このような現象を回避するため、SCRIPT要素にcharset属性を指定します。
<SCRIPT language="JavaScript" src="xxxxx.js" charset="Shift_JIS"> </SCRIPT>
charaset="Shift_JIS"の部分の、「Shift_JIS」は、作成したjsファイルのエンコードを指定してください。

2008.10.01追記


	ここにヘッダーとフッターをつけてみました。便利なので使ってみてくださいね。


	■　HTMLソース <SCRIPT language="JavaScript" src="header.js" charaset="Shift_JIS"></SCRIPT> <P>ここにヘッダーとフッターをつけてみました。<BR> 便利なので使ってみてくださいね。</P> <SCRIPT language="JavaScript" src="footer.js" charaset="Shift_JIS"></SCRIPT> ■　header.jsの内容　(途中で改行されてしまいますが改行はしないで1行で記述します) ・その1　(「"」で記述した場合) document.write("<TABLE width=\"100%\" cellpadding=\"5\" cellspacing=\"0\"><TR><TD bgcolor=\"#ccccff\">ヘッダーです</TD></TR></TABLE>"); ・その2　「'」で記述した場合) document.write('<TABLE width="100%" cellpadding="5" cellspacing="0"><TR><TD bgcolor="#ccccff">ヘッダーです</TD></TR></TABLE>'); ■　footer.jsの内容　(1行で記述します) document.write("<BR><HR>フッターです");