【jQuery】htmlで共通の部分をパーツ化したい

エンジニア

複数のページのサイトを作っていると、ヘッダーやフッターなど全ページ共通の内容が出てきます。

各ページ毎作っていると、テキストやurlの変更等、修正があった時全てのページで修正をしないといけないので、だいぶ面倒です。

メンテナンスのことも考えると、一つのページにまとめて管理したいですよね。

いろいろな方法があると思いますが、今回は「jQuery」を使います。
とても簡単です!

  • まずは、普通にヘッダー・フッターを作ります。(index.html)
  • ファイルを複製して、header.html、footer.htmlを作ります。
  • それぞれの中身は、ヘッダー・フッターに必要なブロックだけでOK!
  • index.htmlの中身は<header></header><footer></footer>のタグだけ残して空に!
  • 最後にjs側に下記のコードを追記する。
$(function(){
  $("header").load("header.html");
  $("footer").load("footer.html");
});

これでできました!

読ませる順番が違っていると先に設定したヘッダーのアクティブ化が効かなくなるので注意です。
header.htmlに直接scriptを書いてしまっても良いかもです。

読み込むパスに気をつけてください。
パーツ化したファイルの保存階層からのディレクトリではなく、読み込んだページからみたパスの記述になります。

ヘッダーやフッター以外でも利用できるので、管理がしやすくなりますね!
それではまた。

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


TOP