CSSテスト - １カラム - 実践するWEBサイト制作

インテリアショップ

幅850px、左揃え
空きなどの詳細は、適宜設定する
画像は制作できる場合は、制作する
著作情報は、センター揃え（画像は右揃え）でも可

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インテリアショップcss_test</title>

<link rel="stylesheet" href="css/style.css" media="screen,print">

</head>
<body>

<div id="container">

<div id="wrapper">

<h1>インテリアショップ a Interior</h1>

<h2><img src="images/info.gif" alt="インフォメーション"></h2>

<h3>
インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</h3>

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

<p class="cup_img"><img src="images/cup.jpg" alt=""></p>

<h2 class="first"><img src="images/concept.gif" alt="コンセプト"></h2>
<p>
インテリアについての「想い」を感じてください。</p>

<h2><img src="images/shop.gif" alt="店舗情報"></h2>

<p>店内のイメージ写真と会社案内。</p>

<h2><img src="images/products.gif" alt="商品紹介"></h2>

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

<h2><img src="images/access.gif" alt="アクセスマップ"></h2>

<p>「a Interior」までの交通機関のご案内です。</p>

<h2><img src="images/blog.gif" alt="ブログ"></h2>

<p>スタッフの「ブログ」です。</p>

<h2><img src="images/contact_us.gif" alt="お問い合せ
"></h2>

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

</div><!-- / wrapper -->

<div id="footer">

<ul>
<li class="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>

<address>Copyright&copy;2012 インテリアショップ a Interior</address>

</div><!-- / footer -->

</div><!-- / container -->

</body>
</html>

ソースコード【 CSS 】

@charset "UTF-8";
/* CSS Document */


/* ===============================reset
 */
html, body, div, h1, h2, h3,
p, adress, ul, ol, li, dl, dt, dd {
	
	margin: 0;
	padding: 0;
	font-family:
	    "Hiragino Kaku Gothic Pro",
            "ヒラギノ角ゴ Pro W3",
	    Meiryo,
	    "メイリオ",
	    Osaka,
	    "MS P Gothic",
	    "ＭＳ Ｐゴシック",
	    sans-serif;
	line-height: 1.5;
}

ul {
	list-style-type: none;

	}

img {
	border: none;
	vertical-align: bottom;
	}


/* ====================body
 */

body {
        color: #3E3C3D;	
	}

/* ===============================color
 */
h1, h3 {color: #666;}
p, dt, ul {color: #585756}
dd {color: #699;}


/* ================================font-size
 */
h1, address {font-size: 12px;}
h3 {font-size:16px;}
dt {font-size: 14px;}
li, dd {font-size: 15px;}


/* ==============================layout
 */

#container {
	width: 850px;
        border-right: 70px solid #D7E8D6;
	background-color: #FFF;
	background-image:url(../images/side_image.gif) ;
	background-repeat: no-repeat;	
	}
	
#wrapper {
        padding-left: 180px;
	}

h1 {
	padding-top: 12px;
	}

h2 {
	margin-top: 23px;
	}

h2.first {
	padding-top: 16px;
	}

h3 {
        line-height: 2.6em;
    	}

p {
	padding-top: 12px;
	}

dt {
        float: left;
	}
	
dl {
	margin-top: 4px;
	font-weight: bold;
	}

dd {
	line-height: 1.4em;
	font-weight: 500;
	text-indent: 1.8em;
	}

.cup_img {
	padding-top: 20px;
	}

#footer {
	width: 850px;
        text-align: center;
	margin-top: 35px;
	background-color: #fff;
	}

li {
  	display: inline;
	padding-left: 7px;
	padding-right: 7px;
	border-left: 1px solid #585756;
	}

li.first {
	border-left: none;
	}

li a {
         color: #585756;
         text-decoration: none;
	 }

li a:hover {
	color: #fa0;
	}


address {
	text-align: right;
        padding: 16px 80px 80px 0;
	}

ブラウザーで表示【 Firefox 】

PAGE TOP