Home
HTML
jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

公開日
2022.02.26
更新日
2022.07.09
jQueryでheaderとfooterを共通化する【load()メソッド】

どうも!かけちまるです!

いきなりですが、HTMLでWebサイトを制作するときにheaderのような全ページで共通な部分をどのようにしているでしょうか?

HTMLごとにheaderを書いていると変更があったときにページ数が多いほど変更箇所が多くなってきますよね。

なので、headerを共通化して変更があっても変更箇所を1か所にしましょう。

この記事では、

  • ・headerを共通化する方法
  • ・共通ファイルが読み込まれないときの対処法
  • ・階層が違うHTMLへの対応方法

がわかります。

Ajax通信を利用して共通化する方法もあります。
少し難易度は上がりますが、保守性はこちらの方が高いのでおすすめです。

headerを共通化する方法

簡単に説明すると外部HTMLをJavaScriptのload()メソッドで読み込むことで共通化します。

まずは、階層構造から説明します。
この記事では仮に次のような階層構造を想定して解説します。

階層構造
コピー
index.html(共通ヘッダーを読み込むHTML) header.html(共通用のヘッダー) css/ -style.css -reset.css images/

JavaScriptはindex.htmlに記述するとします。
header.htmlには各HTMLで読み込ませたい共通ヘッダーを記述します。

そして、index.html

  • header.htmlを読み込む場所
  • load()メソッドを記述し、header.htmlを読み込む

この2つを記述することで共通化することができます。

具体的なコードは次の通りです。

HTML
コピー
<body> <div id="header"><!-- ここにheader.htmlが読み込まれる --></div> <script> $(function(){ $('#header').load('./header.html'); // #headerにheader.htmlを読み込む }); </script> </body>

共通ファイルが読み込まれない時の対処法

load()メソッドで指定したファイルが読み込まれない時はどうすればいいのでしょうか?

jQueryを読み込んでいるか?

load()メソッドはjQueryを読み込まないと動作しません。

なので、jQueryを読み込みましょう。

jQueryダウンロード:https://jquery.com/download/

jQuery CDN:https://releases.jquery.com/

ローカルサーバを立ち上げる

load()メソッドはローカル環境では動作しないので、サーバーに上げて確認しないといけないのです。

でも、ローカルでも動作を確認したいと思います。
そんな時はVisual Studio Codeの拡張機能である「Live Server」というのを使うと簡単にローカルサーバーを立ち上げることができます。

Live Server」の使い方はこちらの記事で解説しています。

Visual Studio Code以外のテキストエディタを使っている方はローカルサーバを立ち上げる拡張機能がないか調べるか、MAMPやXAMPPを使うことで解決すると思います。

※筆者はVisual Studio Codeしか使ったことがないのでVisual Studio Code以外のテキストエディタのことはよくわからないのです。すみません…

階層が違うHTMLへの対応方法

headerやfooterが共通化できることは便利なのですが読み込むHTMLの階層が変わってしまうと画像やリンクのパスが切れてしまいます。

例えば、階層構造が次のような場合を想定します。

header.htmlで相対パスである./image/header_logo.svgで画像を読み込むとします。
header.htmlindex.htmlで読み込むと画像は正常に読み込まれますが、階層が違うabout.htmlheader.htmlを読み込むと画像が表示されなくなってしまいます。

階層構造
コピー
index.html(共通ヘッダーを読み込むHTML) header.html(共通用のヘッダー) about/ -about.html(共通ヘッダーを読み込むHTML) css/ -style.css -reset.css images/ -header_logo.svg

そんな状態を解決する方法をご紹介します。

絶対パスで記述する

header.html画像やリンクのパスをすべて絶対パスで指定することでheader.htmlの読み込む先のHTMLの階層が変わってもリンク切れが防げるようになります。

この方法のメリットとしては、対応が簡単というものです。

デメリットもあります。

デメリット
  • ・画像は先に本番環境に上げておかなければならない
    →自分で本番環境を操作できない場合に不便
  • ・新規案件では、リンク先設定が正常か確認できない
    →新規案件では本番環境にファイルが上がっていない

JavaScriptでURLを取得し処理を分岐する

次の階層だった時の場合を考えます。

階層構造
コピー
index.html(共通ヘッダーを読み込むHTML) header.html(共通用のヘッダー) about/ -about.html(共通ヘッダーを読み込むHTML) css/ -style.css -reset.css images/ -header_logo.svg

header.html./images/header_logo.svgを読み込みたいとします。
inde.htmlでは、./images/header_logo.svgで画像が正常に読み込まれます。
about.htmlでは、../images/header_logo.svgで画像が正常に読み込まれます。

なので、次のJavaScriptでURLを取得し処理を分岐する事でリンク切れを防ぐことができます。

JavaScript
コピー
let path = location.pathname.split("/")[1]; switch(path){ case 'index.html': $('img').attr('href', './images/header_logo.svg'); break; case 'about': $('img').attr('href', '../images/header_logo.svg'); break; default: $('img').attr('href', './images/header_logo.svg'); }

URLを取得する方法の詳細はこちらの記事で解説しております。

まとめ

サイトの各ページに記述する部分を共通化することで保守性がグンッと上がります。
全ページに変更しに行かなければいけなかったのが共通化することで1か所を修正するだけでよくなります。

headerやfooterだけでなくサイドバーやバナーなどにも使えそうなので活用していただければと思います。

Ajax通信を利用して共通化する方法もあります。
少し難易度は上がりますが、保守性はこちらの方が高いのでおすすめです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

Linuxパーミッションの変更方法

Linuxパーミッションの変更方法

記事の目次にカレント表示機能を導入する😤

記事の目次にカレント表示機能を導入する😤

gsapのstaggerで順番にアニメーションさせる方法

gsapのstaggerで順番にアニメーションさせる方法

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装