静的サイトをカスタマイズ【HTMLの部品化と適用の仕方】

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

1. HTMLの部品化とは

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

古いウェブサイトを現代風デザインにカスタマイズ【HTML部品化とスマホ対応】

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

　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ファイル)