HTMLのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ここにタイトルを入れます</title>
<meta name="description" content="ページの概要を80文字程度で書きます。" />
<meta name="keywords" content="キーワード1,キーワード2,キーワード3,各キーワードは半角カンマで区切ります。
キーワードを詰めすぎるとスパム判定される場合もあるので,主要なキーワード5個程度にとどめておいた方がよいでしょう。" />
<link rel="stylesheet" href="002.css" type="text/css">
</head>

<body>
<div id="container">


<!--★ここから,ヘッダー部★-->
<div id="header">

<div id="top_left">
<a href="#"><img src="images/site.gif" alt="" border="0" /></a>
</div>

<div id="top_right">
<img src="images/head_bunner.gif" alt="" />
</div>

<div id="top_center">
<img src="images/bullet.gif" alt="" border="0" /><a href="#">お客様カウンター</a>
  <img src="images/bullet.gif" alt="" border="0" /><a href="#">お支払い・送料</a>
<br />  
<img src="images/bullet.gif" alt="" border="0" /><a href="#">サイトのご利用方法(Q&A)</a>
  <img src="images/bullet.gif" alt="" border="0" /><a href="#">お問い合わせ</a>
</div>

<br clear="all" />

<div id="top" class="link_h"><a href="#">TOP</a></div>
<div id="soft" class="link_h"><a href="#">ソフトウェア</a></div>
<div id="down" class="link_h"><a href="#">ダウンロード</a></div>
<div id="hard" class="link_h"><a href="#">ハードウエア</a></div>
<div id="accessory" class="link_h"><a href="#">アクセサリー</a></div>
<div id="supply" class="link_h"><a href="#">サプライ</a></div>
<div id="book" class="link_h"><a href="#">書籍など</a></div>
<div id="osusume" class="link_h"><a href="#">おすすめ特集</a></div>

<div id="top2" class="link_h2"></div>
<div id="soft2" class="link_h2"></div>
<div id="down2" class="link_h2"></div>
<div id="hard2" class="link_h2"></div>
<div id="accessory2" class="link_h2"></div>
<div id="supply2" class="link_h2"></div>
<div id="book2" class="link_h2"></div>
<div id="osusume2" class="link_h2"></div>

</div><!--/header-->



<!--★ここから,コンテンツ部★-->
<div id="content">


<!--★コンテンツの左側★-->
<div id="splitcontentleft">

<!--********************* ↓*******************-->
<div id="leftbox">
<a href="#"><img src="images/photo01.jpg" alt="" border="0" /></a>
<a href="#"><img src="images/photo02.jpg" alt="" border="0" /></a><
</div><!--/leftbox-->
<!--********************* ↑*******************-->

<!--********************* ↓*******************-->
<div id="rightbox">
<div id="pickup">
PICK UP!
</div>
<img src="images/pickup01.jpg" alt="" />
<table id="table01" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="td01" valign="top"><img src="images/text_video.gif" alt="" /><br />
<a href="#">エディウスJ</a><br />
初めての方でも、簡単に映像編集が楽しめる画期的なビデオ編集ソフト</td>
    <td valign="top" valign="top"><a href="#"><img src="images/img_video.gif" alt="" border="0" /></a></td>
  </tr>
  <tr>
    <td id="td01" valign="top"><img src="images/text_shredder.gif" alt="" /><br />
<a href="#">シュレッダーGCS18CDX</a><br />
紙類から、CD・DVDなどの記録用メディアのカットまで、これ1台でOK!</td>
    <td valign="top"><a href="#"><img src="images/img_shredder.gif" alt="" border="0" /></a></td>
  </tr>
  <tr>
    <td id="td01" valign="top"><img src="images/text_battery.gif" alt="" /><br />
<a href="#">pocketMOBA MV</a><br />
ノートPCにも対応しているモバイルバッテリー一度使うと手放せない!</td>
    <td valign="top"><a href="#"><img src="images/img_battery.gif" alt="" border="0" /></a></td>
  </tr>
</table>

</div><!--/rightbox-->
<!--********************* ↑*******************-->

<br clear="all" />

<div class="kokoku">
<table width="498" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="3"><div id="selection">SPECIAL SERECTION</div></td>
    </tr>
  <tr>
    <td><a href="#"><img alt="" border="0" src="images/special01.gif" /></a></td>
    <td><a href="#"><IMG alt="" border="0" src="images/special02.gif"></a></td>
    <td><a href="#"><IMG alt="" border="0" src="images/special03.gif"></a></td>
  </tr>
  <tr>
    <td class="kokoku_td">お問い合わせの多かった販売終了商品がアウトレットで復活!</td>
    <td class="kokoku_td">ストレスのない日本語入力環境で、思いが伝わる文書作成を実感してください。</td>
    <td class="kokoku_td">お子さまだけでなく、家族みんなで使える機能が満載!</td>
  </tr>
</table>
</div><!--/kokoku-->

<div id="whatnews_1">
WHAT'S NEWS
</div><!--/whatnews1-->

<div id="whatnews">
<a href="#"><img src="images/bullet.gif" alt="" border="0" />アイデアマスター  
誰でも使える発想支援ソフト</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />ホームPC活用統合ソフト ジャストホーム4</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />在庫一掃!大幅値下げにてご提供! Just MyShopアウトレットコーナー</a>
</div><!--/whatnews-->

</div><!--/splitcontentleft-->



<!--★コンテンツの右側★-->
<div id="splitcontentright">
<div id="corner">
<a href="#"><img src="images/bullet.gif" alt="" border="0" />セキュリティ特集</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />エネループコーナー</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />業務改善コーナー</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />電源トラブル対策!</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />無線LAN特集</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />ハイスペックPC</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />木の小物たち</a>
</div><!--/corner-->

<div id="corner">
<a href="#"><img src="images/bullet.gif" alt="" border="0" />スタッフ日記</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />アフィリエイト募集中</a>
<a href="#"><img src="images/bullet.gif" alt="" border="0" />MyShopメルマガ発信</a>
</div><!--/corner-->

<div id="powerup_1">
パワーアップツール
</div>
<div class="powerup">
<a href="#"><img src="images/powerup01.gif" alt="" align="left" hspace="5" border="0" /></a><strong>翻訳ブレイン</strong><br />
<strong>日英・英日翻訳ソフト</strong><br />
国内最高水準の精度を誇る翻訳エンジンと270万語の辞書による高品質翻訳。
</div>

<div class="powerup">
<a href="#"><img src="images/powerup02.gif" alt="" align="left" hspace="5" border="0" /></a><strong>一発!OCR Pro5 for 一太郎</strong><br />
活字の紙文書をスキャナしたものなどを、一太郎で編集できるOCRソフトです。
</div>

<div class="powerup">
<a href="#"><img src="images/powerup03.gif" alt="" align="left" hspace="5" border="0" /></a><strong>  速攻!全国ゼンリン </strong><br />
花子2007/2006/2005との連携機能を実現した電子地図帳。地図を花子に転送してオリジナル地図を簡単に作成できます。
</div>

<div class="powerup">
<a href="#"><img src="images/powerup04.gif" alt="" align="left" hspace="5" border="0" /></a><strong>プレミアム辞書・辞典パック for ATOK</strong><br />
明鏡国語・ジーニアス英和/和英&企業名変換&英文Eメール文例。
</div>

<div class="powerup">
<a href="#"><img src="images/powerup05.gif" alt="" align="left" hspace="5" border="0" /></a><strong>一太郎特選テンプレート&イラスト集 [学校・教育編] </strong><br />
生徒・保護者へのお便り、学級経営、教材、賞状などのテンプレート1.050点。
</div>

<div class="powerup">
<a href="#"><img src="images/powerup06.gif" alt="" align="left" hspace="5" border="0" /></a><strong>カルキングJ2</strong><br />
学校での試験問題や論文作成、ビジネスシーンでの技術資料などの作成に最適です。【書籍「カルキングJ2公式ガイドブック」付き】 
</div>

</div><!--/splitcontentright-->

</div><!--/content-->



<!--★ここから,フッター部★-->
<div id="footer">
<img src="images/bullet.gif" alt="" border="0" /><a href="#">お客様カウンター</a>
  <img src="images/bullet.gif" alt="" border="0" /><a href="#">お支払い・送料</a>
<img src="images/bullet.gif" alt="" border="0" /><a href="#">サイトのご利用方法(Q&A)</a>
  <img src="images/bullet.gif" alt="" border="0" /><a href="#">お問い合わせ</a>
</div><!--/footer-->


</div><!--/container-->
</body>
</html>
CSSのソース
body {
     margin-top:5px;
     text-align:center;
     font-size:12px;
	 color:#555555;
	 line-height:120%;
}

a:link {
     text-decoration:none;
	 color: #339900;
}
a:visited {
     text-decoration:none;
	 color: #339900;
}
a:hover {
     text-decoration: underline;
	 color: #FF0033;
}

#container{
     margin:0 auto;
	 width:704px;
     text-align:left;
}

#header{
     width:704px;
	 margin-bottom:10px;
}

#content{
     width:704px;
}

#splitcontentleft{
     float:left;
	 width:520px;
}

#splitcontentright{
     float:right;
	 width:174px;
}

#footer{
     clear:both;
	 width:704px;
}


/* ページの基本デザイン */

/****** headerのデザイン *****/

#top_left{
     float:left;
}

#top_center{
     float:right;
     font-size:12px;
	 padding-top:15px;
	 padding-right:5px;
	 text-align:right;
	 line-height:150%;
}

#top_right{
     float:right;
}

.link_h{
     float:left;
	 border-color:#FFFFFF;
	 border-style:solid;
	 border-width:1px 1px 1px 0px;
	 background-color:#666666;
	 font-size:12px;
	 width:87px;
	 text-align:center;
}

.link_h a{
     display:block;
     text-decoration:none;
	 color:#ffffff;
     padding:3px 5px;
}

#top a:hover{
     background-color:#CC0000;
}

#soft a:hover{
     background-color: #9933CC;
}

#down a:hover{
     background-color: #FF6600;
}

#hard a:hover{
     background-color: #999966;
}

#accessory a:hover{
     background-color: #6666CC;
}

#supply a:hover{
     background-color: #339966;
}

#book a:hover{
     background-color: #FFCC00;
}

#osusume a:hover{
     background-color: #FF0099;
}


.link_h2{
     float:left;
	 border-color:#FFFFFF;
	 border-style:solid;
	 border-width:0px 1px 1px 0px;
	 width:87px;
	 height:3px;
	 margin-bottom:10px;
}

#top2{
     background-color:#CC0000;
}

#soft2{
     background-color: #9933CC;
}

#down2{
     background-color: #FF6600;
}

#hard2{
     background-color: #999966;
}

#accessory2{
     background-color: #6666CC;
}

#supply2{
     background-color: #339966;
}

#book2{
     background-color: #FFCC00;
}

#osusume2{
     background-color: #FF0099;
}

/***** splitcontentleftのデザイン ******/

#leftbox{
     float:left;
	 width:260px;
	 margin-bottom:10px;
}

#rightbox{
     float:right;
	 width:260px;
	 margin-bottom:10px;
}

#pickup{
     width:238px;
	 border:#999999 solid 1px;
	 background-color:#F3F3F3;
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 color:#CC0000;
	 padding-left:10px;
	 margin-bottom:5px;
}

#table01{
     width:250px;
	 margin-top:5px;
}

#td01{
     padding-bottom:10px;
	 line-height:130%;
}

.kokoku{
     width:494px;
	 padding:5px;
	 text-align:center;
	 border: #CCCCCC double 3px;
	 background-color:#F3F3F3;
}

#selection{
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 color:#CC0000;
	 text-align:left;
	 display:block;
	 margin:5px 10px;
	 border-bottom: #990000 dotted 1px;
	 padding:0px 10px;
}

.kokoku_td{
     padding:5px 20px;
	 text-align:left;
}

#whatnews_1{
	 font-family:Arial, Helvetica, sans-serif;
	 font-weight:bold;
	 color:#CC0000;
	 text-align:left;
	 display:block;
	 margin:10px 0px 0px 0px;
	 padding:0px 3px;
}

#whatnews{
     width:500px;
     font-size:12px;
	 border-top:#666666 dotted 1px;
	 border-bottom:#666666 dotted 1px;
	 padding:10px 0px 10px 10px;
	 line-height:150%;
}

#whatnews a{
     display:block;
}


/***** splitcontentrightのデザイン *****/

#corner{
     line-height:160%;
	 padding:3px 0px;
	 border-top:#666666 1px dashed;
	 margin-bottom:10px;
}

#corner a{
     display:block;
	 font-size:15px;
	 font-weight:bold;
	 color:#666666;
}

#powerup_1{
	 font-weight:bold;
	 padding:3px 10px;
	 background-color:#FF6666;
	 color:#FFFFFF;
	 margin-bottom:5px;
}

.powerup{
     margin:10px 0px 5px 0px;
     font-size:10px;
	 line-height:100%;
	 border-bottom:#FF9999 solid 1px;
	 height:75px;
}

/***** footerのデザイン *****/

#footer{
	 display:block;
	 padding:2px;
	 border-top:#999999 solid 1px;
	 border-bottom:#999999 solid 1px;
	 background-color:#f5f5f5
}