2012.09.02
ヘッダーやフッターを全ページ共通にする 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のソース
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”のようになります。
jsファイルをHTMLファイルと違う階層に置く場合は、
src=”ファイルのパス/javascript001.js”のようになります。
HTMLもずいぶんすっきりしますね。
JavaScriptで作ったheaderという関数をHTMLファイル内の好きなところに呼び出すことができます。
