本文ページ:作成

トップページ:記述方法」でトップページは完成で、次は本文を記述するページを作成します。技術的にはトップページを作成した時と同じ方法なのでCSS、html共に一気に説明します。

本文ページのスタイルシート作成

 「デザイン」で考えた本文ページのレイアウトは以下の通りです。

本文ページの作成1

 トップページを作成した時のやり方と同じなので一気にスタイルシートを示します。ヘッダー部分はトップページと同じであるため省略します。必要な方は「トップページ:ヘッダー作成」をご参照下さい。

【本文ページのスタイルシート記述例】
#center {
margin: 0px 10px 10px 9px;
width: 729px;
border-left: 1px rgb(191,191,191) solid;
float: right;
}

#left {
width: 160px;
margin: 0px 0px 0px 10px;
}

#footer {
padding: 10px 0px 10px 0px;
border-top: 1px rgb(0,176,240) solid;
text-align: center;
}

.maincontents {
margin: 0px 0px 10px 0px;
}

.link {
margin: 0px 0px 10px 0px;
border: 1px rgb(0,176,80) solid;
background-color: rgb(235,241,222);
}

.link h2 {
margin: 0px;
padding: 6px 4px 6px 4px;
background-color: rgb(146,208,80);
}

.advertisement {
margin: 0px 0px 10px 0px;
}

.clear {
clear:both;
}

 #centerは内容記述の部分です。今回は右サイドバーがないため中央と左サイドバーを囲むcenterleftの定義が不要です。右サイドバーのために囲んで左に回り込む必要がないためです。

 width: 729px;はデザインした幅728pxに1px足しています。これはその下のborder-leftで左に線を1px付けたためです。このため、margin: 0px 10px 10px 9px;と左側の余白は9pxと10pxから1px引いた値にしています。

 それ以外はトップページを作成した時と同様の作り方になっています。

本文ページのhtml作成

 htmlもトップページを作成した時のやり方と同じなので一気に示します。配置イメージは以下の通りです。

本文ページの作成2

 ヘッダー部分はトップページと同じであるため省略します。必要な方は「トップページ:ヘッダー作成」をご参照下さい。

 尚、タイトルはトップページから変更して下さい。Google等で検索した時にタイトルが表示されるため、記述している内容に沿った分かり易い名前がいいようです。

【本文ページのhtml記述例】
<div id="center">

<div class="maincontents">
<h1>テント</h1>
<p> テントの使い方、購入時に注意する点等を説明します。</p>
<p> ・・・</p>
</div>

<div class="advertisement">
広告予定
</div>

</div>

<div id="left">

<div class="link">
<h2>キャンプ用品</h2>
<p>テント</p>
<p>・・・</p>
</div>

<div class="advertisement">
広告予定
</div>

</div>

<div class="clear"></div>

<div id="footer">
Copyright (C) All Rights Reserved.
</div>

</body>

 中央のcenterの中に文章を書くmaincontentsや広告のadvertisementを配置し、</div>で閉じています。左サイドバーのleftも中にリンクを記述するlinkや広告のadvertisementを配置し、</div>で閉じています。左サイドバーの後は<div class="clear"></div>で回り込みを解除してfooterが左サイドバーの下に配置されないようにしています。「トップページ:メイン作成」で示したように<div id="page">で囲まれた中に配置して下さい。

作成結果

 上記を作成して文書等を記述して保存し、ブラウザで表示すると以下のようになります。

本文ページの作成3

 上記は実際のサイズを縦横半分にしています。

前のページトップページ:記述方法」    次のページ本文ページ:記述方法

  • このエントリーをはてなブックマークに追加