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

@charset "shift_jis";
/*__________________ 基本設定 __________________ */
body {
  text-align: center;
  margin : 0;
  padding : 0;
  background-color:#b0c4de;　背景色の設定（薄い紫）
}
p {
  font-family : "MS UI Gothic";　段落のフォントを固定
}
/*___________ コンテナーブロック設定 ___________ */
#container {
  width : 770px;　３カラムでは幅は広めに
  overflow: hidden;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  background-color:#ffffff;　背景色の設定（白）
}
/*_____________ バナーブロック設定 _____________ */
#banner {
  width:770px;
  height:90px;
  text-align:left;
  background-image: url("banner7.gif");　画像をここで指定
  background-position:center;
  background-repeat: no-repeat;
  padding-top:0px;
  margin-left:auto;
  margin-right: auto;
  overflow: hidden;
}
h1 {
  font-size:20px;
  padding-top:15px;
  margin-left:35px;
  font-family:"MS UI Gothic";
  color: #ffffff;　文字色は白
}
/*________左ナビゲーションブロック設定 _________ */
#leftsidebar {
  width : 150px;　幅は狭め
  float : left;
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color : #ffffff;　背景色の設定（白）
}
.mentop {　「メニュー」とある部分のみの設定
  font-family : "MS UI Gothic";
  font-size:20px;
　font-weight:600;　太字
  text-align:center;
  background:#cc3366;　背景色の設定（濃いピンク）ポイント色として使いました
  margin-bottom:0px;　下マージンを無しとすることで下のボックスと連結、表風になります
  margin-top:10px;
  padding-top:5px;
  color:#ffffff;　文字色（白）
  margin-left:3px;　下のボックスの罫線に合わせるために調整
  margin-right:3px;　 下のボックスの罫線に合わせるために調整
}
.indtp {　「メニュー」部分の下のボックス部分の設定
  background-color:#ffffff;　背景色の設定（白）
  margin-top:0px;　上マージン無しとすることで「メニュー」部分と連結、表風になる
  margin-left:3px;
  margin-right:3px;
  padding-top:0px;
  border-top: #cc3366 2px solid;　枠の設定、色は「メニュー」部分と同一に
  border-left: #cc3366 2px solid;
  border-right: #cc3366 2px solid;
  border-bottom: #cc3366 2px solid;
}
ul {
  margin-left : 0px;
  padding-left : 0px;
  padding-top:0px;
}
li {
  padding-left : 5px;
 line-height:155%;　 行の高さ
  list-style-type : none;
  font-family : "MS UI Gothic";
  font-size:14px;
margin-bottom:27px;　　メニューのリンクの幅の設定
}
a:link {　リンクの設定
  color:#191970;　文字色（紺）
  text-decoration: none;　下線無し
}
a:visited {　一度クリックしたリンクの設定
  color:#191970;　 文字色（紺）
  text-decoration: none;　 下線無し
}
a:hover {　マウスカーソルの乗せた際、色が反転
  color:#fff;　文字色（白）
  background-color:#191970;　背景色の設定（紺）
  text-decoration: none;　 下線無し
}
a:active {
  text-decoration: none;
}
/*___________ コンテンツブロック設定 ___________ */
#contents {
  width : 420px;　幅はコンテナ＝右ナビゲーション＋コンテンツ＋左ナビゲーション　とするように
  float : left;
  padding : 0;
  overflow: hidden;
  position:relative;
  background-color : #ffffff;　背景色の設定（白）
}
h2 {　コンテンツ上部の大きめな文字
  font-family : "MS UI Gothic";
  color:#191970;
  font-size:17px;
  line-height:160%;
  font-weight:600;
  margin-top:40px;
  margin-left:25px;
  margin-right:25px;
  margin-bottom:30px;
}
.contop {　「はじめに」とある部分のボックス部分の設定
  font-family : "MS UI Gothic";
  font-size:20px;
  font-weight:600;　太字
  text-align:center;
  background:#6495ed;　背景色の設定（ブルー）
  margin-bottom:0px;　 下マージンを無しとすることで下のボックスと連結、表風になります
  margin-top:2px;
  padding-top:5px;
  color:#ffffff;　文字色（白）
  margin-left:3px;　 下のボックスの罫線に合わせるために調整
  margin-right:3px;　 下のボックスの罫線に合わせるために調整
}
.indtp2 {　「はじめに」部分の下のボックス部分の設定
  background-color:#ffffff;　背景色の設定（白）
  margin-top:0px;　 上マージン無しとすることで「はじめに」部分と連結、表風になる
  margin-left:3px;
  margin-right:3px;
  padding-top:0px;
  border-top: #6495ed 2px solid;　 枠の設定、色は「はじめに」部分と同一に
  border-left: #6495ed 2px solid;
  border-right: #6495ed 2px solid;
  border-bottom: #6495ed 2px solid;
}
.c1 {　表内の文字の設定
  color:#000000;
  margin-top:10px;　左右上下マージンを同一に
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;
  font-size:14px;
  line-height:230%;　字間を多めに、少な目にするとコンテンツがつぶれた感じになる
}
.cont a:link {
  color:#191970;
  text-decoration:underline;
}
.cont a:visited {
  color:#191970;
  text-decoration: underline;
}
.cont a:hover {
  color:#ffffff;
  background:#191970; 
}
.cont a:active {
  text-decoration: underline;
}
/*________右ナビゲーションブロック設定 _________ */
#rightsidebar {
  width : 200px;　左ナビゲーションブロックよりも幅が広い
  float : right;
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color : #fff;　背景色の設定（白）
}
.rgttop {　「当製品の構成について」とある部分のボックス部分の設定
  font-family : "ＭＳ Ｐゴシック";
  font-size:14px;
  font-weight:600;　太字
  text-align:center;
  background:#191970;　背景色の設定（紺）
  margin-bottom:0px;　 下マージンを無しとすることで下のボックスと連結、表風になります
  margin-top:10px;
  padding-top:5px;
  color:#ffffff;　文字色（白）
  margin-left:3px;
  margin-right:3px;
}
.indtp3 {　　「当製品の構成について」部分の下のボックス部分の設定
  background-color:#ffffff;　背景色の設定（白）
  margin-top:0px;　 上マージン無しとすることで「当製品の構成について」部分と連結、表風になる
  margin-left:3px;
  margin-right:3px;
  margin-bottom:25px;
  padding-top:0px;
  border-top: #191970 2px solid;　 枠の設定、色は「当製品の構成について」部分と同一に
  border-left: #191970 2px solid;
  border-right: #191970 2px solid;
  border-bottom: #191970 2px solid;
}
.c2 {　右ナビゲーションブロック部分の文字の設定
  color:#000000;
  margin-top:10px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:10px;
  font-size:13px;　フォント小さめ
  line-height:150%;　字間少なめ
}

address {
　font-family : "MS UI Gothic";
  font-size:12px;
  font-style:normal;
  padding-top:10px;
  padding-bottom:0px;
  color:#696969;
  line-height:140%;
}