【静的サイト制作】HTMLを部品化する【ヘッダー・サイドバー・フッター】

　Webサイトの製作に限らず、どのようなシステム開発に於いても、機能の部品化は、製作、運用における労力とコストの両面からみて重要なことです。WordPressなどのツールを使用してWebサイトを構築、運用する場合は、不要な知識となるかもしれませんが、0からWebサイトを構築して立ち上げる場合は必須となるスキルだと思います。

　この記事では、Webサイト制作における機能の部品化(HTMLの部品化)についての考え方、具体的な方法について説明します。

1. HTMLの部品化とは
 2. ファイル構成
 3. HTML部品化の例(ヘッダー)
4. 部品化したHTMLの読み込み
 5. まとめ

1. HTMLの部品化とは

　2000年代初頭に作成した昔風のWebサイトをカスタマイズするにあたり、対策の１つとして「HTMLの部品化」を実施しています。全体の概要とカスタマイズの内容については、以下の記事をご覧ください。

【静的サイト制作】古いWebサイトをカスタマイズ【HTML部品化・レスポンシブ対応】

2000年代初頭に作成した古い静的なWebサイトを現代風の外観、機能となるようにカスタマイズした記録です。

　HTMLの部品化は、図1-1の「カスタマイズ後のページ構成」の中の、ヘッダー、サイドバー、フッターを対象に、以下の手順で行います。

①ヘッダー、サイドバー、フッター専用のHTMLファイルを作成する

②通常のページ用HTMLファイルに、各部品専用のHTMLを読み込むための簡易なコードを記述する

図1-1 カスタマイズ後のページ構成

　これにより、複数ページで、共通の機能を持った部品を使いまわせます。仮に、部品化した機能を変更することがあった場合でも、各部品用のHTMLファイルのみを変更することで、対象機能をもつ全てのページに対して変更を反映させることができるようになります。

2. ファイル構成

　ヘッダー、サイドバー、フッターの各専用HTMLファイルは、図2-1に示すように配置しています。root直下でもいいのですが、共通部品であることがわかるようにcommonディレクトリの下に配置するようにしてあります。

図2-1 ソースコードのディレクトリ構成

3. HTML部品化の例(ヘッダー)

　図3-1は、ヘッダー部品用のHTMLコードの例です。以下に示す機能があります。

①ヘッダー画像表示
②ヘッダー画像内にサイトロゴを表示

<!-- HEADER  -->
<header style="background-image:url(image/AAA.jpg)">　　　・・・➀
    <h1><a href="index.html"><img src="image/AAA_logo.jpg" alt="main.hirokami1024.com"></a></h1>　・・・➁
</header>

図3-1 ヘッダー部品用のHTMLコード(header.html)

　また、図3-2は、ヘッダー(header)スタイル用のCSSコードの例です。以下は、PC閲覧時専用のコードで、スマホ閲覧時は考慮していません。閲覧する端末を考慮したスタイルの指定については別途、記事にさせていただきます。

header {
	position: relative;
	height: 35vh;
	font-size: 22px;
	background: url(image/AAA.jpg) center / cover;
}

図3-2 ヘッダー部品用のCSS(layout.css)

　上記のHTMLとCSSのコードで、ヘッダー部分は図3-3のように表示されます。

図3-3 ヘッダー部分の表示

4. 部品化したHTMLの読み込み

　部品化したHTMLの読み込みには、jQueryを使用します。jQueryはWeb用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリで、どのブラウザでも使用できることから、広く使用されています。

　具体的には以下の手順で、部品化したHTMLを読み込み、展開することになります。

①jQueryが公式に公開しているファイルパスを指定して、JavaScriptライブラリを読み込む

②部品化したHTMLを読み込む

③読み込んだHTMLを展開する

<!DOCTYPE html>
<head>
    <script type="text/javascript" charset="UTF-8"></script>
    <link rel="stylesheet" href="css/layout.css">
    <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>　　・・・➀
    <script>
    //共通パーツ読み込み
    $(function() {
        $("#header").load("common/header.html");　　　・・・➁
    });
    </script>
</head>
<body>
<!-- HEADER  -->
<div id="header"></div>　　　　・・・➂　　　　　　　　　　　　　　　　　　　　　　
　　// 省略
</body>

図4-1 部品化したHTMLの読み込みの例(通常ページのHTMLファイル)