
1. サイトページのひな型をつくる
サイトのコンテンツが増えていくにともない、ページ数も増えていくことになります。ページを追加する際に、全てのページで共通に使える機能が組み込まれている「ひな型」があれば、これをベースにページ固有の内容をつくりこむことで追加するページが完成します。
本記事では、上記のようなひな型のことを「サイトページのひな型」とよびます。
サイトページのひな型をつくる際に使用する「部品」についてですが、前回の記事で、主にヘッダーの部品化と、部品の読み込み手順について書かせていただきました。詳しくは、以下の記事をご覧ください。

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

一度、サイトページのひな型をつくってしまえば、コンテンツや記事を追加していく場合、図1-1のメインコンテンツ部分をつくりこむだけの作業となります。
2. サイトページひな型の作成例
ポイントは④の枠内に、メインコンテンツ部分とサイドバーを並べて配置するという点になります。
②jQueryでヘッダー、サイドバー、フッターの各部品を読み込む
③ヘッダー部品の展開
④メインコンテンツ部分とサイドバーを並べて配置するための枠(id=”inner-content”)
⑤サイドバー部品の展開、サイドバーはメインコンテンツ部分の右隣に配置される
⑥フッター部品の展開
1 |
1 |
1 |
図2-3 サイドバー部品のHTMLコード例(sidebar.html)
図2-4は、部品化したフッターのHTMLコードの例です。フッターの表示項目には、コピーライトなどがあります。
1 |
図2-4 フッター部品のHTMLコード例(footer.html)
図2-5は、ページひな型HTML、各部品HTML用のスタイルシートコード例です。数値等は、各サイトのスタイルに合わせて決めてください。
メインコンテンツ部分となるmain要素に「float: left;」を指定して左寄せにします。また、次要素(サイドバー)には「float:right;」を指定して右寄せにして、2つの要素が横並びになるようにします。
1 |
図2-5 サイトページひな型、各部品用のCSSコード(layout.css)
3. サイトページひな型をベースに個別のサイトページを作成
ヘッダー、サイドバー、フッターがページの意図した位置に配置されています。


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

コメント