HTML&CSS

SSIでHTMLファイルをインクルードする

HTML&CSS

SSIとは「 Server Side Include 」の略になります。
HTMLのヘッダーやフッターを外部ファイルとして読み込みたいときに使います。

SSIを使用するには契約しているサーバーのSSIが許可されている必要があります。
もし使用できない場合はサーバーがSSIに対応しているのか確認をしてください。

.htaccessファイルにSSIを有効にするコードを記述する

Options +Includes
AddHandler server-parsed html

.htaccessファイルに上記コードを記述して、サーバーにアップロードしてください。
1行目の「 Options +Includes 」はSSIを使えるようにする記述で、2行目の「 AddHandler server-parsed html 」はHTMLファイルに対してSSIを有効にするという記述になります。

HTMLファイルにインクルードするコードを記述する

インクルードするコードをHTMLファイルに記述しますが、読み込み方法が2種類あります。
次に説明する「 file 」、もしくは「 virtual 」を使います。

file

<!--#include file="include/header.html" -->

file 」は上層のディレクトリを読み込むことができません。
同階層もしくは下層ディレクトリのファイルを読み込むことができます。
以下、参考コードを記載します。

  • 同階層を読み込む場合「 file=”header.html
  • 下層ディレクトリを読み込む場合「 file=”include/header.html

virtual

<!--#include virtual="/include/header.html" -->

virtual 」は上層のディレクトリや絶対パスを読み込むことができます。
以下、参考コードを記載します。

  • 上層ディレクトリを読み込む場合「 virtual=”../include/header.html
  • 絶対パスで読み込む場合「 virtual=”/include/header.html

あなたにおすすめの記事