テンプレート講座 - 第1回 : 全体の形：枠

fc2ブログ向けブログテンプレート編集講座です。
手探り編集から始まり、弄くる範囲を徐々に広げ、
手探りなりにもガッツリと編集するようになったのでやってみる。

第一回は「全体の形：枠」について。

　えーっと、なにやら弄り方がうんたら～とかなんたらがかんたら～という会話チャットを~~耳にした~~目にしたので。
　中身はお察し下さい。

　はい。
　えっと、第1回ということで・・・全体構造、枠について。

　はい。
　擬似画面を描きまーす。

　こんな感じですかね？
　1024x768 の1/4のサイズになります～。

　えっと、一応ここのテンプレをメインに進めますね。
　あと、【背景として画像を使わない】という縛りをかけます。
　意外とキレイにできるモンで、画像の読み込みがない分だけ軽くなるはずです。
　うちのブログは見た目重視としたため重さとか考えてませんｗｗｗ

　まず、【ヘッダー（タイトル）・まんなか（カラム＋記事＋カラム）・フッター】を分けるためのテーブルが存在します。
　このような。

　ちなみにタグは・・・

　スタイルシート（css）は・・・

　となっています。
　ちなみに、ｽｷﾏが空いているのは htmlタグのほうの
　<table cellspacing="1" style="・・・">
　この部分のせいです。
　0にすればｽｷﾏは完全になくなります。
　が。
　この色合いで隙間なくなるときもいのなんのってもう、ねｗｗｗｗ

　勘のいい方はお気づきでしょう。
　この碧枠の中にもう一個テーブルを書いてあげればそれっぽくなりますよね？

　実際にやるとこんな感じ。

　タグのほうは・・・

　スタイルシート（css）は・・・

body {　　　/* ページ全体 */
　　text-align: center;　　　/* 文字の水平位置：センタリング */
　　background-color: #ffffff;　　　/* 背景色：白 */
　　border: 1px solid #ff0000;　　　/* 枠線：<太さ>1px <線種>実線 <色>赤 */
　　padding: 0;　　　/* 画面枠から中身までの距離：0 */
}
.main {　　　/* 赤枠 */
　　width: 200px;　　　/* 横幅（左カラム＋記事＋右カラム）：200px */
　　margin: 0;　　　/* 枠から外側（bodyのpadding）までの距離：0 */
　　border: 1px solid #0000ff; /* 枠線：1px 実線赤 */
　　padding: 0;　　　/* 枠から中身までの距離：0 */
}
.header {　　　/* 上青枠 */
　　hight: 20px;　　　/* 縦幅：20px */
　　margin: 0;　　　/* 枠から外側（赤枠のpaddingと碧枠のmargin）までの距離：0 */
　　border: 1px solid #0000ff;　　　/* 枠線：1px 実線青 */
　　padding: 0;　　　/* 枠から中身までの距離：0 */
}
.body {　　　/* 碧枠 */
　　height: auto;　　　/* 縦幅：自動 ※余りを均等に分配（今回はauto指定が1つなので余り = 幅） */
　　margin: 0;　　　/* 枠線から外側（赤枠のpaddingと上下青枠のmargin）までの距離：0 */
　　border: 1px solid #00ff00;　　　/* 枠線：1px 実線碧 */
　　padding: 1px;　　　/* 枠線から中身（黄枠のmargin）までの距離：1px ※ｽｷﾏを作る為の変更 */
}
.main_body {　　　/* 黄枠 */
　　width: 100%;　　　/* 横幅：自動 ※外側までの距離のうち 100% を使用する */
　　margin: 0;　　　/* 枠線から外側（碧枠のpadding）までの距離：0 */
　　border: 1px solid #ffff00;　　　/* 枠線：1px 実線黄 */
　　padding: 0;　　　/* 枠線から中身までの距離：0 */
}
.left {　　　/* 左水枠 */
　　width: 50px;　　　/* 横幅（左カラム）：50px; */
　　margin: 0;　　　/* 枠線から外側（黄枠のpaddingと桃枠のmargin）までの距離：0 */
　　border: 1px solid #00ffff;　　　/* 枠線：1px 実線水 */
　　padding: 0;　　　/* 枠線から中身までの距離：0 */
}
.center {　　　/* 桃枠 */
　　width: auto;　　　/* 横幅（中央記事）：自動 ※均等分配（auto指定は1つなので余り = 幅） */
　　margin: 0;　　　/* 枠線から外側（黄枠のpaddingと左右水枠のmargin）までの距離：0 */
　　border: 1px solid #ff00ff;　　　/* 枠線：1px 実線桃 */
　　padding: 0;　　　/* 枠線から中身までの距離：0 */
}
.right {　　　/* 右水枠 */
　　width: 50px;　　　/* 横幅（右カラム）：50px; */
　　margin: 0;　　　/* 枠線から外側（黄枠のpaddingと桃枠のmargin）までの距離：0 */
　　border: 1px solid #00ffff;　　　/* 枠線：1px 実線水 */
　　padding: 0;　　　/* 枠線から中身までの距離：0 */
}
.footer {　　　/* 下青枠 */
　　height: 20px;　　　/* 縦幅：20px */
　　margin: 0;　　　/* 枠線から外側（赤枠のpaddingと碧枠のmarginまで） */
　　border: 1px solid #0000ff;　　　/* 枠線：1px 実線青 */
　　padding: 0;　　　/* 枠線から中身までの距離 */
}

　こんな感じですかねー。
　んと、この段階は、
　・記事件数：0件
　・左メニュー数：0個
　・右メニュー数：0個
　という状態になります。

　第1回はこれにて終了です。
　次回は水枠と黄枠に <div> を挿入していく感じになりますー。
　どんどんソースが長くなっちゃいますけど、めげずにゴーｗｗ

　それでは次回をお楽しみにっ！（゜∀゜）