部品化したヘッダー・サイドバー・フッターを使って【サイトページのひな型をつくる】

 

1. サイトページのひな型をつくる

 サイトのコンテンツが増えていくにともない、ページ数も増えていくことになります。ページを追加する際に、全てのページで共通に使える機能が組み込まれている「ひな型」があれば、これをベースにページ固有の内容をつくりこむことで追加するページが完成します。

 本記事では、上記のようなひな型のことを「サイトページのひな型」とよびます。

 サイトページのひな型をつくる際に使用する「部品」についてですが、前回の記事で、主にヘッダーの部品化と、部品の読み込み手順について書かせていただきました。詳しくは、以下の記事をご覧ください。

 

古いウェブサイトをカスタマイズ【HTML部品化と適用の仕方】
記事の内容: ・HTMLの部品化とはどういうことなのか? ・どのような利点があるのか? ・具体的にどうすればいいのか?

 

 ヘッダーの他、サイドバーフッターといった部品をページの固定位置に配置することによって、図1-1のような構成のサイトページのひな型をつくることができます。

 

図1-1 ひな型とするページ構成

 

 一度、サイトページのひな型をつくってしまえば、コンテンツや記事を追加していく場合、図1-1のメインコンテンツ部分をつくりこむだけの作業となります。

 

2. サイトページひな型の作成例

 図2-1は、簡易なサイトページひな型のHTMLコードの例です。コード内番号の説明は以下のとおりです。

 ポイントは④の枠内に、メインコンテンツ部分とサイドバーを並べて配置するという点になります。

①jQueryが公式に公開しているファイルパスを指定して、JavaScriptライブラリを読み込む
②jQueryでヘッダー、サイドバー、フッターの各部品を読み込む

③ヘッダー部品の展開
④メインコンテンツ部分とサイドバーを並べて配置するための枠(id=”inner-content”)
⑤サイドバー部品の展開、サイドバーはメインコンテンツ部分の右隣に配置される
⑥フッター部品の展開
 
図2-1 サイトページひな型のHTMLコード例(page.html)
 
 
 図2-2は、部品化したヘッダーのHTMLコードの例です。以下例では、ヘッダ画像、サイトロゴ(リンク付)を表示する機能があります。
図2-2 ヘッダー部品のHTMLコード例(header.html)
 
 
 図2-3は、部品化したサイドバーのHTMLコードの例です。サイドバーの表示項目には、サイト内検索窓、おすすめ記事、リンク、広告などがあります。

図2-3 サイドバー部品のHTMLコード例(sidebar.html)

 

 図2-4は、部品化したフッターのHTMLコードの例です。フッターの表示項目には、コピーライトなどがあります。

図2-4 フッター部品のHTMLコード例(footer.html)

 

 図2-5は、ページひな型HTML、各部品HTML用のスタイルシートコード例です。数値等は、各サイトのスタイルに合わせて決めてください。

 メインコンテンツ部分となるmain要素に「float: left;」を指定して左寄せにします。また、次要素(サイドバー)には「float:right;」を指定して右寄せにして、2つの要素が横並びになるようにします。

図2-5 サイトページひな型、各部品用のCSSコード(layout.css)

 

3. サイトページひな型をベースに個別のサイトページを作成

 図3-1は、サイトページひな型をベースに作成したお問い合わせページの表示例です。

 ヘッダー、サイドバー、フッターがページの意図した位置に配置されています。

 
 図3-1 サイトページひな型をベースに作成したお問い合わせページ

 
 
 
 

4. まとめ

 今回の記事では、サイトページのひな型をつくることを目的として、部品化したヘッダー、サイドバー、フッターをページに配置する具体的な方法と、簡易な例について書かせていただきました。

 次回の記事以降では、各部品(ヘッダ、サイドバー、フッター)に実装した機能について、より掘り下げた機能説明を混じえて記事にしたいと考えています。

 
 
 
おわり
 

コメント

タイトルとURLをコピーしました