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

@charset "shift_jis";
/*__________________ 基本設定 __________________ */
body {
  text-align: center;
  margin : 0;
  padding : 0;
  background-color:#ffffff;　背景色の設定
}
p {
  font-family : "MS UI Gothic";
}
/*___________ コンテナーブロック設定 ___________ */
#container {
  width : 740px;　幅の指定
  overflow: hidden;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  background-color:#ff6699;　背景色の設定（ナビゲーション部分と同一、濃いピンク）
}
/*_____________ バナーブロック設定 _____________ */
#banner {
  width:740px;
  height:110px;　高さの指定
  text-align:left;
  background-color:#cc3366;　背景色の設定（えんじ）
  padding:0;
  overflow:hidden;
}
h1 {　「HTMLCSS.biz-ホームページ制作講座」の文字の設定
  font-size:20px;　フォントサイズは大きめ
  padding-top:5px;
  margin-left:35px;　左の余白
  font-family:"MS UI Gothic";
  color: #ffffff;　文字色（白）
}
h2 { 
　font-family:"MS UI Gothic";
  color:#cccccc;　文字色をシルバーに
  font-size:16px;
  font-weight:600;　太字に
  margin-left:35px;　 左の余白
  line-height:140%;
}
/*___________ コンテンツブロック設定 ___________ */
#contents {
  width : 580px;　コンテンツ部分の幅
  float : right;　右寄せに（ナビゲーションが左側にあるため）
  padding : 0;
  overflow: hidden;
  position:relative;
  background-color : #ffcccc;　背景色の設定（薄いピンク）
}
h3 {
  font-size:14px;
  font-family:"MS UI Gothic";
  text-align:center;　センタリング
  margin-top:15px;
  margin-bottom:5px;
  color:#cc3366;　バナーと同一色
}
.c1 {　コンテンツ上部の設定（ボックス及び文字）
  background-color:#ffffff;　背景色（白）
  color:#696969;　文字色（シルバー）
  padding-top:7px;
  padding-left:7px;
  margin-top:0px;
  margin-left:20px;
  margin-right:20px;
  font-size:14px;　フォントサイズ
  line-height:150%;　行間
  border-top: #cc3366 6px solid;　ボックスの上部の設定、色はえんじ（バナーと同一色）
  border-left: #ff6699 8px solid;　ボックス左側の設定、色は濃いピンク（ナビゲーションと同一色）
  /* border-right: #cc3366 6px solid;
ボックス右側と下部は使っていません、コメントにしてありますので、使う際は/*、*/を外してください
  border-bottom: #ff6699 6px solid; */
}
.c2 {　コンテンツ中央以下の部分の設定（ボックス及び文字）、文字の設定は上記と同一
  background-color:#ffffff;
  color:#696969;
  padding-top:7px;
  padding-left:7px;
  margin-top:0px;
  margin-left:20px;
  margin-right:20px;
  font-size:14px;
  line-height:150%;
  /* border-top: #cc3366 6px solid;
ボックスの上部と左側は使っていません、コメントにしてありますので、使う際は/*、*/を外してください
  border-left: #cc3366 8px solid; */
  border-right: #ff6699 2px solid;
  border-bottom: #cc3366 4px solid;
}
.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;
}
/*________左ナビゲーションブロック設定 _________ */
#leftsidebar {
  width : 160px;　ナビゲーションの幅、ナビゲーション＋コンテンツ＝コンテナー
  float : left;　左寄せ
  text-align:left;
  padding:0;
  overflow: hidden;
  background-color : #ff6699;　背景色の設定（濃いピンク）
}
ul {　メニュー部分の設定
  margin-left : 0px;
  padding-left : 0px;
  padding-top:20px;
  padding-bottom:20px;
}
li {　メニュー部分の設定
  padding-left : 5px;
  padding-bottom:20px;　メニュー間の設定、メニュー項目により値を変えてみる
  list-style-type : none;
  font-family : "MS UI Gothic";　フォントの指定
  font-size:14px;　フォントサイズの指定
}
a:link {　メニュー部分のリンクの設定
  color:#fff;　文字色（白）
  text-decoration: none;　下線無し
}
a:visited {
  color:#fff;
  text-decoration: none;
}
a:hover {　マウスカーソルが乗った際、文字色と背景色が反転する
  color:#ff6699;
  background-color:#fff;
  text-decoration: none;
}
a:active {
  text-decoration: none;
}
address{　最下部のコピーライツの表示部分
　font-family : "MS UI Gothic";
  font-size:12px;
  font-style:normal;
  padding-top:10px;
  padding-bottom:0px;
  color:#696969;
  line-height:140%;
}