【CSS07】
【CSS07】
・サイズは適宜、調整すること
・定義型リストに「float」の設定が必要
・XHTML 1.0 Transitional
<html> <head> <title>css07</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style-type: none; } body{ font-family:"メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic",sans-serif; } #container{ width: 900px; margin:30px auto; border-right:30px solid #C0DFB5; } #header{ float:left; } #wrapper{ width:auto; overflow:auto; } p{ margin: 10px 0; } dl{ margin: 10px 0 10px; } dt{ float:left; margin: 0 10px; } dd{ color: #C0DFB5; } #info{ float: right; margin: 30px 20px 30px 0; font-size: 20px; } #info li{ display:inline; border-left: 1px solid #999; } li a{ padding: 0 10px 0 5px; text-decoration: none; } li#first{ border-left: none; } #info a:link{ color: black; } #info a:visited{ color: red; } #info a:hover{ color: orange; } #info a:active{ color: green; } address{ clear: both; text-align: right; font-style: normal; margin-right: 30px; } </style> </head> <body> <div id="container"> <div id="header"><img src="CSS7images/side_image.gif" alt="interior" title="interior" /></div> <h1>インテリアショップ a Interior</h1> <h2><a href="#"><img src="CSS7images/info.gif" alt="インフォメーション"title="インフォメーション"/></a></h2> <div id="wrapper"> <p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p><dl> <dt>2012年4月27日</dt><dd>復刻版の商品が再入荷しました。</dd> <dt>2012年4月26日</dt><dd>ティーカップが入荷しました。</dd> <dt>2012年4月25日</dt><dd>オープン 家具・新商品入荷しました。</dd> </dl> <p><img src="CSS7images/cup.jpg" alt="cup" title="cup"/></p> <h2><a href="#"><img src="CSS7images/concept.gif" alt="コンセプト" title="コンセプト" /></a></h2> <p>インテリアについての「想い」を感じてください。</p> <h2><a href="#"><img src="CSS7images/shop.gif" alt="ショップ" title="ショップ" /></a></h2> <p>店内のイメージ写真と会社案内。</p> <h2><a href="#"><img src="CSS7images/products.gif" alt="商品紹介" title="商品紹介" /></a></h2> <p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p> <h2><a href="#"><img src="CSS7images/access.gif" alt="店舗へのアクセス" title="店舗へのアクセス" /></a></h2> <p>「a Interior」までの交通機関のご案内です。</p> <h2><a href="#"><img src="CSS7images/blog.gif" alt="ブログ" title="ブログ" /></a></h2> <p>スタッフの「ブログ」です。</p> <h2><a href="#"><img src="CSS7images/contact_us.gif" alt="お問い合わせ" title="お問い合わせ" /></a></h2> <p>インテリアや雑貨・家具、その他に関するお問い合わせはこちらまで。</p> </div> <div id="info"> <ul> <li id="first"><a href="#">HOME</a></li> <li><a href="#">INFO</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">SHOP</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">ACCESS</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <address>Copyright(c)2012 インテリアショップ a Interior</address> </div> </body> </html>