2012.09.02
javascript

ヘッダーやフッターを全ページ共通にする JS

ウェブサイトでは通常、ヘッダーやフッター、メニューなどは全部のページで同じだと思います。

例えばヘッダーに変更があった場合に、すべてのHTMLファイルを変更しなければならないのは、とても手間がかかります。

今回はJavaScriptを使った便利な方法を紹介します。

PHPを使った方法はこちら

この方法だと、ヘッダーなどを外部ファイルとして読み込み、その外部ファイルを変更すればすべてのページに変更を反映させることができます。
各ページで共通な部分に使うことができます。

簡単な例で説明します。

HTMLのソース

<div class="header">JavaScriptを使ってません。
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div class="content">内容が入る…</div>

CSSのソース

ul {
	padding:0;
}
li {
	float:left;
	list-style:none;
	display:block;
	padding:10px;
	width:80px;
	margin:10px;
	border:#756F61 2px solid;
	font-weight:bold;
}
.header {
	background:#FCEB9D;
	width:496px;
	height:auto;
	margin:0 auto;
	padding:40px 0 0;
	text-align:center;
}
.menu {
	background:#F7AABB;
	width:100%;
	height:55px;
	margin:0 auto;
}
.content {
	background:#AADAF2;
	width:496px;
	height:250px;
	margin:0 auto;
	text-align:center;
	padding-top:100px;
}

まずはJavascriptを使っていないサンプル。

JavaScriptなし

上記のソースを使って…

テキストエディタなどを使い新しいファイルに下記のように書き込みます。

JavaScriptのソース

function header() {
document.write ('<div class="header">JavaScriptを使ってます。\n');	
document.write ('<div class="menu">\n');	
document.write ('<ul>\n');	
document.write ('<li><a href="#">Home</a></li>\n');	
document.write ('<li><a href="#">About</a></li>\n');	
document.write ('<li><a href="#">Product</a></li>\n');	
document.write ('<li><a href="#">Contact</a></li>\n');	
document.write ('</ul>\n');
document.write ('</div>\n');
document.write ('</div>\n');	
}

これを拡張子がjsのJavaScriptのファイルで名前を付けて保存します。
今回はjavascript001.jsというファイル名で保存しました。

そしてHTMLは下記のように書き換えます。

HTMLのソース

<script>header();</script>
<div class="content">内容が入る…</div>

また、headの部分には保存した外部jsファイルを呼び出すために下記の記述をします。

<script language="javascript" src="javascript001.js"></script>
Memo:
jsファイルをHTMLファイルと違う階層に置く場合は、
src=”ファイルのパス/javascript001.js”のようになります。

HTMLもずいぶんすっきりしますね。
JavaScriptで作ったheaderという関数をHTMLファイル内の好きなところに呼び出すことができます。

JavaScriptあり

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP