CSSレイアウト確認テスト - web-0127のブログ

必須

#container：幅 840px・上の空き無し・左右は自動空き
#header：高さ100px
#nav：幅160px・高さ50pxのナビゲーションボタンが５個（nav1〜nav5）区切り線は適宜
#content：幅500px・高さ300px
#footer：下余白50px
背景色は、見本を参考に適宜
擬似クラスは、マウスオーバー時点で文字色「黒」に

宿題

welcom back Cafe

cafeについて
おいしいケーキでほっと一息

カフェのケーキは毎日手づくり。
季節ごとにいろんな味を楽しめます。
まるでリビングにいるような気分

あかるい光がさしこむ店内は、居心地バツグン。
じぶんの家にいるような気分でお過ごしください。
ホーム
おすすめメニュー
お店へのアクセス
お問い合わせ
Copyright &#169; 2015 cafe

素材

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>cafe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#"><img src="img/logo.png" alt=""></a></h1>
</div>
<div id="wrapper">
<div id="content">
<h2><img src="img/h2.jpg" alt="cafe67について"></h2>
<h3>おいしいケーキでほっと一息</h3>
<p><img src="img/img_cake.jpg" alt="">
カフェのケーキは毎日手づくり。<br>
季節ごとにいろんな味を楽しめます。</p>
<h3>まるでリビングにいるような気分</h3>
<p><img src="img/img_living.jpg" alt="">
あかるい光がさしこむ店内は、居心地バツグン。<br>
じぶんの家にいるような気分でお過ごしください。</p>
</div>
<div id="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="menu.html">おすすめメニュー</a></li>
<li><a href="#">お店へのアクセス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
<div id="footer">
<p><small>Copyright &#169; 2015 cafe</small></p>
</div>
</div>
</body>
</html>

《解答例》

@charset "UTF-8";

/* reset */
body, div, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img{
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  background: #E2EDC2;
  font-size: 16px;
  color:#666;
}

/* layout */
#container {
  width:900px;
  margin: 0 auto;
}
#header {
  height:140px;
  margin: 20px 0;
  background:url(../img/bg_header.png) repeat;
  border-radius: 10px;
}
#wrapper {
  overflow: hidden;
  background: #FFF;
}
#content {
  float:right;
  width:635px;
  margin: 20px 20px 0 0;
}
#nav {
  float:left;
  width: 200px;
  margin: 20px 0 0 20px;
}
#footer {
  text-align:center;
  padding: 20px 0;
  background: #FFF;
}

/* item */
#header h1 {
  padding: 28px 0 0 32px;
}
#content h2 {
  margin-bottom: 40px;
}
#content h3 {
  clear: right;
  padding-left:16px;
  margin: 20px 0 10px 15px;
  background:url(../img/icon.png) no-repeat left 8px;
  color:#6A8125;
}
#content p {
  margin-left: 2em;
  line-height: 1.5;
}
#content p img {
  float:right;
  margin-bottom: 20px;
}
#nav li {
  height: 40px;
  margin-bottom: 16px;
}
#nav li a {
  display: block;
  line-height: 40px;
  padding-left: 16px;
  color: #86A331;
  font-weight: bold;
  border: 1px solid #86A331;
}
#nav li a:hover {
  border: 1px solid #F3A42C;
  background: #F3A42C;
  color: #FFF;
}