2014-10-03 - matsunamima’s diary

２カラムレイアウトと擬似クラス

卵料理カフェ Cockeyolly


Home
ニュース
メニュー
今月のおすすめ
オリジナル雑貨
マップ
メール

今月のおすすめ

きのこのオムライス

ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円


シーフードスパゲッティシーフードスパゲッティ
バルサミコ風味

エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円


(c)2014  卵料理カフェ Cockeyolly

素材

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>卵料理カフェ</title>
<linkrel="stylesheet"href="css/style.css">
</head>
<body>
<divid="container">
<divid="sub">
<h1><imgsrc="img/logo.gif"alt="卵料理カフェ Cockeyolly"></h1>
<ul>
<li><ahref="#">Home</a></li>
<li><ahref="#">ニュース</a></li>
<li><ahref="#">メニュー</a></li>
<li><ahref="#"class="this">今月のおすすめ</a></li>
<li><ahref="#">オリジナル雑貨</a></li>
<li><ahref="#">マップ</a></li>
<li><ahref="#">メール</a></li>
</ul>
</div><!-- /#sub -->
<divid="main">
<h2><imgsrc="img/title.gif"width="231"height="49"alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p><imgsrc="img/photo01.jpg"width="185"height="129"alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<spanclass="price">800円</span></p>
<h3>シーフードスパゲッティ<br>バルサミコ風味</h3>
<p><imgsrc="img/photo02.jpg"width="184"height="130"alt="シーフードスパゲッティ バルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。<br>バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<spanclass="price">900円</span></p>

<pclass="footer"><small>(c)2014  卵料理カフェ Cockeyolly</small></p>
</div><!-- /#main -->
</div><!-- /#container -->
</body>
</html>

@charset "utf-8";

/* reset */
html, body, div, h1, h2, h3, p, ul, li, img {
  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 {
  color: #333;
  font-size: 16px;
  background: url(../img/bg_img.gif) repeat-y;
}

/* layout */
#container {
  width: 680px;
  padding: 15px;
  overflow: hidden;
}
#sub {
  width: 130px;
  float: left;
}
#sub h1 {
  margin-bottom: 50px;
  margin-left: 15px;
}
#sub li a {
  display: block;
  color: #FFF;
  font-weight: bold;
}
#sub li a:hover, #sub li a.this {
  color: #FF6;
}
#sub li {
  line-height: 2.0;
}
#main {
  width: 460px;
  float: left;
  margin: 30px 0 0 50px;
}
#main h2 {
  text-align: center;
  margin-bottom: 50px;
}
#main h3 {
  color: #7C533F;
  line-height: 1.3;
  margin-bottom: 10px;
  padding-left: 0.5em;
  border-left: 8px solid #DA8125;
}
#main p {
  line-height: 1.6;
  margin-bottom: 30px;
}
#main p img {
  float: right;
  margin-left: 1.0em;
}
p.footer {
  text-align: center;
  border-top: 1px solid #AAA;
  padding-top: 5px;
}
span.price {
  color: #F30;
  font-weight: bold;
}