レイアウト課題 - Webマスターへの道

[WEBページ　ENJOY!　サッカー]

レイアウト課題

ガワだけ完成（コードにやたら無駄が多いのでコードダイエットしてます。）

もうちょいかな　

　途中、floatはそこそこ・・わかるかな？

コードダイエット成功です。400行→ 180行（cssエンベッド）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サッカー大好き</title>
<style type="text/css">
<!--
*{
  padding:0;
  border:none;
  list-style-type:none;
  font-style:normal;
  font-weight: ;
  font-size:100%;
  text-align:left;
}
body{
	background-image:url(images/sanciro01.jpg);		
	}
#container{
  width:960px;
	margin:0 auto;
  background-color:rgba(255,255,255,1);
}
.wrapbox{                  
  width:320px;
  float:left;
  background-color:rgba(255,255,255,0.4);
}
#header{
font-size:2.2em;
font-weight:bold;	
width:300px;
height:300px;
line-height:300px;
text-indent:20px;
margin:-10px 10px 10px 10px;
background-color:lightblue;
}
#navi{
  width:300px;
  height:300px;
	margin:10px;
}
#navi01{
  width:140px;
  height:140psx;
	line-height:140px;
  margin-bottom:20px;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color: yellow;
	filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;	
	}
#navi02{
  width:140px;
  height:140px;
	line-height:140px;
  margin:0 0 20px 20px;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color:lawngreen;	
	filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;	
	}
#navi03{
  width:140px;
  height:140px;
	line-height:140px;
  margin-bottom:0px;
		text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color:skyblue;
		filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;		
	}
#navi04{
  width:140px;
  height:140px;
  margin-left:20px;
	text-align:center;
	font-weight:bold;
	line-height:140px;
	font-size:1.8em;
  float:left;
  background-color:lightpink;
		filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;		
	}
.basebox{
  width:320px;
  }
.right{
	float:right;
	}
img {
	margin: 10px;
	float: left;
}
-->
</style>
</head>
<body>
<div id="container">
	<div class="wrapbox">		
				<div id="header"><h1>サッカー大好き</h1></div>

		 		<div id="navi">
     		<ul>  
				<li id="navi01"><a href="#">ATTACK</a></li>
				<li id="navi02"><a href="#">DIFFENCE</a></li>
				<li id="navi03"><a href="#">FITNESS</a></li>
			    <li id="navi04"><a href="#">TACTICS</a></li>
     		</ul>
     	 </div>
			<div class="basebox"><img src="images/nakata01.jpg" alt="中田英寿"></div>
		  <div class="basebox">
			<img src="images/kaka01.jpg" alt="カカ">
			<img src="images/maicon01.jpg" alt="マイコン">
			<img src="images/lucio01.jpg" alt="ルシオ">
		 </div>
		 <div class="basebox">
			<img src="images/socrates01.jpg" alt="ソクラテス">
			<img src="images/pele01.jpg" alt="ペレ">
			<img src="images/tro01.jpg" alt="ボール">
		  </div>
	</div>   
	<div class="wrapbox">
		<div class="basebox">
			<img src="images/neimar01.jpg" alt="ネイマール">
			<img src="images/pato01.jpg" alt="パト">
			<img src="images/braball01.jpg" alt="ボール">
		</div>
		<div class="basebox"><img src="images/inamoto01.jpg" alt="稲本潤一"></div>
		<div class="basebox">
		<div class="right"><img src="images/ronaldo01.jpg" alt="ロナウド"></div>
			<img src="images/rivald01.jpg" alt="リバウド">
			<img src="images/robelt01.jpg" alt="ロベカル">
		</div>
		<div class="basebox"><img src="images/kazu01.jpg" alt="三浦知良"></div>
		<div class="basebox">
			<img src="images/jfa01.jpg" alt="日本サッカー協会">
			<img src="images/dog02.jpg" alt="イヌ">
			<img src="images/dog01.jpg" alt="ボーダーコリー">
		</div>
	</div>  
	<div class="wrapbox">
		 <div class="basebox"><img src="images/jo01.jpg" alt="城章二"></div>
		 <div class="basebox">
			  <div class="right"><img src="images/dunga01.jpg" alt="ドゥンガ"></div>
			  <img src="images/cbf01.jpg" alt="ブラジルサッカー連盟">
			  <img src="images/leo01.jpg" alt="レオナルド">
		 </div>     
   		 <div class="basebox">
  			 <img src="images/nagatomo01.jpg" alt="長友佑都">
			 <img src="images/paramexico01.jpg" alt="パラメヒコ">
			 <img src="images/honda02.jpg" alt="本田圭佑">
		 </div>
   		  <div class="basebox">
			 <img src="images/tanaka01.jpg" alt="田中マルクストゥーリオ">
			 <img src="images/santos01.jpg" alt="サントスアレサンドロ">
			 <img src="images/lopez01.jpg" alt="ロペスワグナー">
			 <img src="images/rui01.jpg" alt="ラモスルイ">
   		 </div>
			 <div class="basebox"><img src="images/kagawa01.jpg" alt="香川真司"></div>
 	</div>	
  </div><!--container-->
</body>
</html>

無駄に長いCODE　400行ある（メタボすぎる！）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>サッカー大好き</title>
<style type="text/css">
<!--
*{
  margin:0;
  padding:0;
  border:none;
  list-style-type:none;
  font-style:normal;
  font-weight: ;
  font-size:100%;
  text-align:left;
}
body{
	background-image:url(images/sanciro01.jpg);	
	}

#container{
  width:980px;
  height:1620px;
  margin:0 auto;
  background-color:rgba(255,255,255,0.3);
}

#wrap10{                  
  width:300px;
  height:1580px;
  margin:20px 0 0 20px;
  float:left;
  background-color:rgba(255,255,255,0.1);
}

#header{
font-size:2.2em;
font-weight:bold;	
width:300px;
height:300px;
margin:0 0 20px 0;
line-height:300px;
text-indent:20px;
background-color:lightblue;
}
#h1{
	
	}
#navi{
  width:300px;
  height:300px;
  margin-bottom:20px;
}

#navi01{
  width:140px;
  height:140px;
	line-height:140px;
  margin-bottom:20px;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color: yellow;
	filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;	
	}
#navi02{
  width:140px;
  height:140px;
	line-height:140px;
  margin:0 0 20px 20px;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color:lawngreen;	
	filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;	
	}
#navi03{
  width:140px;
  height:140px;
	line-height:140px;
  margin-bottom:0px;
		text-align:center;
	font-size:1.8em;
	font-weight:bold;
  float:left;
  background-color:skyblue;
		filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;		
	}
#navi04{
  width:140px;
  height:140px;
  margin-left:20px;
	text-align:center;
	font-weight:bold;
	line-height:140px;
	font-size:1.8em;
  float:left;
  background-color:lightpink;
		filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;		
	}
#box11{
  width:300px;
  height:300px;
  margin-bottom:20px;
  }
#box12{
  width:300px;
  height:300px;
  margin-bottom:20px;
 }
#b1201{
  width:140px;
  height:300px;
  float:left;
 	}
#b1202{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:right;
 	}
#b1203{
  width:140px;
  height:140px; 
  float:right;  
	}
#box13{
  width:300px;
  height:300px;
  margin-bottom:20px;
}
#b1301{
  width:300px;
  height:140px;
  margin-bottom:20px;
  }
#b1302{
  width:140px;
  height:140px;
  float:left;
}
#b1303{
  width:140px;
  height:140px;
  float:right;
  }
#wrap20{
  width:300px;
  height:1580px;
  margin:20px 0 0 20px;
  float:left;
  background-color:rgba(255,255,255,0.1);
}
#box21{
  width:300px;
  height:300px;
  margin-bottom:20px;
}
#b2101{
  width:300px;
  height:140px;
  margin-bottom:20px;
}
#b2102{
  width:140px;
  height:140px;
  float:left;
}
#b2103{
  width:140px;
  height:140px;
  float:right;
}
#box22{
  width:300px;
  height:300px;
  margin-bottom:20px;
 }
#box23{
  width:300px;
  height:300px;
  margin-bottom:20px;
}
#b2301{
  width:140px;
  height:300px;
  float:right;
	}
#b2302{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:left;
 	}
#b2303{
  width:140px;
  height:140px; 
  float:left;  
 	}
#box24{
  width:300px;
  height:300px;
  margin-bottom:20px;
  }
#box25{
  width:300px;
  height:300px;
  margin-bottom:20px;
}
#b2501{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:left;
	}
#b2502{
  width:140px;
  height:140px;
  margin:0 0 20px 20px;
  float:left;
	}
#b2503{
  width:300px;
  height:140px;
  margin-bottom:0px;
  float:left;
	}
	
#wrap30{
  width:300px;
  height:1580px;
  margin:20px 0 0 20px;
  float:left;
  background-color:rgba(255,255,255,0.1);
}
#box31{
  width:300px;
  height:300px;
  margin-bottom:20px;
 }
#box32{
  width:300px;
  height:300px;
  margin-bottom:20px;
 }
#b3201{
  width:140px;
  height:300px;
  float:right;
  	}
#b3202{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:left;
  	}
#b3203{
  width:140px;
  height:140px; 
  float:left;  
 	}
#box33{
  width:300px;
  height:300px;
  margin-bottom:20px;
  }
#b3301{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:left;
  	}
#b3302{
  width:140px;
  height:140px;
  margin:0 0 20px 20px;
  float:left;
  	}
#b3303{
  width:300px;
  height:140px;
  margin-bottom:0px;
  float:left;
  	}
#box34{
  width:300px;
  height:300px;
  margin-bottom:20px;
  }
#b3401{
  width:140px;
  height:140px;
  margin-bottom:20px;
  float:left;
 	}
#b3402{
  width:140px;
  height:140px;
  margin:0 0 20px 20px;
  float:left;
  	}
#b3403{
  width:140px;
  height:140px;
  margin-bottom:0px;
  float:left;
  	}
#b3404{
  width:140px;
  height:140px;
  margin-left:20px;
  float:left;
 	}
#box35{
  width:300px;
  height:300px;
  margin-bottom:20px;
 }
-->
</style>
</head>

<body>
=========
<div id="container"><!--container-->
<div id="wrap10"><!--wrap10-->
<div id="header"><h1>サッカー大好き</h1></div>

<div id="navi">
<div id="navi01"><a href="#">ATTACK</a></div>
<div id="navi02"><a href="#">DIFFENCE</a></div>
<div id="navi03"><a href="#"></a></div>
<div id="navi04"><a href="#">TACTICS</a></div>
</div>

<p>
<div id="box11"><img src="images/nakata01.jpg"alt="中田英寿"></div>
<div id="box12">
<div id="b1201"><img src="images/kaka01.jpg"alt="カカ"></div>
<div id="b1202"><img src="images/maicon01.jpg"alt="マイコン"></div>
<div id="b1203"><img src="images/lucio01.jpg"alt="ルシオ"></div>
</div>
<div id="box13">
<div id="b1301"><img src="images/socrates01.jpg"alt="ソクラテス"></div>
<div id="b1302"><img src="images/pele01.jpg"alt="ペレ"></div>
<div id="b1303"><img src="images/tro01.jpg"alt="ボール"></div>
</div>
</p>
</div><!--wrap10終了-->

<div id="wrap20"><!--wrap20-->
<p>
<div id="box21">
<div id="b2101"><img src="images/neimar01.jpg"alt="ネイマール"></div>
<div id="b2102"><img src="images/pato01.jpg"alt="パト"></div>
<div id="b2103"><img src="images/braball01.jpg"alt="ボール"></div>
</div>
<div id="box22"><img src="images/inamoto01.jpg"alt="稲本潤一"></div>
<div id="box23">
<div id="b2301"><img src="images/ronaldo01.jpg"alt="ロナウド"></div>
<div id="b2302"><img src="images/rivald01.jpg"alt="リバウド"></div>
<div id="b2303"><img src="images/robelt01.jpg"alt="ロベカル"></div>
</div>
<div id="box24"><img src="images/kazu01.jpg"alt="三浦知良"></div>
<div id="box25">
<div id="b2501"><img src="images/jfa01.jpg"alt="日本サッカー協会"></div>
<div id="b2502"><img src="images/dog02.jpg"alt="イヌ"></div>
<div id="b2503"><img src="images/dog01.jpg"alt="ボーダーコリー"></div>
</div>
</p>
</div><!--wrap20終了-->

<div id="wrap30"><!--wrap30-->
<p>
<div id="box31"><img src="images/jo01.jpg"alt="城章二"></div>
<div id="box32">
<div id="b3201"><img src="images/dunga01.jpg"alt="ドゥンガ"></div>
<div id="b3202"><img src="images/cbf01.jpg"alt="ブラジルサッカー連盟"></div>
<div id="b3203"><img src="images/leo01.jpg"alt="レオナルド"></div>
</div>
<div id="box33">
<div id="b3301"><img src="images/nagatomo01.jpg"alt="長友佑都"></div>
<div id="b3302"><img src="images/paramexico01.jpg"alt="パラメヒコ"></div>
<div id="b3303"><img src="images/honda02.jpg"alt="本田圭佑"></div>
</div>
<div id="box34">
<div id="b3401"><img src="images/tanaka01.jpg"alt="田中マルクストゥーリオ"></div>
<div id="b3402"><img src="images/santos01.jpg"alt="サントスアレサンドロ"></div>
<div id="b3403"><img src="images/lopez01.jpg"alt="ロペスワグナー"></div>
<div id="b3404"><img src="images/rui01.jpg"alt="ラモスルイ"></div>
</div>
<div id="box35"><img src="images/kagawa01.jpg"alt="香川真司"></div>
</p>
</div><!--wrap30終了-->
</div><!--container終了-->
</body>
</html>