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

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

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

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

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

簡単な例で説明します。

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のソース

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>

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