HTML+CSSデザインのモジュール化

etc php

たとえば、スタティックなページと、複数のＷＥＢアプリのページでデザインを同じにしたいなんてことが良くありますよね。その際、コピーペーストでやるのを避けるには、HTML+CSSデザインのモジュール化をしておかなければなりません。

モジュール化って言うのは何かというと、たとえばナビゲーションメニューであれば、ナビゲーションメニューのところだけを独立してHTMLを書いて、それをメインのページからインクルードしてページ全体を構成するという方法です。

それを実装するにあたり、HTMLページの構成要素を見てみると、

  1. HTML ページ
  2. CSS
  3. 画像

と3つからなります。

ですので、上述のナビゲーションメニューであれば、

  1. navi.html
  2. navi.css
  3. images/navi/*.png

というように、グループ化しつつ、メインページとは独立して書いてやればいいということになります。

（ナビのコンテンツが複数ある場合も多いだろうって？そういうときには、どうするのかというと、htmlページをテンプレートにして、コンテンツを外部から流し込めばいいのですよ。）

これを、メインページからどう読むかというと、PHPを使って

<link rel="stylesheet" href="navi.css" type="text/css" />
....
<?php include 'navi.html'; ?>

ということになるでしょうか。
ここで、ちょっと面度くさいのが、HTMLページだけでなく、対応するCSSも忘れずに呼ばないといけないということですね。大規模なサイトをこういう方法で構成するのであれば、HTMLページをインクルードすると対応するCSSも自動で呼んでくれるようなテンプレートシステムでも作ると便利だと思います。