ウェブ学のすすめ

Study of Web Design & Programing

実践課題【CSS07】 インテリアショップ a Interior

課題

【CSS07】

  • サイズは適宜、調整すること
  • 定義型リストに「float」の設定が必要
  • XHTML 1.0 Transitional

インテリアショップ a Interior

インフォメーション
インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。

2012年4月27日
    復刻版の商品が再入荷しました。
2012年4月26日
    ティーカップが入荷しました。
2012年4月25日
    オープン 家具・新商品入荷しました。

コンセプト
インテリアについての「想い」を感じてください。

店舗情報
店内のイメージ写真と会社案内。

商品紹介
家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。

アクセスマップ
「a Interior」までの交通機関のご案内です。

ブログ
スタッフの「ブログ」です。

お問い合せ
インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。

    HOME
    INFO
    CONCEPT
    SHOP
    PRODUCTS
    ACCESS
    BLOG
    CONTACT

Copyright(c)2012 インテリアショップ a Interior

引用元:CSS06〜07 - Webデザインの勉強|忘筌

解答

実践課題【CSS07】 インテリアショップ a Interior - jsdo.it - share JavaScript, HTML5 and CSS

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>インテリアショップ a Interior</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0; 
}
body {
    font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"MS Pゴシック", 
	sans-serif;
}
#container {
    width: 960px;
    height: auto;
    border-right: 30px solid #d8e9d7;
}
#wrapper {
    height: auto;
    overflow: auto; 
}
#header {
    float: left;
    width: 134px;
    height: 1300px;
}
#content {
    width: 826px;
}
#content h1 {
    font-size: 1.0em;
    padding-top: 20px;
}
#content h2 {
    margin: 20px 0;
}
#content dl {
    margin: 20px 0;
    width: 570px;
}
#content dt {
    float: left;
    margin-right: 20px;
}
#content dd {
    color: #96b1a2;
    font-weight: bold;
}
#content h3 {
    margin: 20px 0;
}
#footer ul {
    list-style-type: none;
    padding-top: 40px;
}
#footer li {
    color: #aaa;
    font-size: 1.0em;
    float: left;
}
#footer li a:link {
    color: #aaa;
    text-decoration: none;
    padding: 12px;
}
#footer li a:hover {
    text-decoration: underline;
}
#footer address {
    font-size: 0.9em;
    padding: 50px 20px 20px 0;
    text-align: right;
    font-style: normal;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p><img src="http://jsrun.it/assets/z/n/a/U/znaUS.gif" alt="interior shop" title="interior shop" /></p>
</div>
<div id="wrapper">
<div id="content">
<h1>インテリアショップ a Interior</h1>
<h2><a href="#"><img src="http://jsrun.it/assets/h/X/Q/O/hXQO3.gif" alt="インフォメーション" title="インフォメーション" /></a></h2>
<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="http://jsrun.it/assets/n/V/v/a/nVvam.jpg" alt="入荷情報" title="入荷情報" /></p>
<h3><a href="#"><img src="http://jsrun.it/assets/2/K/U/O/2KUO2.gif" alt="コンセプト" title="コンセプト" /></a></h3>
<p>インテリアについての「想い」を感じてください。</p>
<h3><a href="#"><img src="http://jsrun.it/assets/a/m/S/L/amSLA.gif" alt="ショップ" title="ショップ" /></a></h3>
<p>店内のイメージ写真と会社案内。</p>
<h3><a href="#"><img src="http://jsrun.it/assets/x/t/z/8/xtz83.gif" alt="商品紹介" title="商品紹介" /></a></h3>
<p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>
<h3><a href="#"><img src="http://jsrun.it/assets/6/L/A/e/6LAe1.gif" alt="アクセス" title="アクセス" /></a></h3>
<p>「a Interior」までの交通機関のご案内です。</p>
<h3><a href="#"><img src="http://jsrun.it/assets/1/R/W/9/1RW9s.gif" alt="ブログ" title="ブログ" /></a></h3>
<p>スタッフの「ブログ」です。</p>
<h3><a href="#"><img src="http://jsrun.it/assets/b/1/H/h/b1Hha.gif" alt="お問い合わせ" title="お問い合わせ" /></a></h3>
<p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。</p>
</div>
</div>
<div id="footer">
<ul>
<li><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>
<address>Copyright(c)2012 インテリアショップ a Interior</address>
</div>
</div>
</body>
</html>