この外部スタイルシート Dsign-1.css の覚書

0.外部スタイルシートの先頭行はこのようにする。

@charset "utf-8";
/* CSS Document */ ↓下のように説明文を書き変えてみる

@charset "utf-8";
/* 800x5000、中央配置、サイドメニュー形外部スタイルシート */

1.body

ページ内に余分な隙間が生じないように、Padding、Margin共に、上下左右すべて「0」ピクセルとする。

body {
margin: 0px;
padding: 0px;
}

2.page-wrapper、外枠のことです。

(1)幅について

ページ外枠の幅は経験から800ピクセルとする。さらに、ディスプレイ中央に表示したいので左右のマージンをautoに設定する。

(2)高さについて

外枠高さは、経験上5000ピクセルとすることにした。

外枠高さ(5000)=外枠上下のマージン(10)+メインコンテンツ高さ(4858)+ヘダとフッタの高さ(132)であり、

.page-wrapper {
background-color: #FFF;
height: 5000px;
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
}

3.p.header、ヘダー部分のことです。

  ボックス、Width=798、Height=98、Padding、Margin共に、上下左右すべて「0」ピクセルとする。

  ボーダー、上、左、右をそれぞれ1ピクセルとして、ヘダーの見栄えを良くする。

p.header {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 12px;
color: #00F;
text-decoration: none;
margin: 0px;
padding: 0px;
height: 98px;
width: 798px;
background-image: url(img/tytle1.jpg);
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #0C0;
border-right-color: #0C0;
border-left-color: #0C0;
}

4.p.menu    フロートを左にして、サイドメニューを外枠内側の左側に配置する

  全高=4858=内高4856+ボーダー上下(2)

p.menu {
background-color: #FFF;
text-align: left;
text-indent: 20px;
display: block;   縦長のボックスの前でdisplay:blockを宣言すると縦並びのメニューになります。
float: left;   外枠左にサイドメニューボックスの左端をピタリとあてるためフロート左の設定をしています。
height: 4856px;
width: 148px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #0C0;
border-bottom-color: #0C0;
border-left-color: #0C0;
margin: 0px;
line-height: 2.5em;
color: #00F;
text-decoration: none;
font-weight: bold;
font-size: 12px;
font-style: normal;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0C0;
}

5.p:menu a  リンクメニューの下部にそれぞれ1ピクセルの実線を引くためのものです。

p.menu a {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 12px;
text-align: left;
text-indent: 20px;
display: block;     display:blockは、メニューブロック下部にボーダーを引くための宣言文です。
width: 100%;
border-bottom-width: 1px;  
border-bottom-style: solid;
border-bottom-color: #0C0;
text-decoration: none;
}

6.p.menu a:hover リンクメニューにマウスが触れたとき背景は黄色、文字は赤にするためのものです。

p.menu a:hover {
background-color: #FF0;
color: #F00;
}

7. .main_contents   メインのドキュメント枠です。フロートを右にして外枠内側の右に配置します。

全高=4858=内高height(4856)+ボーダー上下(2)

幅width(639)=外枠(800)-メニュ(150)-(mainパディング左(5)+mainパディング右(5)+ボーダー右(1))

.main_contents {
height: 4856px;
width: 639px;   800-150-11=639
float: right;
margin: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #0C0;
border-bottom-color: #0C0;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0C0;
}

8.h1   見出しの形を指定しています。

h1 {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #90F;
}

9.p.txt   文章を見やすくするものです。テキストインデントは文章の書き始め位置を指定しています。

p.text {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 12px;
line-height: 1.5em;
font-weight: bold;
color: #000;
text-indent: 10px;
text-align: left;
}

10. p.footer   ホームページの著作権を表示する場所の指定です。float:left を消すと文字が書けません。

         ヘダー部分でも画像でなく文章を記載するのであれば float:left が必要です。

p.footer {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
font-size: 14px;
line-height: 2.5em;
color: #FFF;
background-color: #060;
float: left;
height: 30px;
width: 798px;
margin: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
text-align: center;
}