<!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>今週の日替わりメニュー（４14 - 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 ことりやビル２F(東京メトロ丸ノ内線新高円寺駅から徒歩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© 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; }
