トップページ:ボックス配置

トップページ:フッター作成」で上から下まで作成したため、メイン部分にボックスを配置していきます。ボックスを配置して、その中に文章を記述する事でデザインが崩れないように出来ます。ここまででトップページの外観はほぼ完成になります。

トップページメインのボックス配置のためのスタイルシート作成

 「デザイン」で考えたレイアウトで以下の赤枠で囲った部分のボックスを作っていきます。

トップページ:ボックス配置1

 スタイルシートでは以下を追加します。

【トップページメインへのボックス配置のスタイルシート記述例】
.subcontents {
margin: 0px 0px 10px 0px;
border: 1px rgb(0,176,80) solid;
background-color: rgb(235,241,222);
}

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

 .subcontentsが赤枠で囲った部分のクラス定義です。marginで下に10px余白を設けているのは下に配置する広告との間に余白を設けるためです。

 borderで囲む線を実線を、background-colorで背景を指定しています。Excel等でデザインしている場合で、デザイン通りの色を指定する方法は「トップページ:フッター作成」をご参照下さい。

 .subcontents h2は題のクラス定義です。margin: 0px;は全ての外側の余白を0pxに指定しています。このようにmarginは上下左右の余白が同じであれば1つの指定で全てを指定出来ます。0pxをわざわざ指定しているのはh2は最初から定義されているタグでデフォルトでは外側の余白が作られます。それを打ち消すために0pxを指定しています。

 paddingでは内側の余白を指定して文字が箱の枠に寄り過ぎないようにしています。

 背景の指定方法は.subcontentsと同じです。

トップページメインへのボックス配置のhtml作成

 htmlではスタイルシートで定義した内容をこれまでのhtmlに追加で配置します。

【トップページメインへの箱の配置のhtml記述例】
<div id="left">
<div class="subcontents">
<h2>サブ題</h2>
サブコンテンツ
</div>
</div>

 ポイントは「トップページ:メイン作成」で作成したleftのボックスの中に配置している点です。このように記述する事で左サイドバーの中に配置されます。

広告用のボックスの作成

 広告用のボックスは特に定義不要ですが、下の余白だけ指定しておきます。途中上に余白を作ったり下に作ったり混ぜてしまうと分かり辛くなってしまうため、どちらかに統一した方がいいためです。ここでは下に余白を設ける事で統一しています。

 スタイルシートは以下のようになります。

【トップページメインへの広告のスタイルシート記述例】
.advertisement {
margin: 0px 0px 10px 0px;
}

ここまでの作成結果

 その他のボックスも同様に定義し、文書等を記述して保存後、ブラウザで表示すると以下のようになります。

トップページ:ボックス配置2

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

 尚、スタイルシートでは以下のクラスを追加しています。

【追加するボックスのスタイルシート記述例】
.sitedescription {
margin: 0px 0px 10px 0px;
border: 1px rgb(191,191,191) solid; }

.sitedescription h2 {
margin: 0px;
padding: 6px 4px 6px 4px;
background-color: rgb(191,191,191); }

.maincontents {
margin: 0px 0px 10px 0px;
border: 1px rgb(191,191,191) solid; }

.maincontents h2 {
margin: 0px;
padding: 6px 4px 6px 4px;
background-color: rgb(250,192,144); }

.pickup {
margin: 0px 0px 10px 0px;
border: 1px rgb(179,162,199) solid;
background-color: rgb(230,224,236); }

.pickup h2 {
margin: 0px;
padding: 6px 4px 6px 4px;
background-color: rgb(179,162,199); }

.news {
margin: 0px 0px 10px 0px;
border: 1px rgb(149,179,215) solid; }

.news h2 {
margin: 0px;
padding: 6px 4px 6px 4px;
background-color: rgb(185,205,229); }

 htmlではスタイルシートの中で定義したsitedescription、advertisement、maincontentsをcenterの中に配置しています。

【追加する箱のhtml記述例】
<div id="center">

<div class="sitedescription">
<h2>キャンプ入門サイトについて</h2>
<p> キャンプ入門サイトでは初心者向けに必須道具の揃え方、使い方から現地に着いて最初に行う事等を説明しています。</p>
</div>

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

<div class="maincontents">
<h2>キャンプ用品の紹介</h2>
<p>テント</p>
<p>寝袋</p>
※以下同様
</div>

※2つ目のメインコンテンツのボックスも同様に配置

</div>

 広告予定部分は上の図では画像を貼り付けていますが、実際にはアフェリエイトの会社の管理画面で表示されるコードを貼り付けます。

 左サイドバー、右サイドバーも同様に配置すると上で示した画像のようになります。

 ここまででトップページの外観は殆ど完成です。後は、作成した箱の中にテキストや画像を入れたりリンクを張ったりしていきます。

前のページトップページ:フッター作成」    次のページトップページ:記述方法

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