実践課題【CSS11】銀座　夏野 - ウェブ学のすすめ

課題

【CSS11】

以下の画像と同じように表示させるCSSを記述しなさい

リセットは、全称セレクタで

記述場所はエンベッド

XHTML 1.0 Transitional

テキスト無し（すべて画像で、代替文字は空）

引用元：CSS10〜11 float - Webデザインの勉強｜忘筌

解答

実践課題【CSS11】銀座　夏野 - 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>銀座　夏野</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

body {
    font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"ＭＳ Ｐゴシック", 
	sans-serif;
    background-image: url(http://jsrun.it/assets/q/b/i/O/qbiOX.gif);
}

#container {
    width: 760px;
    height: auto;
    margin: 0 auto 50px;
}

#wrapper {
    width: 715px;
    height: auto;
    margin: 0 auto;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
}

#header {
    width: 715px;
    height: 39px;
    background-color: #000;   
}

#content {
    background-color: #000;  
    width: 715px;
    height:415px; 
}

#mainCopy {
    width: 377px;
    height: 57px;
    margin: 15px 115px 0 15px;
    float: left;   
}

#btn {
    width: auto;
    height: auto;
    overflow: auto;
    padding-top: 60px;
}

#footer {
    width: 715px;
    height: 21px;
    background-color: #000;  
    border-top: 1px solid #aaa;
    text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<p><img src="http://jsrun.it/assets/d/3/d/y/d3dyb.jpg" alt="" /></p>
</div>
<div id="sidebar">
</div>
<div id="content">
<p><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/v/vinton/20120513/20120513003751.jpg" alt="" /></p>
<p><img id="mainCopy" src="http://jsrun.it/assets/k/Z/O/x/kZOxs.gif" alt="" /></p>
<div id="btn">
<a href="#"><img src="http://jsrun.it/assets/j/g/i/B/jgiBG.jpg" alt="" /></a>
<a href="#"><img src="http://jsrun.it/assets/i/7/b/s/i7bs3.jpg" alt="" /></a>
<a href="#"><img src="http://jsrun.it/assets/t/M/2/x/tM2xg.jpg" alt="" /></a>
</div>
</div>
<div id="footer">
<p><img src="http://jsrun.it/assets/9/j/B/v/9jBvX.gif" alt="" /></p>
</div>
</div>
</div>
</body>
</html>