サイトマップ   お問い合わせ   このサイトについて   ホーム   
WEB制作支援
 HTMLリファレンス
 スタイルシート
 JavaScript
 PHP/データベース
WEBデザイン
 デザインテクニック
 素材集/テンプレート
 ウェブ配色の見本
 ユーザビリティ
WEB運営
 ウェブの開設と運営法
 アクセスアップの技
 アフィリエイト (WEB広告)
 ドメインとサーバー
特集・トピックス
 Web広告で収入を得る
 独自ドメインの利点
 使えるWeb作成ソフト
 Webデザイナーになるには
 SEOでアクセスアップ
 光ファイバーの導入
リンク集
 ウェブ作成リンク
 無料リンク
 オンラインソフトリンク
 ユーザーリンク
 ウェブコラム
 参考文献一覧
 サイトマップ
 このサイトについて
 お問い合わせ
 eWebホーム


Home >> HTMLタグリファレンス/Tips >> IFRAMEでヘッダとフッタを読み込む

IFRAMEでヘッダとフッタを読み込む



サンプルと機能

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

Sample: インラインフレームで呼び出す

この方法はNN4などの古いブラウザでは表示されません。
他にヘッダ・フッタ呼び出す方法としてJavaScriptがありますが、ユーザーのブラウザがJavaScriptを使えなければ表示されません。
確実に呼び出すにはSSIやPHPを使います。

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


サンプル・ソース

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

呼び出すファイル
<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
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
ヘッダの内容を書きます
</BODY>
</HTML>

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


解説・注意点など

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

参考タグリファレンス:インラインフレーム <IFRAME>


 
 

HTMLタグリファレンス/Tipsに戻る




 eWeb/ HTML/ スタイルシート/ Javaスクリプト/ PHP/ 素材集/ テクニック/ 配色/ ユーザビリティ/ 開設と運営/ アクセスアップ/ アフィリエイト/ ドメイン
Copyright(C) 2004. Aeu, Gundam, eWeb, HTML Tag Reference Samples Tips. All rights reserved. - Home