シンプルなレイアウト-スタイルシートの説明

@charset "shift_jis";
/*__________________ 基本設定 __________________ */　/*で始まり*/で終わる部分はコメント
body {
  text-align: center;
  margin-top : 15px;
  padding : 0;
  background-color:#ffffff;　背景色の設定
}
* a img {
  border:0;　画像の枠線を表示しない
}
p {　<p></p>間の文字の設定
  margin-left:25px;
  margin-right:15px;
  font-family : "ＭＳ Ｐゴシック";
  font-size:14px;
  color:#696969;
  line-height:150%;
}
/*___________ コンテナーブロック設定 ___________ */
#container {
  width : 740px;　幅の指定
  overflow: hidden;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  background-color : #ffffff;
  background-position: center;
}
/*_____________ バナーブロック設定 _____________ */
#banner {
  width:740px;
  text-align:left;
  height:120px;
  background-image: url("banner2.gif");　バナー部分の画像の指定
  background-position: center;
  padding:0;
  overflow: visible;
  margin-left:auto;
  margin-right: auto;
}
h1 {　バナー部分の文字の設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:16px;
  color:#ffffff;　文字色
  margin-top:25px;
  margin-left:25px;
  margin-right:25px;
  line-height:170%;
}
/*___________ コンテンツブロック設定 ___________ */
#contents {
  width : 740px;
  padding-bottom : 0px;
  overflow: visible;
  position:relative;
  background-color : #ffffff;　背景色の設定
  background-image: url("line.jpg");　ラインの画像を指定
  background-position: right;　ラインの位置を右に指定
  background-repeat:repeat-y;　画像を縦に繰り返しの指定
}
.contents-inner {
  background-image: url("line.jpg"); 　ラインの画像を指定
  background-position: left;　ラインの位置を左に指定
  background-repeat:repeat-y;　 画像を縦に繰り返しの指定
  padding : 0;
}
.contents-vline {　コンテンツ内の横のラインの設定
  margin-left:20px;　左部分の余白
  margin-right:20px;　右部分の余白
}
.contents-top {
  text-align:center;
  padding-top:15px;
}
h2 {　コンテンツ内の見出しの設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:14px;
  color:#191970;　（青）
  margin-top:15px;
  margin-left:25px;
}
hr {　コンテンツ内の横のラインの色
  color:#708090;　（シルバー）
}
a:link {　コンテンツ内のリンク部分及びフッター内のメニューのリンクの設定
  color:#191970;　文字色（青）
  text-decoration:underline;　下線有り
}
a:visited {
  color:#191970;
  text-decoration: underline;
}
a:hover {
  color:#ffffff;　マウスカーソルが乗った際、色が反転
  background:#191970; 
}
a:active {
  text-decoration: underline;
}
/*____________ フッターブロック設定 ____________ */
#footer {
  width:740px;
  text-align:left;
  height:100px;
  background-image: url("footer2.gif");　フッター部分の画像を指定
  background-position: center;
  padding-top:0px;
  overflow: hidden;
  margin-left:auto;
  margin-right: auto;
}
ul {　メニュー部分の設定
  padding-left:5px;
  padding-top:0px;
  margin-top:10px;
}
.cl {　回り込み解除の設定
  clear:both;
}
li {　メニュー部分の設定
  list-style-type : none;
  padding-left:18px;
  font-family : "MS UI Gothic";
  font-size:13px;
  float:left;　メニューは左寄せ、（横書き）
}
address {　最下部のコピーライツの表示部分
  font-family : "MS UI Gothic";
  font-size:12px;
  font-style:normal;
  padding-top:10px;
  padding-bottom:0px;
  line-height:140%;
  color:#696969;
}