Kitchenware Club
とりあえず途中まで出来ました。
あとは右下のスタイル整えて、jQueryって感じです。
制作時間3時間
http://felica.boy.jp/kitchenware/
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Kitchenware Club</title> <link rel="stylesheet" href="style.css"> <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Kaushan Script'> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <article> <div id="content"> <header> <h1>Kitchenware Club</h1> <aside id="contact"><a href="#">お問い合わせ</a></aside> </header> <div id="wrapper1"> <nav id="headernav"> <ul> <li>TOP</li> <li>TKitchenware Club <ul> <li>リンク項目その１</li> <li>リンク項目その２</li> </ul> </li> <li>製品情報 <ul> <li>リンク項目その１</li> <li>リンク項目その２</li> </ul> </li> <li>会社概要 <ul> <li>リンク項目その１</li> <li>リンク項目その２</li> </ul> </li> <li>取扱ショップ一覧 <ul> <li>リンク項目その１</li> <li>リンク項目その２</li> </ul> </li> </ul> </nav> <figure><img id="billboard" src="billboard.png"></figure> </div> <hr id="headline"> <div id="left-column"> <h2>更新情報</h2> <section> <dl><dt>2012.7.2</dt><dd><a href="#">夏の新作商品を5点追加しました。</a></dd></dl> </section> <section> <dl><dt>2012.6.22</dt><dd><a href="#">日本中の食器が集まるイベント"日本食器展示会"にKichinwere Clubも出品しました。</a></dd></dl> </section> <section> <dl><dt>2012.6.12</dt><dd><a href="#">取扱ショップ情報を更新しました。</a></dd></dl> </section> </div> <div id="right-column"> <h2>新着製品</h2> <section> <div class="wrapper-left"> <figure><img class="product" src="billboard.png"></figure> </div> <div class="wrapper-right"> <h3>Kitchenware Clubオリジナル</h3> <h4>厚手ガラスタンブラー・小 約280ml</h4> <p>梨地の丈夫な厚手ガラスです。 割れにくいガラスを使用しています。 これからの季節にピッタリのタンブラーです。</p> </div> </section> <section> <div class="wrapper-left"> <figure><img class="product" src="billboard.png"></figure> </div> <div class="wrapper-right"> <h3>山崎木工</h3> <h4>木製 スプーン 39×155mm</h4> <p>柔らかな形状の木製スプーンです。 何通りもの試作品を作り、その中から 最も手になじむ物を製品化しました。</p> </div> </section> <section> <div class="wrapper-left"> <figure><img class="product" src="billboard.png"></figure> </div> <div class="wrapper-right"> <h3>WAECHTERSBACH</h3> <h4>ステンレスマルチトング 長さ23cm</h4> <p>ドイツの老舗食器メーカー・べヒタフバッハから シンプルなステンレストングの入荷です。 軽くてつかみやすい設計になっています。</p> </div> <aside id="past">以前の新着情報を見る</aside> </section> </div> </div> <footer> <nav id="footernav"> <ul id="footerul"> <li>サイトマップ</li> <li>プライバシーポリシー</li> <li>アクセシビリティポリシー</li> </ul> </nav> <hr id="footline"> <small>Copyright © 2012 Kitchenware Club All Rights Reserved.</small> </footer> </article> </body> </html>
@charset "UTF-8"; * { margin: 0; padding: 0; } body { border-top: 5px solid #fa5128; background-color: #f6f2e6; font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ",Osaka,"MS P Gothic","ＭＳ Ｐゴシック",sans-serif; color: #666; font-size: 13px; } ul { list-style-type: none; } #content { padding: 0 20px 0 20px; } article { width: 960px; margin: 0 auto 20px auto; padding-bottom: 20px; background-color: #fff; border: 3px solid #dbd8c7; border-top: 0; border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -o-border-radius: 0 0 6px 6px; -ms-border-radius: 0 0 6px 6px; } header { overflow: hidden; padding: 10px 0 10px 0; } h1 { font-family: 'Kaushan Script', cursive; font-size: 30px; color: #868686; letter-spacing: 3px; float: left; padding-left: 50px; background-image: url(logo.png); background-repeat: no-repeat; background-position: 8px 8px; -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,1)); } #contact { float: right; padding-left: 30px; background-image: url(mail.png); background-repeat: no-repeat; } #wrapper1 { overflow: hidden; } #headernav { float: left; width: 200px; margin: 0 0 20px 20px; } #headernav li { background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc)); background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); } #billboard { float: right; width: 670px; border: 2px solid #9aadbe } #headline { height: 20px; background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ffffff), color-stop(0.51, #d1d1d1), color-stop(0.50, #dbdbdb), color-stop(0.00, #dcdcdc)); background: -webkit-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -moz-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -o-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: -ms-linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); background: linear-gradient(top, #dcdcdc 0%, #dbdbdb 50%, #d1d1d1 51%, #ffffff 100%); border: 0; margin-bottom: 30px; opacity: 0.5; } h2 { border-left: 5px solid #fa5128; font-size: 15px; font-weight: normal; padding: 5px 0 5px 10px; background-image: url(pattern.png); } #left-column { width: 300px; float: left; } dl { border-bottom: 1px solid #ddd; te } dt { margin: 15px 0 0 10px; } dd { margin: 10px; } #right-column { width: 600px; float: right; margin-bottom: 50px; } .wrapper-left { width: 200px; float: left } .product { width: 180px; height: 180px; } .wrapper-right { width: 400px; float: right; } #past { clear: both; } small { padding: 20px; clear: both; } #footline { border: 0; border-top: 3px solid #fa5128; margin: 0 5px 10px 5px; } section { overflow: hidden; } footer { text-align: center; clear: both; } #footernav { position: relative; overflow: hidden; } #footerul { padding: 10px 0 10px 0; position: relative; left: 50%; float: left; } #footernav li { float: left; padding: 0 20px 0 20px; border-right: 1px solid #999; position: relative; left: -50%; } #footernav li:last-child { border: 0; }
