HTMLをインクルードして共通化しよう！やり方と注意点を紹介

HTMLの共通部分をインクルード化することは、効率的にWebサイトを管理し、編集するために必須ともいえるスキルです。
そこで本記事では、HTMLのインクルード化についての概要と方法について紹介していきます。抑えておきたい注意点についても解説しているので、Webサイト制作にぜひ活用してください。

HTMLのインクルード化とは

まず、なぜHTMLでインクルード化する必要があるのかについて解説します。インクルードとは、プログラミングのときに「他のファイルの処理を、このファイルに取り込む」場合に使われる処理のことです。インクルード化することで、新しいWebページに作るたびに同じ処理を長々と書く必要はなくなります。

しかし、インクルード化する最大のメリットは、共通部分の記載箇所をまとめることで修正を簡単にできる点です。例えば、Webサイトのヘッダー部分に少し修正を加えるとなった場合、何百・何千と存在するWebページ全てに修正するのは現実的ではありません。もちろん、ミスも必ずといっていいほど起こります。そのため、Webサイト制作では、ヘッダーやフッター、サイドバーなどの共通部分はインクルードするのが常識です。
つまり、Webサイト制作においてHTMLのインクルード化は必要不可欠なスキルです。

HTMLでインクルードする方法

Webページのインクルード化をするとき、実はHTMLのみではできません。HTMLでインクルードするには、JavaScriptやPHP、SSIなどを利用します。また、WordPressなどのソフトの機能を使ってHTMLのインクルード化も可能です。
Webサイトが使っているサーバーやユーザー環境などによって最適な方法は変わってくるので、Webサイトに合った方法でHTMLのインクルード化をするようにしましょう。

JavaScript

JavaScriptとは、ブラウザ上に実行環境のあるスクリプト言語です。HTMLに埋め込むことができる言語では、定番のプログラミング言語です。人気の理由は、その使いやすさからきています。
ただし、ブラウザの設定でJavaScriptが無効になっていたり、JavaScriptにエラーが発生している場合には、上手く機能しない可能性もあります。一般的なユーザーを対象としたサイトであれば基本的に問題ありませんが、セキュリティ性の高いサイトや特定ブラウザ向けのサービスサイトの場合には注意が必要です。

JavaScriptでインクルード化するサンプルコードは次の通りです。

まず、header.js内にヘッダー部分を記載します。

次にHTMLファイル（index.html）から、header.jsを呼び出すことでインクルード化されます。
上記の実行結果は次のようになります。

PHP

PHPとは、JavaScript同様にHTMLに埋め込むときに使う定番のスクリプト言語です。JavaScriptの実行環境がブラウザ上にあるのに対し、PHPの実行環境はサーバー上にあります。そのため、ブラウザの設定や状態に影響を受けずにWebページの表示を行うことができます。
ただし、JavaScriptとは違い、PHPを使うには、PHPファイルに変換する手間がかかってしまいます。使いやすさではJavaScriptに軍配が上がります。JavaScriptが実行できない状況はほとんどありませんので、初心者はJavaScriptから始めると良いでしょう。

PHPでインクルード化するサンプルコードは次の通りです。

まず、header.php内にヘッダー部分を記載します。

次にHTMLファイル（index.html）から、header.phpを呼び出します。
上記の実行結果は次のようになります。

SSI（Server Side Include）

SSIとは、Webページの表示処理中にHTMLに組み込まれたコマンドを使って、インクルード化された状態のページを再現するWebサーバーの機能です。SSIは、JavaScriptのようにブラウザ環境に影響を受けず、PHPのようにファイルの変換も不要です。
ただし、SSIを利用するにはサーバーがSSIに対応している必要があり、サーバーの設定スキルも必要です。実際、レンタルサーバーの中には、PHPには対応していて、SSIには対応していない場合があります。レンタルサーバー利用者でSSIを使いたい場合、まずはサーバーがSSIに対応しているかを調べましょう。

SSIでインクルード化するサンプルコードは次の通りです。

まず、header.htmlでヘッダーに表示したい処理を書きます。

次に、header.htmlをindex.htmlにインクルード化します。
上記のindex.htmlをブラウザが読み込むと次の処理が実行されます。

WordPressなどのソフト

WordPressやDreamweaverなどのCMS（コンテンツ・マネージメント・システム）を利用している場合は、ヘッダーやフッターなどの共通部分のテンプレートが用意されていて、既にインクルードされた状態になっています。そのため、各ファイル内でインクルード処理を記載する必要はありません。
これからWebサイトを立ち上げるのであれば、WordPressなどのCMSを活用してインクルード処理を省くのも有効な手だといえます。

HTMLインクルード化の注意点

Webページの共通部分をインクルード化するときには、一部の処理をJavaScriptで制御しなければならないことがあります。JavaScriptで制御しなかった場合、開いたページの共通部分上で動作したアクティブ設定が他のページでも影響を与えてしまう危険性があります。
ホバー設定などはJavaScriptで制御して、インクルード化した共通部分が意図しない動作をしないようにしましょう。

まとめ

今回は、HTMLをインクルードして共通化する方法についてご紹介しました。
Webサイト制作において、Webサイトの保守性を高めるためにも、HTMLのインクルード化は必須といえます。特に、Webサイトのページ数が増えれば増えるほど重要性は増してきます。
各サイトに合った方法を使い、可能な限りHTMLの共通化を進めて、効率よくWebサイトを運営できるようにしましょう。