WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

スライスした画像を使いコーディングをしていく

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Cotorier Cafe(コトリエ カフェ)</title>
<meta name="description" content="このサイトの説明文">
</head>
<body>
<div id="container">
<header>
<h1>Cotorier Cafe</h1>
<p>毎日のおいしいごはんとおまけをすこし</p>
<p class="logo"><img src="img/logo.svg" alt="#"></p>
<nav class="hNav">
<ul>
<li><a href="#">お店のこと</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">アクセス</a></li>
</ul>
</nav>
</header>
<div id="main">
<h2>毎日食べたい、<br>おうちみたいなごはんやおやつ</h2>
<p>Cotorier Cafe(コトリエ カフェ)は、あなたのもうひとつの「おうち」に<br>
なりたいごはんやさんです。毎日食べたくなるような、どこかホッとする<br>
ごはんにおやつ、飲みものを揃えて、ゆっくりくつろげる空間でお迎えし<br>
ます。気軽なおひるごはんに、お茶の時間に、会社帰りの晩ごはんに、<br>
「ただいま」を心よりお待ちしています。</p>
<p><a href="#">お店について</a></p>
<p class="mainPhoto"><img src="img/main.png" alt="#"></p>
</div>
<div id="menu">
<h3>おすすめメニュー</h3>
<p><a href="#">全てのメニュー</a></p>
<ul>
<li><a href="#" title="日替わりごはんセット"><img src="img/food01.png" alt="#"></a>春野菜とあさりのチャウダー豆としらすのごはん、新ごぼうのきんぴら</li>
<li><a href="#" title="週替わりカレー"><img src="img/food02.png" alt="#"></a>甘辛たけのこカレー ゆでたまごつき</li>
<li><a href="#" title="季節のおやつ"><img src="img/food03.png" alt="#"></a>西か東か!さくらもち食べ比べ対決セット</li>
<li><a href="#" title="ひとくち晩酌"><img src="img/food04.png" alt="#"></a>今だけ!いちごごろごろサングリア</li>
</ul>
</div>

<div id="info">
<div id="shopInfo">
<h3>お店からのお知らせ</h3>
<dl>
<dt>■2015-04-22</dt><dd>ゴールデンウィークの営業について</dd>
<dt>■2015-04-21</dt><dd>今週の日替わりメニュー(4/21 - 4/26)</dd>
<dt>■2015-04-14</dt><dd>今週の日替わりメニュー(414 - 4/19)</dd>
<dt>■2015-04-10</dt><dd>春限定のおやつがスタートしました!</dd>
</dl>
</div>
<div id="sns">
<h3>こちらもどうぞ</h3>
<ul id="snsList"></ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Pinterest</a></li>
<li><a href="#">Blog</a></li>
</div>
</div>

<div id="map">
<h3>店舗情報</h3>
<p id="access"><a href="#">地図・アクセス方法</a></p>
<dl>
<dt>住所</dt><dd>東京都杉並区高円寺南7丁目7-4 ことりやビル2F(東京メトロ丸ノ内線新高円寺駅から徒歩7分)</dd>
<dt>電話 </dt><dd>03-0000-0000</dd>
<dt>営業時間</dt><dd>11:00 - 23:30(L.O. 23:00)</dd>
<dt>定休日</dt><dd>日曜日・祝日</dd>
</dl>
</div>

<footer>
<p><small>Copyright&copy; Cotorier Cafe. All rights Reserved.</small></p>
</footer>
</div>
</body>
</html>


common.css

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset, small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
  vertical-align: bottom;
}

/*共通レイアウト*/
#container {
  width:960px;
  margin: 0 auto;
}
/*ヘッダー部分*/
header {
  height: 100px;
  background: #D9B86E;
}
#mainHeader {
  width:320px;
  float: left;
  margin: 20px 0 0 10px;
  position: relative;
}
h1 {
  width: 250px;
  height: 24px;
  margin-top: 30px;
  float: right;
  background: url(../img/h1.png) no-repeat;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
p.tag {
  font-size: 14px;
  position: absolute;
  top: 10px;
  right: 0;
}
p.logo {
  width: 60px;
  height: 60px;
  float: left;
}
.hNav {
  width: 480px;
  float: right;
}
.hNav li {
  float: left;
  margin: 10px;
}
.hNav li a {
  display: block;
  width: 140px;
  height: 80px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
.hNav li a:hover {
  opacity: 0.7;
}
#shopBtn a {
  background:url(../img/nav01.png) no-repeat;
}
#menuBtn a {
  background:url(../img/nav02.png) no-repeat;
}
#accessBtn a {
  background:url(../img/nav03.png) no-repeat;
}

/*フッター部分*/
footer {
  clear: both;
  background: #FAC747;
  height: 80px;
}
footer p {
  text-align: center;
  line-height: 80px;
}


style.css

@charset "UTF-8";
#main {
  padding: 10px;
  overflow: hidden;
}
#mainInner {
  float: left;
}
h2 {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 20px;
}
p.mainText {
  line-height: 1.5;
}
p.about a {
  display: block;
  width: 540px;
  height: 50px;
  background: url(../img/about.png) no-repeat;
  margin-top: 20px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
p.about a:hover {
  opacity: 0.6;
}
p.mainPhoto {
  float: right;
  margin-top: 32px;
}
#menu {
  background: #F3F49B;
  margin-bottom: 30px;
}
#menuTop {
  overflow: hidden;
  padding: 10px;
  margin-bottom: 20px;
}
#menu h3 {
  font-size: 40px;
  font-weight: 400;
  margin-top: 20px;
  width: 320px;
  float: left;
}
p.all {
   float: right;
}
p.all a {
  display: block;
  width: 220px;
  height: 50px;
  background: url(../img/menu.png) no-repeat;
  margin-top: 10px;
   text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
}
p.all a:hover {
  opacity: 0.7;
}
#menu ul {
  overflow: hidden;
}
#menu ul li {
  width: 220px;
  margin: 10px 10px 30px 10px;
  line-height: 1.4;
  float: left;
}
#menu ul li a:before {
  display: block;
  content: attr(title);
  margin-bottom: 10px;
}
#info {
  overflow: hidden;
  padding: 10px;
  margin-bottom: 20px;
}
#info h3 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 30px;
}
#shopInfo {
  width: 460px;
  float: left;
}
#shopInfo dl {
  margin-top: 40px;
}
#shopInfo dt {
  width: 34%;
  font-weight: bold;
  line-height: 1.3;
  float: left;
  margin-bottom: 20px;
}
#shopInfo dd {
  width: 66%;
    line-height: 1.3;
  float: left;
  margin-bottom: 20px;
}
#sns {
  width: 480px;
  float: right;
}
ul#snsList {
  clear: both;
  overflow: hidden;
}
ul#snsList li {
  float: left;
  margin: 10px;
}
ul#snsList li a {
  display: block;
  width: 220px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #C6C6C6;
  border-radius: 8px;
}
ul#snsList li a:hover {
  opacity: 0.5;
}
#map {
  background: #D1C593;
  padding: 20px 10px;
  overflow: hidden;
}
#map h3 {
  width: 120px;
  height: 36px;
  line-height: 36px;
  font-size: 28px;
  font-weight: 400;
  margin-right: 40px;
  margin-bottom: 30px;
  float: left;
}
#access {
  float: left;
}
#access a {
  display: block;
  width: 190px;
  padding-top: 1px;
  height: 35px;
  text-align: center;
  line-height: 36px;
  border: 1px solid #000;
  background: #FFF;
}
#access a:hover {
  opacity: 0.7;
}
#map dl {
  width: 100%;
  clear: both;
}
#map dt {
  width: 160px;
  margin-left: 40px;
  float: left;
  line-height: 1.8;
}
#map dd {
  width: 700px;
  float: left;
  line-height: 1.8;
}

スライスした画像
http://yachin29.html.xdomain.jp/comp/img.zip