メインページのヘッダーとフッターをサブページに読み込む

jQuery で、メインページのヘッダーとフッターをサブページに読み込むことで、メインページ側の変更がサブページにも反映される。

デモページを表示

CSS

補足

• サンプルではメインとサブの両方で同じスタイルを定義しているが、本来はメインページとサブページ共通のスタイルは外部ファイルに記述して、各ページで、その外部ファイルを読み込む。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• このサンプルでは、サブページ内に上記 jQuery を記述しているが、本来は複数のサブページ用に外部ファイルに記述して、各サブページで、その外部ファイルを読み込む。
• サブページのみ処理するために、サブページの body 要素に SUB-PAGE クラスをつけている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• メインページとサブページを区別するために、サブページの body 要素に SUB-PAGE クラスをつけている。