jQueryを使ったサイト練習 1：Kitchenware Club途中経過
floatの解除が理解できていないので、そこら辺を意識して取り組んでいきますー
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/base.css"> <script src="js/"></script><!-- まだ --> <link href='http://fonts.googleapis.com/css?family=Simonetta' rel='stylesheet' type='text/css'> <!--[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> <div id="border_top"> </div> <article id="container"> <header id="header"><!-- Header --> <div id="header01"> <img id="logo" src="images/logo.jpeg" alt="キッチンウェーブ クラブ"> <h1 id="title01">Kitchenware Club</h1> <div id="address"> <img id="mail_logo" src="images/mail.jpg" alt="お問い合せ"> <address><a href="">お問い合わせ</address> </div> </div> <nav id="nav"> <ul> <li><a href="">TOP</a></li> <li><a href="">Kitchenware Club</a> <ul> <li><a href="">リンク項目その１</a></li> <li><a href="">リンク項目その２</a></li> </ul> </li> <li><a href="">製品情報</a> <ul> <li><a href="">リンク項目その１</a></li> <li><a href="">リンク項目その２</a></li> </ul> </li> <li><a href="">会社概要</a> <ul> <li><a href="">リンク項目その１</a></li> <li><a href="">リンク項目その２</a></li> </ul> </li> <li><a href="">取扱ショップ一覧</a> <ul> <li><a href="">リンク項目その１</a></li> <li><a href="">リンク項目その２</a></li> </ul> </li> <ul> </nav> </header> <h1 id="board"><img src="images/board.jpg" alt="キッチン用品" width="600" height="300"></h1> <div id="midlle_border"> </div> <div id="wrapper"> <section id="news"> <h2>更新情報</h2><!-- 更新情報 --> <dl> <dt>2012.7.2</dt> <dd>夏の新作商品を5点追加しました。</dd> <dt>2012.6.22</dt> <dd>日本中の食器が集まるイベント"日本食器展示会" にKichinwere Clubも出品しました。</dd> <dt>2012.6.12</dt> <dd>取扱ショップ情報を更新しました。</dd> </dl> </section> <section id="items"> <h2>新着製品</h2><!-- 新着情報 --> <h3>Kitchenware Clubオリジナル</h3> <p>厚手ガラスタンブラー・小 約280ml</p> <p>梨地の丈夫な厚手ガラスです。<br> 割れにくいガラスを使用しています。<br> これからの季節にピッタリのタンブラーです。</p> <h3>山崎木工</h3> <p>木製 スプーン 39×155mm</p> <p>柔らかな形状の木製スプーンです。<br> 何通りもの試作品を作り、その中から<br> 最も手になじむ物を製品化しました。</p> <h3>WAECHTERSBACH</h3> <p>ステンレスマルチトング 長さ23cm</p> <p>ドイツの老舗食器メーカー・べヒタフバッハから<br> シンプルなステンレストングの入荷です。<br> 軽くてつかみやすい設計になっています。</p> <p>以前の新着情報を見る</p> </section> <footer> <ul> <li>サイトマップ</li> <li>プライバシーポリシー</li> <li>アクセシビリティポリシー</li> </ul> </footer> <address>Copyright © 2012 Kitchenware Club All Rights Reserved.</address> </article> </body> </html>
@charset "UTF-8"; * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; } body { font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif; background-color: #F6F2E6; } article,aside,figcaption,figure,footer,header,hgroup,nav,section { display: block; } img { border: 0; vertical-align: bottom; } #border_top { background-color: #060606; height: 10px; } #container { margin: 0 auto 0 auto; width: 900px; background-color: #fff; box-shadow: 0px 1px 13px rgba(0,0,0,0.61); } #header { padding: 30px; } #header01 { margin-bottom: 60px; } #logo { float: left; width: 70px; height: 40px; } #title01 { font-family: 'Simonetta', cursive; font-weight: bold; font-size: 2em; color: #6e6d6d; font-style: italic; overflow: auto; float: left; padding-left: 10px; width: 600px; -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0.2), rgba(0,0,0,0.9)); } #mail_logo { width: 30px; height: 20px; float: left; } #address { float: right; overflow: auto; width: 130px; margin-top: -10px; } address { font-style: normal; } #nav { clear: both;/* 重要！！！！(o'v'o)！！さｌｋｄｊふぁｓ；ｌｄｋふぁｊ！(o'v'o)！ */ float: left; } ul { list-style-type: none; } #nav ul li{ } #nav ul li a{ text-decoration: none; } #nav ul li a: hover{ } #board { width: 600px; height: 300px; float: right; overflow: auto; border: 7px solid rgba(0,0,0,0.19); } #midlle_border { height: 30px; background-color: #0e205a; clear: both; margin: 330px 0 20px 0; } #news { clear: both; float: left; overflow: auto; width: 300px; } #items { float: right; overflow: auto; width: 400px; } footer { clear: both; }
