<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q26</title>
<link rel="stylesheet" href="css/style.css">
</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>
<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>
</div><!-- /#content -->
<div id="sidebar">
<ul>
<li><a href="#">メニューのリンク１</a></li>
<li><a href="#">メニューのリンク２</a></li>
<li><a href="#">メニューのリンク３</a></li>
<li><a href="#">メニューのリンク４</a></li>
<li><a href="#">メニューのリンク５</a></li>
<li><a href="#">メニューのリンク６</a></li>
</ul>
</div> <!-- /#sidebar -->
</div> <!-- /#wrapper -->
<div id="footer">
<p><small>Copyright(c) AUTHOR NAME, At Rights Reserved</small></p>
</div> <!-- /#footer -->
</div> <!-- /#container -->
</body>
</html>
@charset="UTF-8";
/*reset*/
body,div, ul, li, a, h1, h2, h3, p {
margin: 0;
padding: 0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
/*style*/
body {
background-image: url(../img/01.jpg);
background-position: -600px top;
background-repeat: no-repeat;
}
#container {
width: 780px;
height: auto;
margin: 20px auto;
}
#header {
margin-bottom:80px;
color: white;
}
#wrapper {
width: 780px;
overflow: hidden;
}
#content {
width: 540px;
float: left;
}
#content h2 {
background-color: greenyellow;
margin-bottom: 20px;
font-size: 18px;
padding: 5px 0 5px 10px;
}
#content p {
color: white;
margin-bottom: 20px;
}
#sidebar {
width: 200px;
float: right;
}
#sidebar ul {
list-style: none;
}
#sidebar ul li {
border: 1px solid white;
}
#sidebar ul li a {
color: white;
text-decoration: none;
display: block;
padding: 5px 0 5px 10px;
}
#footer {
width: 780px;
clear: both;
}
#footer p {
border-top: 3px solid greenyellow;
}
/*action*/
#sidebar ul li a:hover {
background-color: aquamarine;
}
