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="キーワード１,キーワード２,キーワード３,各キーワードは半角カンマで区切ります。
キーワードを詰めすぎるとスパム判定される場合もあるので，主要なキーワード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>カルキングＪ2</strong><br />
学校での試験問題や論文作成、ビジネスシーンでの技術資料などの作成に最適です。【書籍「カルキングＪ2公式ガイドブック」付き】
</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
}