複数ページのサイト構成 - WEBサイト制作の勉強

今回のチェックポイント

正しいファイル管理が出来ているか
ビルボード画像はトップページのみ
スタイルシートは１枚で全ページを管理する
bodyの色は各ページで別指定

f:id:yachin29:20150410002421j:plain

トップページ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Cafe-siteのトップページ</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body id="top">
<div id="container">
<div id="header">
<h1><img src="img/pop.png" alt=""></h1>
<p class="billboard"><img src="img/header.png"></p>
<ul id="nav">
<li class="this left"><a href="index.html">ホーム</a></li>
<li><a href="food/index.html">フード</a></li>
<li><a href="drink/index.html">ドリンク</a></li>
<li><a href="info/index.html">インフォメーション</a></li>
<li><a href="contact/index.html">お問い合わせ</a></li>
</ul>
</div><!-- /#header -->
</div><!--/#container-->
</body>
</html>

フードのページ

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Cafe-siteのフードメニュー</title>
<link rel="stylesheet" href="../css/style.css">
</head>

<body id="food">
<div id="container">
<div id="header">
<h1><img src="../img/pop.png" alt=""></h1>
<ul id="nav">
<li class="left"><a href="../index.html">ホーム</a></li>
<li class="this"><a href="index.html">フード</a></li>
<li><a href="../drink/index.html">ドリンク</a></li>
<li><a href="../info/index.html">インフォメーション</a></li>
<li><a href="../contact/index.html">お問い合わせ</a></li>
</ul>
</div><!-- /#header -->
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */
/*リセット*/
html, body, div, h1, 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#top {
  background: #999;
}
body#food {
  background: #9F9;
}
body#drink {
  background: #6FC;
}
body#info {
  background: #993;
}
body#contact {
  background: #CCF;
}
#container {
  width: 840px;
  height: 700px;
  background: #FFF;
  margin: 0 auto;
  padding-top: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
  position: relative;
}
#header {
  width: 800px;
  margin: 0 auto 30px;
  position: relative;
  left: 0;
  top: 0;
  padding-top: 220px;
}
#header h1 {
  position: absolute;
  left: -50px;
  top: 10px;
  transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
}

#header p.billboard img {
  border-radius: 30px;
  margin-top: -200px;
}

ul#nav {
  width: 800px;
  overflow: hidden;
}
#nav li {
  float: left;
  width: 160px;
  text-align: center;
}

#nav li a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #000;
  font-size: 16px;
  border-left: 1px solid #666;
}
#nav li.left a {
  border-left: none;
}
/* 擬似クラス */
#nav a:hover {
  border-bottom: #F90 solid 3px;
}
#nav li.this a {
  border-bottom: #6F1111 solid 3px;
}