サイトの全てのページの上下（ヘッダ・フッタ）を同じデザインにする場合、１つのHTMLファイルを用意しておき、それを各ページから呼び出す方法があります。
この方法の利点は、１つのファイルを修正するだけで全てのページにそれが適用されることにあります。
ヘッダにはサイトのタイトルを、フッダにはCopyrightなどを表記するといいでしょう。

→ Sample 1: JavaScriptで呼び出す場合
→ Sample 2: インラインフレームで呼び出す場合

どちらで呼び出すかは好みですが、JavaScriptで呼び出す場合は、ユーザーのブラウザがJavaScriptを使えなければ表示されませんし、インラインフレームで呼び出す場合はNN4などの古いブラウザでは表示されません。

（ちなみに、このサイトの場合は、上記の方法を使用せず、全てのページに同じ記述をしています。）

Sample1 サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

→ 呼び出すファイル（Sample 1: JavaScriptで呼び出す場合）

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<SCRIPT src="header.js"></SCRIPT>
本文を書きます
<SCRIPT src="footer.js"></SCRIPT>
</BODY>
</HTML>

→ header.js（改行不可、Sample 1: JavaScriptで呼び出す場合）

document.write('<TABLE border="0" bgcolor="#0000ff" width="600" cellspacing="0" cellpadding="0" height="40"><TR><TD> <FONT color="#ffffff" size="4">ウェブデザインテクニックのページ</FONT></TD></TR></TABLE>')

→ footer.js（改行不可、Sample 1: JavaScriptで呼び出す場合）

document.write('<TABLE border="0" bgcolor="#0000ff" width="600" cellspacing="0" cellpadding="5" height="25"><TR><TD align="right"><FONT color="#ffffff" size="2">Copyright(C) 2004. All rights reserved.</FONT></TD></TR></TABLE>')

Sample2 サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するソースです。
"/* */"内はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。

→ 呼び出すファイル（Sample 2: インラインフレームで呼び出す場合）

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<IFRAME src="header.html" name="header" width="600" height="40" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></IFRAME>
本文を書きます
<IFRAME src="footer.html" name="footer" width="600" height="25" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></IFRAME>
</BODY>
</HTML>

→ header.html（Sample 2: インラインフレームで呼び出す場合）

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
ヘッダの内容を書きます
</BODY>
</HTML>

→ footer.html（Sample 2: インラインフレームで呼び出す場合）

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
フッタの内容を書きます
</BODY>
</HTML>

解説・注意点など

拡張子が"js"のファイルは、改行すると上手くいかない場合があります。
また、内容にシングルクォーテーション「'」を使わないで下さい。

呼び出すファイルを指定する時のパスは、階層などを間違わないようにして下さい。
面倒な人は"http://aeu.jp/header.js"のように絶対パスを使うことをお勧めします。

← Webデザインテクニックに戻る

eWeb