
1. HTMLの部品化とは
2000年代初頭に作成した昔風の静的サイトをカスタマイズするにあたり、対策の1つとして「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コードの例です。以下に示す機能があります。
①ヘッダー画像表示
②ヘッダー画像内にサイトロゴを表示
②ヘッダー画像内にサイトロゴを表示
1 |
図3-1 ヘッダー部品用のHTMLコード(header.html)
また、図3-2は、ヘッダー(header)スタイル用のCSSコードの例です。以下は、PC閲覧時専用のコードで、スマホ閲覧時は考慮していません。閲覧する端末を考慮したスタイルの指定については別途、記事にさせていただきます。
1 2 3 4 5 6 7 8 9 10 11 | header { position: relative; height: 35vh; font-size: 22px; background: url(image/AAA.jpg) center / cover; } |
図3-2 ヘッダー部品用のCSS(layout.css)
上記のHTMLとCSSのコードで、ヘッダー部分は図3-3のように表示されます。

4. 部品化したHTMLの読み込み
部品化したHTMLの読み込みには、jQueryを使用します。jQueryはWeb用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリで、どのブラウザでも使用できることから、広く使用されています。
具体的には以下の手順で、部品化したHTMLを読み込み、展開することになります。
①jQueryが公式に公開しているファイルパスを指定して、JavaScriptライブラリを読み込む
②部品化したHTMLを読み込む
③読み込んだHTMLを展開する
1 |
図4-1 部品化したHTMLの読み込みの例(通常ページのHTMLファイル)
6. まとめ
今回の記事では、部品化するHTMLの簡易な例と、それを読み込み、展開する方法についての内容となりました。さほど、難しいことを要求されるわけではないことをご理解いただけたと思います。

各部品(ヘッダー、サイドバー、フッター)を使用したサイトページのひな型をつくる手順については以下の記事をご覧ください。

部品化したヘッダー・サイドバー・フッターを使って【サイトページのひな型をつくる】
サイトページのひな型を作ってしまえば、コンテンツや記事を追加する際の手間が大幅に削減できるはず。 部品化したヘッダー・サイドバー・フッターを適切に配置して、ページひな型をつくることが目的です。
また、本記事で説明できなかったレスポンシブ対応の具体的な実装方法については以下の記事をご覧ください。

PCからでもスマホからでも、どちらでもOK!【レスポンシブなサイトをつくる】
レスポンシブなサイトとは? PCから見てもスマホから見ても文字や外観が崩れないようにするレスポンシブなサイトづくりについての説明です。
おわり
コメント