課題5

課題

Q26
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Q26.css">
<title>
</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Homepage Title</h1>
<p>サブタイトルサブタイトルサブタイトル</p>
</div><!-- /header -->
<div id="wrapper">
<div id="content">
<h2>コンテンツのタイトル</h2>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 </p>
<br>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!-- /content -->
<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><!-- /sidebar -->
</div><!-- /wrapper -->
<div id="footer">
<p><small>Copyright &copy; AUTHOR NAVE, All Rights Resarved.</small></p>
</div><!-- /footer -->
</div><!-- /container -->
</body>
</html>

CSS

@charset "UTF-8";
 

/*リセット*/
body,div,p,ul,li,a,h{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/*全体*/

body{
  background-image: url(../img/back_photo.jpg);
  background-repeat: no-repeat;
  background-position: -600px -100px;
}


#container{
  width: 1000px;
  height: auto;
  margin: 0 auto;
}

/*ヘッダー*/
#header{
  color: #FFFFFF;
  line-height: 1.0;
  font-weight: bold;
  padding: 15px 0 50px 80px;
}

/*コンテンツ*/
#wrapper{
  width: 1000px;
  height: auto;
  overflow: hidden;
}
#content{
  width: 600px;
  height: auto;
  float: left;
  padding: 0 0 50px 80px;
}

#content h2{
  background-color: #99CC33;
  padding: 2px 0 0 15px;
} 

#content p{
  color: #FFFFFF;
  font-weight: bold;
}

#sidebar{
  width: 230px;
  height: auto;
  float: right;
  margin: 20px 50px 0 0;
}
#sidebar ul{
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
#sidebar a{
  color: #FFFFFF;
  line-height: 2.0;
  display: block;
  border-bottom: 1px solid #FFFFFF;
  padding: 3px;
}
#sidebar a:hover,#sidebar a:active{
  background-color: #99CC99;
}

/*フッター*/
#footer{
  width: 900px;
  border-top: 3px solid #99CC33;
  margin-left: 80px;
  padding-top: 5px;
}