一般的なレイアウト−スタイルシートの説明

@charset "shift_jis";
/*__________________ 基本設定 __________________ */
body {
  text-align: center;
  margin-top:20px;
  padding : 0;
  background-color:#99cccc;
  color:#000000;
}
/*___________ コンテナーブロック設定 ___________ */
#container {
  width : 770px;
  overflow: hidden;
  margin-top:0;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  background-color : #00cccc;
  background-position: center;
}
/*_____________ バナーブロック設定 _____________ */
#banner {
  height:100px;
  width:770px;
  text-align:left;
  background-color:#00cccc;
  background-position: center;
  padding:0;
  overflow: visible;
  margin-left:auto;
  margin-right: auto
}
h1 {
  font-size:28px;　フォントサイズは大きめ
  margin-top:10px;
  padding-left:80px;
  padding-bottom:0px;
  font-family:"HG丸ゴシックM-PRO";　丸みのあるフォントを使用
  color: #ffff00;
}
h2 {
  font-family : "ＭＳ Ｐゴシック";
  font-size:15px;
  margin-left:40px;
  padding-bottom:10px;
}
/*___________ コンテンツブロック設定 ___________ */
#contents {
  width : 570px;
  float : right;
  padding : 0;
  background-position: center;
  overflow: hidden;
  position:relative;
  background-color : #ccffff;
}
.topctr {　写真部分の調整
  text-align:center;　センタリング
  padding-top:20px;　写真上部に余白を設定
}
p {　段落の設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:15px;
  margin-top:15px;
  margin-left:10px;
  margin-right:10px;
  line-height:140%;
}
/*________左ナビゲーションブロック設定 _________ */
#leftsidebar {
  width : 200px;
  float : left;
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color:#00cccc;
  font-family:"MS UI Gothic";
}
ul {　メニュー部分の設定
  margin-left : 0px;
  padding-left : 0px;
  padding-top:55px;　メニュー上部に結構のスペースを設定
  padding-bottom:5px;
}
li {
  padding-left : 5px;
  line-height:300%;
  list-style-type : none;
  font-family : "MS UI Gothic";
  font-size:13px;
  margin-left:5px;
}
a:link {　リンク部分の設定、このページではメニュー部分とコンテンツ部分は同じ
  color:#191970;
  text-decoration: none;
}
a:visited {
  color:#191970;
  text-decoration: none;
}
a:hover {
  color:#e6e6fa;
  background-color:#333399;
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
/*____________ フッターブロック設定 ____________ */
#footer {
  width : 770px;
  float : left;
  background-color : #00cccc;
  margin-left: auto;
  margin-right: auto;
  margin-top :0;
  margin-bottom:0;
  overflow: hidden;
  text-align:center;
}
.ctr {
  text-align:center;　センタリング　<div align="center">は使わない
}
table {　
  width:650px;　 テーブル（表）の幅を設定
  table-layout:auto;
  border-collapse:collapse;
margin-left: auto;　FIREFOX対策　これが無いとセンタリングされない
  margin-right: auto;
}
th {
  font-family : "ＭＳ Ｐゴシック";
  font-size:15px;
  background:#ffff33;　テーブルのヘッダー部分の色（黄色）
}
td {　列の設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:15px;
  background:#ccffff;　背景色はコンテンツ部分と同色
  vertical-align:top;
  border-top:1px solid #00cccc;　列の上に細い線、色はフッター背景色と同色
  border-left:1px solid #00cccc;　 列の左に細い線、色はフッター背景色と同色
  border-right:1px solid #00cccc;　 列の右に細い線、色はフッター背景色と同色
  border-bottom:1px solid #00cccc;　 列の下に細い線、色はフッター背景色と同色
}
.t0 {　各列の幅の設定
  width:250px;
}
.t1 {　各列の幅の設定
  width:400px;
}
.t2 {　各列の幅の設定
  width:150px;
}
address {
　font-family : "MS UI Gothic";
  font-size:12px;
  font-style:normal;
  padding-top:10px;
  padding-bottom:0px;
  color:#696969;
  line-height:140%;
}