この外部スタイルシート 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;
}