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

1. サイトページのひな型をつくる
 2. サイトページひな型の作成例
 3. サイトページひな型をベースに個別のサイトページを作成
 4. まとめ

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

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

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

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

古いウェブサイトをカスタマイズ【HTML部品化と適用の仕方】

記事の内容：・HTMLの部品化とはどういうことなのか？・どのような利点があるのか？・具体的にどうすればいいのか？

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

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

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

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

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

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

①jQueryが公式に公開しているファイルパスを指定して、JavaScriptライブラリを読み込む
②jQueryでヘッダー、サイドバー、フッターの各部品を読み込む
③ヘッダー部品の展開
④メインコンテンツ部分とサイドバーを並べて配置するための枠(id=”inner-content”)
⑤サイドバー部品の展開、サイドバーはメインコンテンツ部分の右隣に配置される
⑥フッター部品の展開

<!DOCTYPE html>
<head>
    <script type="text/javascript" charset="UTF-8"></script>
    <title>タイトル</title>
    <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");       ・・・②
        $("#sidebar").load("common/sidebar.html");     ・・・②
        $("#footer").load("common/footer.html");       ・・・②
    });
    </script>
</head>
<body>
<!-- HEADER  -->
<div id="header"></div>                                ・・・③
<!-- CONTAINER  -->
<div id="container">
<!-- CONTENT -->
<div id="content">
  <div id="inner-content" class="clearfix">            ・・・④
    <!-- MAIN CONTENTS -->
    <main id="main">
　　   <!-- メインコンテンツ記事をここに書く -->　
    </main>
    <!-- SIDEBAR -->
    <div id="sidebar"></div>                           ・・・⑤
  </div><!-- /#inner-content -->
</div><!-- /#content -->
<br/>
<!-- FOOTER -->
<div id="footer"></div>                                ・・・⑥
</body>

図2-1 サイトページひな型のHTMLコード例(page.html)

　図2-2は、部品化したヘッダーのHTMLコードの例です。以下例では、ヘッダ画像、サイトロゴ(リンク付)を表示する機能があります。

<!-- HEADER --> 
<header style="background-image:url(image/AAA.jpg)">　　　
  <h1><a href="index.html"><img src="image/AAA_logo.jpg"></a></h1>　
</header>

図2-2 ヘッダー部品のHTMLコード例(header.html)

　図2-3は、部品化したサイドバーのHTMLコードの例です。サイドバーの表示項目には、サイト内検索窓、おすすめ記事、リンク、広告などがあります。

<!DOCTYPE html>
<!-- SIDEBAR -->
<div id="sidebar">
  <div class="side-box" >
    <!-- サイドバーの表示項目をここに書く -->
  </div>
</div>

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

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

<!DOCTYPE html>
<!-- フッター -->
<div class="fwrapper">
<div class="footer">
<center>
  <!-- コピーライト表示をここに書く -->
</center>
</div>
</div>

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

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

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

/*** ヘッダー用スタイル ***/
header { 
　　position: relative; 
　　height: 35vh; 
　　font-size: 22px; 
　　background: url(image/AAA.jpg) center / cover; 
}
/*** コンテナ ***/ 
body > #container > * {
  max-width: 1240px; 
  margin: 0 auto; 
}
/* clearfix floatによる回り込みを抑止 */
.clearfix:after {
  clear: both;
  content: '';
  display: block;
}
/*** mainとsidebarの配置用 ***/
#inner-content {
  margin-top: 20px;
}
/*** メインコンテンツ ***/
main {
  max-width: 850px;
  margin-left: 10px;
  margin-right: 10px;
  float: left;                /* 要素を左寄せにする */
}
/*** サイドバー用スタイル ***/
#sidebar {
  position:absolute;
  right:30px;
  max-width: 350px;
  float: right;               /* 要素を右寄せにする */
}
/* サイドバー用ボックス */
div.side-box {
  width:350px; max-height:2000px;
  margin:5px; padding:10px; border:0px solid black;
  background: #FFFFFF;
} 

/*** フッター用スタイル ***/
.fwrapper{
   width: 100%;
}
/* コピーライト領域 */
.footer{
  margin: auto;
  max-width: 800px;
  padding: 10px;
}

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