41日目 | テスト | 提供された画像を使って1カラムのサイトを作る

授業

提供された画像を使って1カラムのサイトを作りました。インテリアショップのサイトという体です。指定時間2時間。

忍者にアップロードした完成したサイト
http://latte.moto-chika.com/interior_shop/index.html

  • html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インテリアショップ a Interior</title>
<link rel="stylesheet" href="css/style.css" media="print, screen">
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" /></head>

<body>
<div id="w_wrapper">
<div id="wrapper">
<div id="content">
<div id="main">
<div class="category">
<h1>インテリアショップ a Interior</h1>
<h3><img src="img/info.gif" width="398" height="58"  alt="インフォメーション"><em>インフォメーション</em></h3>
<p>インテリアショップ「a Interior」での商品入荷情報、イベント、HPの更新など。</p>
<dl id="info">
<dt>2012年4月27日</dt>
    <dd>復刻版の商品が再入荷しました。</dd>
<dt>2012年4月26日</dt>
    <dd>ティーカップが入荷しました。</dd>
<dt>2012年4月25日</dt>
    <dd>オープン　家具・新商品入荷しました。</dd>
</dl>
<div id="photo">
<img src="img/cup.jpg"  width="400"  height="121"  alt="">
</div> <!--photo end-->
</div><!--category end-->

<div class="category">
<h3><img src="img/concept.gif" width="398" height="58"  alt="コンセプト"><em>コンセプト</em></h3>
<p>インテリアについての「想い」を感じてください。</p>
</div><!--category end-->

<div class="category">
<h3><img src="img/shop.gif" width="398" height="58"  alt="店舗情報"><em>店舗情報</em></h3>
<p>店内のイメージ写真と会社案内。</p>
</div><!--category end-->

<div class="category">
<h3><img src="img/products.gif" width="398" height="58"  alt="商品紹介"><em>商品紹介</em></h3>
<p>家具・雑貨をはじめとした取り扱い商品の一部をご紹介しています。</p>
</div><!--category end-->

<div class="category">
<h3><img src="img/products.gif" width="398" height="58"  alt="アクセスマップ"><em>アクセスマップ</em></h3>
<p>「a Interior」までの交通機関のご案内です。</p>
</div><!--category end-->

<div class="category">
<h3><img src="img/blog.gif" width="398" height="58"  alt="ブログ"><em>ブログ</em></h3>
<p>スタッフの「ブログ」です。</p>
</div><!--category end-->

<div class="category">
<h3><img src="img/blog.gif" width="398" height="58"  alt="お問い合せ"><em>お問い合せ</em></h3>
<p>インテリアや雑貨・家具、その他に関するお問い合せはこちらまで。</p>
</div><!--category end-->
</div><!--main end-->
<div id="footer">
<ul id="footer1">
    <li>HOME </li>
    <li>INFO</li>
    <li>CONCEPT</li>
    <li>SHOP</li>
   <li> PRODUCTS</li>
   <li>ACCESS</li>
    <li>BLOG</li>
    <li>CONTACT</li>
 </ul>
<div id="copyright"><p >Copyright(c)2012 インテリアショップ a Interior</p></div>
</div><!--footer end -->
</div><!--content end-->
</div><!--wrapper end-->
</div><!--w_wrapper end-->
<ul class="tdftad">
<li><a href="http://www.ninja.co.jp/analysis/" target="_top">有料 ログ解析</a></li>
<li class="tdftpr"><a href="http://hikkoshi-kakaku.com/osaka/hirakata.html" target="_top">引越し　枚方市</a></li>
<li class="tdftpr"><a href="http://indz.jp/" target="_top">インディーズ クチコミ</a></li>
<li class="tdftpr"><a href="http://gmer.jp/" target="_top">ゲーム クチコミ</a></li>
<li class="tdftlink"><a href="http://crowd.biz-samurai.com/" target="_top" rel="nofollow">自宅で出来る小遣い稼ぎ</a></li>
</ul></body>
</html>

charset "UTF-8";

*{
	margin:0;
	padding:0;
}


/* font指定
---------------------------------------------------------*/
html{ font-size:16px; }
body{ font-size:14px; }
h1{ font-size:16px; }
h2{ font-size:14px; }
h3{ font-size:14px; }

body{
	font-size:0.875em;
	font-family:
	  "ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif
	;
 }
 
 em{
	 visibility:hidden;
	 }

h1{
	font-size:1.2em;
	font-style:normal;
	padding:0 0 20px 0;
}
	
#w_wrapper{
		background-color:#d7e8d6;
		width:850px;
		}
 
 #wrapper{
		background-image:url(../img/side_image.gif);
		background-repeat:no-repeat;
		background-color:#fff;
		width:770px;
 }
 
 #content{
	 background-color:#fff;
	 width:582px;
	 margin:0 0 0 170px;
 }
 
 #info{
	 margin:15px 0 0 0;
	 padding:0 0 18px 0;
 }

#info dl{
		line-height:20px;
		padding:0 0 10px 0;

}
#info dt{
	float:left;
}

#info dd{
	color:#99C;
	font-style:bold;
	margin:0 10px 0 10px ;
}

.category{
	margin:10px 0 0 0;
	padding:0 0 10px 0;
}

#photo{
	margin:10px 0 0 0;
	padding:0 0 10px 0;
}

#main{
	margin:0;
	padding:0 0 10px 0;
}

ul{
	list-style-type:none;
}

#footer1 li{
	float:left;
	font-size:0.8em;
	margin:5px 5px 15px 0;
	padding:0 5px 0 0;
	border-right:1px solid #999;
}

#copyright{
	clear:both;
	font-size:0.9em;
	text-align:center;
}