各ページに共通したヘッダー(フッター)をつける
JavaScriptの「document.write()」を利用するとHTML文書中にテキストを書き出すことができます。これを使って、各ページに共通したヘッダー(フッター)をつける方法をご紹介します。
このサンプルの上部にあるリンク部分(ヘッダー)と、下部にある引用元のリンク(フッター)には、script要素の記述があるのみで、実際に表示されるHTMLのタグは書かれていません。
<script type="text/javascript" src="s_header.js"></script>
■フッター部分
<script type="text/javascript" src="s_footer.js"></script>
これは、script要素のsrc属性で指定しているURIより外部スクリプト(ここでは、s_header.js と s_footer.js)を取得しているからです。type属性に"text/javascript"を記述することで、この外部スクリプトがJavaScript言語であることを指定します。
拡張子を「js」にしたファイルを作成し(ここでは、s_header.js と s_footer.js)、これをテキストエディタで開いて実際に表示させるHTMLのタグを「document.write()」を用いて記述します。
document.write("<p><a href=\"s_common_header1.html\">コスモス</a> / <a href=\"s_common_header2.html\">チューリップ</a> / <a href=\"s_common_header3.html\">バラ</a></p><div style=\"height:50px;\"></div>"); … ①
■フッター部分 (s_footer.js)
document.write("<div style='height:50px;'></div>"); … ②
document.write('<p style="text-align:right;">この文章は「<a href="http://ja.wikipedia.org" target="_blank"><cite>wikipedia</cite><img src="../img/jump.gif" width="12" height="10" border="0"></a>」より引用しています。</p>'); … ③
「document.write()」は、document.write("表示させるHTMLタグ") のように、「"」で挟んでHTMLのタグを記述するため、その内容となるタグに用いている「"」は直前に「¥」を用いてエスケープする (①の行) か、「'」を用いて記述 (②の行) します。
document.write('表示させるHTMLタグ') のように、「'」で挟んで記述すると、その内容となるタグは「"」を用いて記述 (③の行) できます。
「document.write()」の一文の途中で改行があるとエラーになりますので、全てを改行なしで続けて記述します。複数行で記述する場合には、それぞれの行に「document.write()」を記述 (②と③の行) します。
外部スクリプトファイルを作成し、表示したいHTML文書内にscript要素を記述し終えたら必ず表示確認をします。これは、日本語の文字コードと英語の文字コードの間に問題があるため、書き出された文字が文字化けをおこしてしまう可能性があるからです。文字化けを起こした場合には、その文字に対して「¥」を用いてエスケープする方法もありますが、script要素のcharset属性に文字符号化方法を指定してやる方が簡単です。
ここで用いているs_header.jsとs_footer.jsは「Shift_JIS」で記述しているので、上記サンプルのscript要素は以下のような記述になります。
<script type="text/javascript" src="s_header.js" charset="Shift_JIS"></script>
■フッター部分
<script type="text/javascript" src="s_footer.js charset="Shift_JIS"></script>
このように、JavaScriptの外部スクリプトを用いてヘッダー(フッター)を表示させるようにすれば、とても手軽で便利なのですが、サイトを訪問するユーザの中にはJavaScriptの実行をしないように設定している方もいるでしょうし、ユーザエージェントによってはJavaScriptが実行されないものがあります。このとき、リンクの部分を全てJavaScriptで記述していると、これらの方々にはリンクを辿ることが全く出来なくなってしまいますので注意が必要となります。
JavaScript以外で同じようにヘッダー(フッター)などを表示させる方法の一つに「SSI(サーバーサイドインクルード)」を用いる方法もありますので、解説されているサイトを探してみてくださいね。
関連ページ
