PHPがわからなくてもオッケー。HTMLをPHPにして共通パーツを外部読み込みする。

Webデザイナーの平尾誠です。

例えばヘッダーとかフッターは全ページ共通のパーツだったりしませんか?

たくさんのページで使われる同じソースコードは、コンポーネント化してインクルードしましょう。

PHPを使いますが、理解してなくてもオッケーです。

コンポーネント化とは、同じソースコードをファイル化して外部ファイルとして読みこむことです。
外部ファイルとして読み込むことをインクルードと言います。

要するに、理屈はCssを複数ページで読み込ませるのと同じです。
そうすることで、共通パーツを読み込んだページ全てにHTMLの変更をかけることができます。

PHPが動くようにする

PHPはHtmlのようにそのままではデスクトップで表示されません。
まずはローカルにPHPが動く環境を作らないといけません。

MAMPを使うと良いです。

参考はこちら
MAMPの初期設定 – MAMPの使い方

phpをincludeする

まずはファイル名をindex.htmlからindex.phpにしましょう。
これでphpファイルとして使用することができます。

例えば、ナビゲーション部分は全ページで一緒だったりしますよね。
これをheader部分のHTMLを、PHPの別ファイルにします。
今回はheader.phpと名前をつけました。

元のindex.htmlはこんな感じ

PHPに置き換えます

長かったソースコードをコンパクトにまとめます。
さっきのindex.htmlの拡張子をindex.phpに変更します。
長かったheaderの中身を別のheader.phpに記述して、外部読み込みします。

読み込み先のheader.php中身はこんな感じですね。

まとめ:PHPでコンポーネント化して高速化

こうやって機能ごとに分けたソースコードをまとめて外部読み込みさせることを、コンポーネント化っていいます。

みなさんも時短に活用してください。

ほなね。