HTML 複数ページで共通になる部分はインクルードする

HTML 複数ページで共通になる部分はインクルードする

複数のHTMLファイルで共通になる部分はファイルを部品化したパーツとして扱いインクルードすると、修正するファイルが少なくできるので作業効率が良くなります。

サイトのヘッダー、フッター、サイドバーを共通になる部分としてPHPとjqueryでインクルードするやり方を説明します。

 

HTMLの複数ページで共通になる部分

 

HTMLで複数のページを作成するときの共通になる部分はヘッダーとフッターになることが多いです。

特にヘッダーはサイト内で、どのページに移動したとしてもファーストビューでサイト名や主要なサイトメニューを置きサイトの顔にすることが多いため、複数のページで共通になる部分として作成することができます。

フッターはページのHTML構造上コピーライトが入ることが多いかと思います。

コピーライトは年が変わったら西暦を修正するくらいのものかと思いますが、一部分の修正を複数のページで行うよりは、共通になる部分として部品化しておき一箇所で修正できるほうが効率的です。

またサイトを2カラムや3カラムの構造をHTMLで作るならサイドも共通になる部分として検討ができます。

これらはHTMLの複数ページで共通になる部分を決めるひとつの例ですが、共通部分はHTMLファイルを分割して部品化し、複数のページそれぞれにインクルードすることになります。

 

Advertisement

 

共通になるHTMLを部品化

 

HTMLの複数ページで共通になる部分をインクルードするときには、まずウェブサイトで共通になるHTML構造の部分を部品化します。

ヘッダーとフッター、そしてサイドを部品化する場合を例にします。

 

<body>
    <header></header>
    <div class="wrapper">
        <div class="main"></div>
        <div class="side"></div>
    </div>
    <<footer></footer>
</body>

 

上記のHTML構造では、body要素にHTMLのheader要素がヘッダーとしてマークアップしてあり、footer要素がフッターとして、sideクラスを付与したdiv要素がサイドとしてマークアップしたHTML構造になっています。

header要素とfooter要素、そしてsideクラスを付与したdiv要素の3つの要素を複数ページで共通になるHTMLの部分として部品化するために「header.html」「footer.html」「sidebar.html」の3つのHTMLファイルを作成します。

作成した3つのHTMLファイルは部品化するタグ名と統一したファイル名にすることで分かりやすしておき、それぞれの要素を各HTMLファイルにコピペします。

 

  • header.htmlに<header></header>
  • footer.htmlに<footer></footer>
  • sidebar.htmlに<div class=”side”></div>

 

header要素、footer要素、sideのdiv要素をコピペした3つのHTMLファイルはpartsなどのフォルダ名にしたフォルダにまとめて入れておき、サーバーにアップします。

 

Advertisement

 

共通になるHTMLを部品化すると、元のHTMLファイルのbody要素内部にはwrapperクラスを付与したdiv要素とmainのdiv要素だけが残ります。

 

<body>
    <!--heade要素があった部分-->
    <div class="wrapper">
        <div class="main"></div>
        <!--sideがあった部分-->
    </div>
    <!--footer要素があった部分-->
</body>

 

上記のHTMLにheaderがあった部分とsideがあった部分、footer要素があった部分の3箇所にコメントアウトがありますが、この3つのコメントアウトした位置に共通になるHTMLとして部品化したHTMLファイルをインクルードします。

 

HTMLの共通部分をPHPでインクルード

 

部品化した共通部分のHTMLファイルはPHPでインクルードします。

 

HTMLの共通部分をPHPでインクルードするための事前確認

PHPはWebサーバーで動作します。使用するWebサーバーでPHPが.html拡張子のファイルで使えるようになっているかを確認し、必要なら.htaccessへの記述を行います。

エックスサーバーになりますが以下の記事を参考にしてください。

エックスサーバーでPHPをHTMLファイル内で使えるようにする

 

インクルードは「含まれる」とか「取り込む」の意味があります。

今回で言えば、複数のページで共通になる部分を切り分けて部品化したHTMLファイル達をパーツと考え、パーツをHTMLの複数ページの必要な位置に「含める」または「取り込む」ということになります。「組み込む」と表現すると分かりやすかもしれせんね。

 

Advertisement

 

PHPでHTMLの共通部分をインクルードするときにはinclude関数を使用して呼びだ出し元のHTMLファイルに以下のように記述をします。

 

<body>
    <?php include('parts/header.html'); ?>
    <div class="wrapper">
        <div class="main"></div>
        <?php include ('parts/sidebar.html'); ?>
    </div>
   <?php include ('parts/footer.html'); ?>
</body>

 

header、footer、sideをマークアップしていた元々の記述位置にPHPのinclude関数を記述しています。

そしてinclude関数の引数には、複数のページで共通になる部品化したHTMLファイルのパスを指定します。

HTMLの共通部分をPHPでインクルードできたかリスト要素を各共通部分のHTMLファイルに記述して表示確認すると、以下の画像のようにひとつのページとして問題なく表示できます。

 

 

ヘッダーとフッターとサイドバーを複数ページで共通化するために部品化したHTMLファイルなので、サイトの複数ページで共通化したいページの表示位置にPHPのinclude関数で共通パーツを読み込めば、パーツファイル内に記述したHTMLが、呼び出し元の複数のHTMLファイルに組み込まれます。

 

HTMLの共通部分をjqueryで読み込む場合

 

HTMLの複数ページで共通になる部分をインクルードするときにjqueryでコンテンツを読み込む場合のやり方も説明します。

jqueryはクライアント側でHTMLの共通部分を読み込むことができます。そのためHTMLの共通部分をPHPでインクルードするときのようにWebサーバーの環境を確認する必要はありません。

jqueryですのでjquery本体をheadで読み込んでおくことをお忘れなくです。

 

<body>
    <header id="header"></header>
    <div class="wrapper">
        <div id="main">複数ページごとのメインコンテンツ</div>
        <div id="side"></div>
    </div>
    <footer id="footer"></footer>
<script>
//共通パーツ読み込み
$(function () {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>
</body>

 

HTMLの複数ページで共通部分をjqueryで読み込む場合の具体的なやり方は、まずHTMLの複数ページで共通化して表示したい要素にid属性を記述してid属性値にid名を指定します。

たとえばサイトで共通のヘッダーコンテンツを表示したい場合では、header要素の開始タグにid=”header”のように指定します。

次にscript要素を</body>直上に記述します。script要素内ではfunctionで実行する処理を、共通部分を読み込む要素に指定したidと紐付けます。

最後にjqueryのloadに、共通部分に使うために作成してサーバーにアップしたHTMLファイルのパスを指定します。

 

 

表示の結果としては、PHPのinclude関数で共通になる部分を複数のページにインクルードするのと同じ結果を得られます。このときHTMLファイルをローカルでブラウザを選択して表示するだけでは共通部分をjqueryのloadは読み込めないのでWebサーバーにアップしているHTMLファイルで表示します。

 

まとめ

 

HTMLの複数ページで共通になる部分はインクルードすることができるのが、なんとなくでも理解してもらえれば良いなと書いた今回の記事。

サイトに複数のページがあり、共通する部分をパーツにしてインクルードする参考や良い使用例としてはWordPressだと思っています。

WordPressはサイトのページを分割したテンプレートパーツをPHPでページに組み込み動的にページを表示します。

そのため、複数ページで共通になるHTMLの部分をPHPでインクルードした場合には、既に複数のページで共通化して使うパーツファイルにしているため、HTMLサイトを今後WordPress化するときに、多少WordPress化の作業は楽になると考えられます。

まだ試せていないので考えを述べるだけにして、この記事のまとめにします。

HTMLカテゴリの最新記事