WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

HTML/CSS練習

f:id:mmmmofu:20160921025008j:plain

http://efu.sakura.ne.jp/web/interior/

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>インテリアショップ The SHOP</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>インテリアショップ The SHOP・・・北欧家具・北欧雑貨</h1>
<div id="content">
<h2><img src="img/info.gif" alt="インフォメーション"></h2>

<p>インテリアショップ The SHOPでの商品入荷情報、イベント、HPの更新など。</p>
<dl>
<dt>10.Dec.07</dt>
<dd>グスタフスベリ社 リンドベリシリーズ(復刻版)の商品が再入荷しました。</dd>
<dt>02.Dec.07</dt>
<dd>クロックス キッズ マンモスが入荷しました。</dd>
<dt>02.Dec.07</dt>
<dd>北欧リペア家具 新商品入荷しました。</dd>
<dt>01.Dec.07</dt>
<dd>【net shop】ムーミンマグ・プレートをUPしました。</dd>
</dl>
<p><img src="img/071221g.jpg" alt="グスタフスベリ入荷しました。"></p>
<h2><img src="img/concept.gif" alt="コンセプト"></h2>
<p>インテリアについての「想い」を感じてください。</p>

<h2><img src="img/shop.gif" alt="店舗情報"></h2>
<p>インテリアショップ The SHOP店内のイメージ写真と会社案内。</p>

<h2><img src="img/brands.gif" alt="家具インテリアブランド・デザイナー"></h2>
<p>北欧から日本までセレクトしているブランドの一部をご紹介しています。</p>

<h2><img src="img/designers.gif" alt="家具デザイナー"></h2>
<p>インテリアの歴史に名を残す「デザイナー」のご紹介。</p>

<h2><img src="img/products.gif" alt="商品一覧"></h2>
<p>北欧家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>

<h2><img src="img/access.gif" alt="アクセスマップ"></h2>
<p>インテリアショップ The SHOPまでの交通機関のご案内です。</p>

<h2><img src="img/blog.gif" alt="ブログ"></h2>
<p>カームスタッフの「ブログ」です。</p>


<h2><img src="img/contact_us.gif" alt="お問い合せ"></h2>
<p>インテリアや雑貨・家具、その他The SHOPに関するお問い合せはこちらまで。</p>
</div><!-- /#content -->
<div id="footer">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">INFO</a></li>
<li><a href="#">BRANDS</a></li>
<li><a href="#">DESIGNERS</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>
<p><small>Copyright(c)2015 インテリアショップ The SHOP</small></p>
</div><!-- /#footer -->
</div><!-- /#container -->
</body>
</html>
@charset "utf-8";
/* CSS Document */

/* reset */
html,body,div,h1,h2,p,img,ul,li {
  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;
}
/* body */
body {
  font-size: 13px;
  background: #D8E9D7;
}
#container {
  width: 660px;
  background: url(img/side_image.gif)no-repeat left top #FFF;;
  padding-left: 180px;
}
#container h1 {
  font-size: 16px;
  padding: 20px 20px 20px 0;
}
#content {
  width: 500px;
}
#content h2 {
  margin-bottom: 20px;
}
#content dl {
  width: 400px;
  margin-bottom: 30px;
}
#content dt {
  float: left;
  clear:left;
  width: 50px;
  font-weight: bold;
  line-height: 1.5;
}
#content dd {
  float:left;
  width:300px;
  line-height: 1.5;
  color: #49988A;
  margin-bottom: 20px;
}
#content p {
  margin-bottom: 40px;
}
#content p img {
  margin-bottom: 20px;
}
#footer li {
  float: left;
  border-right: 1px solid #333;
  padding: 0 10px 0 10px;
  margin-bottom: 30px;
  font-size: 14px;
}
#footer li a {
    color: #333;
}
#footer li:first-child {
  padding-left: 0;
}
#footer li:last-child {
  border: none;
}
#footer p {
  text-align: right;
  padding-right: 60px;
  clear: both;
  padding-bottom: 30px;
}