３カラムレイアウト-スタイルシートの説明

@charset "shift_jis";
/*__________________ 基本設定 __________________ */
body {
  text-align: center;
  margin-top:20px;
  padding : 0;
  background-color:#ffffcc;　 背景色の設定（薄いベージュ）
}
/*___________ コンテナーブロック設定 ___________ */
#container {
  width : 770px;
  overflow: hidden;
  margin-top:0;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  background-color : darkgreen;　 背景色の設定（ダークグリーン）
  background-position: center;
}
/*_____________ バナーブロック設定 _____________ */
#banner {
  width:770px;　幅と高さは画像サイズと同じに
  height:70px;
  text-align:left;
  background-image: url("banner8.gif");　画像ファイル名をここで指定
  background-position:center;
  background-repeat: no-repeat;
  padding-top:0px;
  margin-left:auto;
  margin-right: auto;
  overflow: hidden;
}
h1 {　バナー上の文字の設定
  font-family : "MS UI Gothic";
  font-size:28px;
  text-align:center;
  margin-top:25px;
  margin-bottom:0px;
  color:#ffffff;　文字色は白
}
/*________左ナビゲーションブロック設定 _________ */
#leftsidebar {
  width : 150px;　
  float : left;
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color:darkgreen;　背景色の設定（ダークグリーン）
}
.lftbox {　上部、下部ボックスの設定
  background-image: url("lftccls.gif");　背景画像の設定
  background-position: 5px 0px;　背景画像の指定、左に隙間を作る
  background-repeat: no-repeat;
  height:160px;　高さを指定
  margin-bottom:10px;　下マージンの設定
}
.lftbox2 {
  background-image: url("lftccll.gif");　真ん中、縦長ボックスの設定
  background-position: 5px 0px;
  background-repeat: no-repeat;
  height:290px;
  margin-bottom:10px;
}
h2 {　ボックス内の見出し文字の設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:13px;
  text-align:center;
  margin-top:5px;　文字位置の微調整
  margin-bottom:0px;　 文字位置の微調整
  padding-top:10px;　 文字位置の微調整
  color:darkgreen;　文字色は左ナビゲーションの背景色とお同じ
}
.c1 {　ボックス内の文字の設定
font-family : "ＭＳ Ｐゴシック";
  margin-left:8px;　 文字位置の微調整
  line-height:120%;　行間は狭めに、ただでさえ左ナビゲーションは縦長なので
  color:#000000;
  font-size:12px;　小文字でも12pxがミニマム、11pxにすると見づらくなる
}
.cont a:link {　リンク部分の設定、ここではコンテンツ部分も同じクラスを使用出来ている
  color:darkgreen;　文字色（ダークグリーン）
  text-decoration:underline;　下線有り
}
.cont a:visited {
  color:darkgreen;
  text-decoration:underline;
}
.cont a:hover {　マウスカーソルが乗った際、色が反転する
  color:#ffffff;
  background-color:darkgreen;
  text-decoration: none;
}
.cont a:active {
  text-decoration:underline;
}
/*___________ コンテンツブロック設定 ___________ */
#contents {
  width : 470px;
  float : left;
  margin-top : 40px;　上マージンを取り、（白い）コンテンツ部分を下げている
  background-position: center;
  background-color : #ffffff;　背景色は白
}
h3 {　コンテンツ上部の枠線及び見出し文字の設定
  color:darkgreen;　文字色（ダークグリーン）
  font-size:14px;
  line-height:200%;
  padding-top:0px;
  font-family : "ＭＳ Ｐゴシック";
  margin:20px;　上下左右マージンを20pxずつ
  padding:7px;　文字と枠線との間を7pxずつ
  background-color:#ffffcc;　背景色は薄いベージュ（ボディーの背景色と同一）
  border-top: darkgreen 2px solid;　枠線の上、ダークグリーン、2px、実線
  border-left: darkgreen 2px solid;　 枠線の左、ダークグリーン、2px、実線
  border-right: darkgreen 2px solid;　 枠線の右、ダークグリーン、2px、実線
  border-bottom: darkgreen 2px solid;　 枠線の下、ダークグリーン、2px、実線
}
p {
  font-family : "ＭＳ Ｐゴシック";　コンテンツブロック内の文字の設定
  font-size:13px;
  margin-top:5px;
  margin-bottom:5px;
  margin-left:10px;
  margin-right:10px;
  line-height:200%;　行間を多めに設定
  color:#000000;
}
/*________右ナビゲーションブロック設定 _________ */
#rightsidebar {
  width : 150px;
  float : right;
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color:darkgreen;　背景色はコンテンツを除く全てのブロックで同一色に
}
ul {　メニューのリストの設定
  margin-left :0;
  padding-left :0;
  padding-top:0px;　 メニューの上部余白は無し
}
li {
  line-height:100%;　ボタン間の調整
  list-style-type : none;
  margin-left:8px;　ボタン位置の調整
  margin-right:12px;　 ボタン位置の調整
  margin-bottom:20px;　 ボタン位置の調整
}
.menu a {　「ボタン」の設定部分
  padding:2px;　 文字と枠線の間隔は上下左右2pxずつ
  display:block;　 表示形式をブロックレベルに設定　幅で指定した通りに表示する
  width:130px;　 幅
  border:solid 2px;　 ボタンの枠線のサイズ
  border-color:#ffffcc #808000 #808000 #ffffcc;　 ボタンの枠線の色指定、上は薄いベージュ、
右はオリーブ、下はオリーブ、左は薄いベージュ
  text-align:center;
  text-decoration:none;
  font-family : "MS UI Gothic";
  font-size:12px;
  font-weight:600;
  background:yellowgreen;　背景色はイエローグリーン
  color:darkgreen;　文字色はダークグリーン
}
.menu a:hover {　「ボタン」にマウスカーソルが乗った際の設定部分
  padding:4px 0px 0px 4px;　 文字が右下に2pxずつ移動する
  border-color:#808000 #ffffcc #ffffcc #808000;　 ボタンの枠線の色が反転する
  background:darkgreen;　 背景色と文字色が反転する
  color:yellowgreen;　
}
/*____________ フッターブロック設定 ____________ */
#footer {
  width:770px;
  height:70px;
  text-align:center;
  background-image: url("footer8.gif");　画像の指定
  background-position:center;
  background-repeat: no-repeat;
  overflow: hidden;
  float:left; FIREFOX対策、IEは無くても正常表示
}
.adst {　ずれの微調整、IE7、FIREFOXに対応
  margin-left:10px;
  margin-top:20px;
  padding:2px;
}
.menu2 a {　フッター部分の「ボタン」の設定部分、横並びで幅が狭く、文字が小さい
  float:left;　左寄せ
  display:block;
  width:90px;　幅狭く
  border:solid 2px;
  border-color:#ffffcc #808000 #808000 #ffffcc;
  text-align:center;
  text-decoration:none;
  font-family : "MS UI Gothic";
  font-size:11px;　フォント11pxも太字にすると問題は生じない
  font-weight:600;
  background:yellowgreen;
  color:darkgreen;
}
.menu2 a:hover {　フッター部分の「ボタン」にマウスカーソルが乗った際の設定部分
  padding:4px 0px 0px 4px;
  border-color:#808000 #ffffcc #ffffcc #808000;
  background:darkgreen;
  color:yellowgreen;
}
address {
  −−−−−−−−−−−−−−−−−中略−−−−−−−−−−−−−−−−−
 }