HTMLファイルのインクルード

拡張子がhtmlでphpが解釈できる様にする

拡張子がphpでも良いのですがhtmlの既存ページにインクルードを仕込みたかったので、htmlのままでphpが埋め込めるように環境を整える必要がありました。
.htaccessによる方法
※これは環境によって違いますので、利用しているサーバーの環境を認する必要あります。

<FilesMatch "\.html$">
  AddType application/x-httpd-php .html
</FilesMatch>
							

インクルードのphpのコード

<?php echo file_get_contents("～インクルードするファイル名～"); ?>
							

SSIは便利

<!--#include virtual="～インクルードするファイル名～" -->>
							

SSIをを有効にした場合には、SSIインジェクションで不正行為を回避するために、ブラウザから入力をさせるウェブアプリでは、かならずサニタイジングの考慮を行う注意が必要です。
その上で利用するならSSIは便利な機能ですが、サーバーに色々な担当者がコンテンツをアップしている場合は周知徹底する事をお忘れなく。
拡張子がhtmlのページにインクルードが仕込めるように環境を整えることをお勧めします。

.htaccessによる方法
※これは環境によって違い、利用中のサーバーの設定方法を確認する必要あり。

AddHandler server-parsed .html

AddHandler server-parsed .html

SEOとか全然気にしないページならこれも有り

JavaScriptで動的に共通部分をXHRで読み込んで、DOMに加える方法も有りです。
ただしSEO的にどうなのという気もしますので、SEOなんて気にしないと言うのであば選択肢の一つです。
WEBサーバーの設定でPHPやSSIの利用が出来ない場合の苦肉の策としても有効です。

HTMLをテンプレート化

共通HTML部分をテンプレート化して、Webpack等でバンドルする方法です。
利点はサバ―環境やフロントサイドでの小細工が不要なことです。

短所は共通HTMLテンプレートを埋め込むのが数ページなら良いのですが、ページ数が多いとビルド時間が長くなり、ちょこまかと調整＆確認を繰り返す時にストレスになります。
Webpackの後継でビルド時間が短くなるTurbopackやRspackの登場で、ビルド時間が短くなると言われていますが、まだ時期尚早かもしれません。

参考サイト：webpackで共通HTMLをテンプレート化

拡張子htmlでどっちが動くかで決める

拡張子がhtmlでphpが動く環境ならPHP、そうでないのならSSIです。
自分で管理しているサーバーならどっちなのかで決めれますが、そうでない場合はサーバー管理者に確認しましょう。

なぜ、拡張子がhtmlでPHPまたはSSIが動くように設定する

拡張子がphpやshtmlで利用するのが気持ち悪いだけの理由です。^^;

PHPとSSIの共存

SSIでインクルードして、PHPも組み込まれているページはどうなるんでしょう。
落書き人はそんな面倒そうな事はしませんので、その結果がどうなるかは試していません。^^;

サーバー管理の権限有無で判断する

PHPやSSIで行う方法は、サーバー管理も絡んでいます。
Webpackでバンドルする方法なら、HTMLコーダーの開発環境のみで完結できます。

JavaScriptで行う方法は？

SEO的にも不利ですので、共通部分を読み込み描画する様な用途では好まれません。
どちらかというとSPAで動的にページ内の描画を行うという用途が主です。

<link rel="stylesheet" href="～">>

linkでCSSをインクルードする

<link rel='stylesheet' href='css/～.css' type='text/css' media='all'>

<link rel='stylesheet' href='css/～_mobile.css' type='text/css' media="screen and (max-width: 600px)">
<link rel='stylesheet' href='css/～_pc.css' type='text/css' media="screen and (min-width: 601px)">

<link rel='stylesheet' href='css/～.css' type='text/css' id='chg_css'>

let lnkStyle = document.getElementById('chg_css');
lnkStyle.href = '/css/～.css';

@import url();

CSSの中でインポートする。

<style type="text/css">
	@import url("/css/～.css");
</style>

<link rel="stylesheet" href="～">>

JavaScriptのモジュールのページを参照。