指定の通り、HTML5で記述し、アウトライン構造を意識して制作してみましょう。
アウトライン構造1
アウトライン構造2
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>パスタとワインの店|atella</h1> <p class="mainImg"><img src="img/mainimage.jpg" alt="パスタとワインの店|atella"></p> <p class="topText">ちょっと良いパスタを</p> </header> <nav> <ul> <li><a href="#"><img src="img/menu_concept.png" alt="concept"></a></li> <li><a href="#"><img src="img/menu_pasta.png" alt="pasta"></a></li> <li><a href="#"><img src="img/menu_drink.png" alt="drink"></a></li> <li><a href="#"><img src="img/menu_side.png" alt="side"></a></li> <li><a href="#"><img src="img/menu_access.png" alt="access"></a></li> </ul> </nav> <div id="bannerMenu"> <ul> <li><a href="#"><img src="img/subimage01.jpg" alt="Lunch"></a></li> <li><a href="#"><img src="img/subimage02.jpg" alt="Pasta"></a></li> <li><a href="#"><img src="img/subimage03.jpg" alt="Wine"></a></li> </ul> </div> <section id="wrapper"> <h2 class="info"><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2> <div id="mainContent"> <section id="recommend"> <h2><img src="img/todaypastaText.png" alt="今日の日替わりパスタ"></h2> <p>ペンネアラビアータ<br>(ピリ辛トマトソースのペンネ)</p> </section><!--/#recommend--> <section id="news"> <h2><img src="img/newsText.png" alt="news"></h2> <dl> <dt>2015.3.24</dt><dd>今年も冷製パスタをお出しし始めました</dd> <dt>2015.3.18</dt><dd>トマトソースの作成ビデオを公開しました</dd> </dl> </section><!--/#news--> </div><!--/#mainContent--> <aside id="subContent"> <h2><a href="#"><img src="img/coupon.png" alt="CouponTickets ランチセットご注文時ドリンク1杯無料"></a></h2> <p><img src="img/poster.jpg" alt=""></p> </aside> </section><!--/#wrapper--> </div><!--/#container--> <footer> <p><small>©2015 atella all right reserved.</small></p> </footer> </body> </html>
@charset "utf-8"; /* reset */ html,body,h1,p,ul,li,dl,dt,dd,small,header,nav,small { 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 { font-size: 16px; color: #333; background: url(../img/back.jpg) repeat; } #container { width: 980px; margin: 0 auto; background: #FFF; } header { width: 980px; height: 500px; } h1 { position: absolute; top: 0; left: 240px; z-index: 9999; background: url(../img/logo.png) no-repeat; width: 149px; height: 87px; text-indent: 100%; white-space: nowrap; overflow: hidden; } p.topText { text-indent: 100%; white-space: nowrap; overflow: hidden; } nav { width: 980px; height: 60px; } nav ul { overflow: hidden; } nav ul li { width: 196px; height: 60px; float: left; } nav ul li a:hover { opacity: 0.7; } #bannerMenu { width: 870px; height: 165px; margin: 40px auto; } #bannerMenu li { float: left; margin-left: 60px; } #bannerMenu li:first-child { margin-left: 0; } #bannerMenu li a:hover { opacity: 0.6; } #wrapper { width: 870px; margin: 0 auto; overflow: hidden; } h2 { width: 870px; margin: 0 auto; } h2.info { box-shadow: 1px 1px 5px #aaa; } #mainContent { float: left; margin-top: 20px; width: 560px; } #recommend { background: url(../img/todaypasta.jpg) no-repeat 0 0; border: 1px solid #eee; padding: 20px; padding-left: 275px; text-align:center; } #recommend h2 { width: 148px; height: 49px; } #recommend p{ padding: 8px; } #news{ margin: 38px 0; background: #f5f2eb; border: 1px solid #eee; padding: 14px 0; } #news h2 { width: 60px; margin: 0 auto; padding: 4px 0 10px; } #news dl { text-align: left; padding: 16px 20px 0; width: 520px; } #news dt { float: left; margin-right: 20px; line-height:1.8; } #news dd { line-height:1.8; } #subContent { width: 270px; float: right; } #subContent h2 { margin: 20px 0 20px 0; } footer p { text-align: center; padding: 20px 0; color: #4B7900; }