復習⑤ - ウェブサイトの作り方メモ

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<h2>サブタイトルサブタイトルサブタイトル</h2>
</div><!-- /header -->
<div id="wrapper">
<div id="content">
<h3>コンテンツのタイトル</h3>
<p id="p1">
コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。
</p>
<p id="p2">
コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。
</p>
</div>
<div id="sidebar">
<ul>
<li><a href="#">メニューのリンク1</a></li>
<li><a href="#">メニューのリンク2</a></li>
<li><a href="#">メニューのリンク3</a></li>
<li><a href="#">メニューのリンク4</a></li>
<li><a href="#">メニューのリンク5</a></li>
<li><a href="#">メニューのリンク6</a></li>
</ul>
</div>
</div><!-- /wrapper -->
<div id="footer">
<address><small>Copyright brabrabra All Rights Reserved</small></address>
</div>
</div><!-- /container -->
</body>
</html>

@charset"UTF-8";
/* リセット */
body,div,p,ul,li,h1,h2,h3,a{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* 全体 */ 
body {
  color: #fff;
  line-height: 1.5;
  background-image: url(img/back_photo.jpg);
  background-repeat: no-repeat;
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
#container{
  width: 900px;
  height: 860px;
  padding: 20px 0px;
  margin: 0 auto;
}
#header{
  height: 200px;
}

#wrapper{
  width: 900px;
  margin-bottom: 30px;
  overflow: hidden;
}
#content{
  float: left;
  width: 600px;
}
#sidebar{
  float: right;
  width: 200x;
}
#footer{
  height: 100px;
}
  
/* 子孫 */
#header h1{
  margin-bottom: 0.5em;
}
#header h2{
  font-size: 18px;
  font-weight: normal; 
}
#content h3{
  background-color: lawngreen;
  color: #000;
  padding: 2px 0 0 10px;
  margin-bottom: 1.0em;
}
#p1{
  margin-bottom: 1.0em;
}
#p2{
  margin-bottom: 3.0em;
}
ul{
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
li{
  border-bottom: 1px solid #fff;
}
li a{
  color: #fff;
  display: block;
  width: 200px;
  padding: 5px 0px 5px 8px;
}
li a:hover,li a:active{
  background-color: skyblue;
}
#footer{
  border-top: 3px solid lawngreen;
  padding-top: 8px;
}
address small{
  color: #000;
}