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

 

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)

 

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

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

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

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

 
 
 
 

4. まとめ

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

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

 
 
 
おわり
 

コメント

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