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個程度にとどめておいた方がよいでしょう。" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="001.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header01"></div>
<div id="header02"></div>
<div id="content">
<!--★ここから，コンテンツの左ボックス★-->
<div class="splitcontentleft">
<!--*******************↓ホットニュース*****************-->
<div id="news">
<div id="news_header1">
<div style=" font-weight:bold; color:#FFFFFF; padding-left:20px; padding-top:2px;">Hot News</div>
<div style=" font-weight:bold; font-size:13px;color: #FF0000; padding-left:20px; padding-top:5px;">ホットニュース</div>
</div>
<div id="news_content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/sankaku.gif" alt="" /></td>
<td><a href="#" >探していた何かがそこにある スタイリッシュに生きる大人のスマートフォン（W-ZERO3[es]）</a></td>
</tr>
<tr>
<td><img src="images/sankaku.gif" alt="" /></td>
<td><a href="#" >ウィルコムのお子さま向けケータイ</a></td>
</tr>
<tr>
<td><img src="images/sankaku.gif" alt="" /></td>
<td><a href="#" >【AIR-EDGE】AH-H407P PCにスロットインしたまま持ち運べるジャストPCカードサイズ</a></td>
</tr>
</table>
</div><!--/news_content-->
<div id="news_footer"></div>
</div><!--/news-->
<!--*******************↑ホットニュース*****************-->
<!--*******************↓ランキング*****************-->
<div id="news">
<div id="news_header2">
<div style=" font-weight:bold; color:#FFFFFF; padding-left:20px; padding-top:2px;">Ranking</div>
<div style=" font-weight:bold; font-size:13px;color: #669966; padding-left:20px; padding-top:5px;">売れ筋ランキング</div>
</div>
<div id="news_content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/no1.jpg" alt="" /></td>
<td><img src="images/no1i.gif" alt="" />
<br /><a href="#" >W-ZERO3[es]<br />
Premium version[定額プラン特価]</a></td>
</tr>
<tr>
<td><img src="images/no2.jpg" alt="" /></td>
<td><img src="images/no2i.gif" alt="" />
<br /><a href="#" >9(nine)/WS009KE</a></td>
</tr>
<tr>
<td><img src="images/no3.jpg" alt="" /></td>
<td><img src="images/no3i.gif" alt="" />
<br /><a href="#" >【NECインフロンティア】AX420N</a></td>
</tr>
<tr>
<td><img src="images/no4.jpg" alt="" /></td>
<td><img src="images/no4i.gif" alt="" />
<br /><a href="#" >【京セラ】WX310K</a></td>
</tr>
<tr>
<td><img src="images/no5.jpg" alt="" /></td>
<td><img src="images/no5i.gif" alt="" />
<br /><a href="#" >【NECインフロンティア】AX520N</a></td>
</tr>
</table>
</div><!--/news_content-->
<div id="news_footer"></div>
</div><!--/news-->
<!--*******************↑ランキング*****************-->
</div><!--/splitcontentleft-->
<!--★ここから，コンテンツの右ボックス★-->
<div class="splitcontentright">
<!--*******************↓ウィルコムについて*****************-->
<div id="about">
<div id="about_header"></div>
<div id="about_content">
ウィルコムは日本初の通話・メールの定額サービスを実現し，スマートフォンタイプの端末などの人気により，今ではご利用者が450万人を突破いたしました。<br />
サービスエリアは全国の都市部だけでなく校外までのワイドにカバーし，人口カバー率は99％を実現。息づかいまで聞こえるほどのリアルな音質，省電力・低電磁波設計などウィルコムのPHSは，高品質なモバイルツールです。
</div><!--/about_content-->
<div id="about_footer"></div>
</div><!--/about-->
<!--*******************↑ウィルコムについて*****************-->
<!--*******************↓テレビCM*****************-->
<div id="cm">
<div id="cm_header">
<div style="font:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#FFFFFF; padding-left:60px; padding-top:7px;">新しいテレビCM<span style="font-size:16px; margin:0px 4px;">「SHIHOオムニバス編／夜編」</span>オンエア中！</div>
</div>
<div id="cm_content">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="cm_box01" rowspan="2">
<img src="images/cm.jpg" alt="" />
</td>
<td>いつも明るく，笑顔が印象的なSHIHOさん。<br />
今回のCMでも，SHIHOさんのキラキラした魅力が存分に発揮されています。<br />
そんなSHIHOさんのエネルギーはどこからやってくるのか，スペシャルインタビューでざっくらばらんに聞いてみました。
</td>
</tr>
<tr>
<td><img src="images/shiho.jpg" alt="" width="99" height="52" hspace="2" align="left" /><a href="#">CMメイキングスペシャルサイト「SHIHI WITH WILLCOM」はこちら<img src="images/yajirusi.gif" alt="" border="0" /></a></td>
</tr>
</table>
</div>
<!--/cm_content-->
<div id="cm_footer"></div>
</div>
<!--/cm-->
<!--*******************↑テレビCM*****************-->
<div id="lineup_img">
<span style="color:#FFFFFF; font-size:14px; font-weight:bold; padding-left:15px;">機種ラインアップ</span>
<span style="color:#999999; font-size:13px; font-weight:bold;padding-left:150px;">−タイプ別おすすめケータイをご紹介−</span>
</div>
<!--*******************↓機種ラインアップ１*****************-->
<div class="lineup_box">
<div class="lineup_box01">
W-ZERO3 [es]/WS007SH
</div>
<div class="lineup_box02">
<a href="#" ><IMG border=0 src="images/001.jpg" ></a>
</div>
<div class="lineup_box03">
日本初、Windows Mobile5.0を搭載したW-ZERO3に新モデル登場。新しく加わったダイヤルキーでケータイとしての操作性も兼ね備えました。
</div>
<div class="lineup_box04">
定額プラン特価<br />
新規契約:19,800円（税込）〜<br />
機種変更:19,800円（税込）〜
<div align="right"><a href="#" ><img src="images/syosai.gif" alt="" border="0" /></a></div>
</div>
</div><!--/lineup_box-->
<!--*******************↑機種ラインアップ１*****************-->
<!--*******************↓機種ラインアップ２*****************-->
<div class="lineup_box">
<div class="lineup_box01">
WX320K
</div>
<div class="lineup_box02">
<a href="#" ><IMG border=0 src="images/002.jpg" ></a>
</div>
<div class="lineup_box03">
RSSリーダー・オンラインストレージにも対応。進化したフルブラウザ「Opera ver.7」を搭載。表面にアルミニウムを使用したスタイリッシュな1台です。Javaも搭載しゲームも楽しめます。
</div>
<div class="lineup_box04">
限定特価<br />
新規契約:7,800円（税込）〜<br />
機種変更:16,800円（税込）〜
<div align="right"><a href="#" ><img src="images/syosai.gif" alt="" border="0" /></a></div>
</div>
</div><!--/lineup_box-->
<!--*******************↑機種ラインアップ２*****************-->
<div class="lineup_box_rightborder"></div>
<!--*******************↓機種ラインアップ３*****************-->
<div class="lineup_box">
<div class="lineup_box01">
9(nine)/WS009KE
</div>
<div class="lineup_box02">
<a href="#" ><IMG border=0 src="images/003.jpg" ></a>
</div>
<div class="lineup_box03">
W-OAM対応のW-SIM搭載で、対応エリアではより快適なブラウジングと安定した通話を実現します。極限までそぎ落とされたミニマムな形状でありながら、隅々まで配慮されたデザインと遊び心に溢れたGUI。
</div>
<div class="lineup_box04">
限定プラン特価<br />
新規契約:7,800円（税込）〜<br />
機種変更:10,800円（税込）〜
<div align="right"><a href="#" ><img src="images/syosai.gif" alt="" border="0" /></a></div>
</div>
</div><!--/lineup_box-->
<!--*******************↑機種ラインアップ３*****************-->
<!--*******************↓機種ラインアップ４*****************-->
<div id="lineup_box">
<div id="lineup_box01">
WX321J
</div>
<div id="lineup_box02">
<a href="#" ><IMG border=0 src="images/004.jpg" ></a>
</div>
<div id="lineup_box03">
指紋認証により機能ごとのアクセス制限が可能な「ロック設定機能」を搭載。紛失時に遠隔操作で電話のロックが可能な「リモートロック」にも対応したセキュリティケータイ。カーソルキーにより操作性もアップ。
</div>
<div id="lineup_box04">
限定プラン特価<br />
新規契約:9,800円（税込）〜<br />
機種変更:16,800円（税込）〜
<div align="right"><a href="#" ><img src="images/syosai.gif" alt="" border="0" /></a></div>
</div>
</div><!--/lineup_box-->
<!--*******************↑機種ラインアップ４*****************-->
<div class="lineup_box_rightborder"></div>
</div><!--/splitcontentright-->
<br clear="all" /><!--このタグは，IE以外のブラウザにとって必要なタグ-->
</div><!--/content-->
<div id="footer"></div>
</div><!--/container-->
</body></html>
CSSのソース
body {
font-size: 12px;
color:#333333;
margin:0px;
background-color: #ecf9ff;
}
a:link {
color: #3366cc;
}
a:visited {
color: #3366CC;
}
a:hover {
text-decoration:none;
color:#FF0000;
}
#container {
margin:0 auto;
width:730px;
background-color:#FFFFFF;
border-left:1px solid #e1e1e1;
border-right:1px solid #e1e1e1;
}
#header01 {
background-color:#1b9ced;
height:7px;
width:730px;
position:relative;
}
#header02 {
background-image:url('images/header_bg.gif');
height:123px;
width:708px;
background-repeat:no-repeat;
margin: 0px 10px 0px 11px;
}
#content{
float:center;
width:708px;
margin:13px 10px 0px 11px;
background-image:url('images/content_bg.gif');
}
.splitcontentleft{
float:left;
width:181px;
}
.splitcontentright {
float:right;
width:507px;
}
#footer {
margin-top:10px;
border-bottom:#e1e1e1 solid 1px;
background-color: #efefef;
height:7px;
width:730px;
position:relative;
}
/* ページの基本デザイン */
/********** splitcontentleftのデザイン **********/
#news{
width:160px;
margin:10px;
background:url(images/news_bg2.gif);
}
#news_header1{
height:41px;
background:url(images/hotnews_bg.gif) no-repeat top;
}
#news_header2{
height:41px;
background:url(images/ranking_bg.gif) no-repeat top;
}
#news_footer{
height:5px;
background:url(images/news_bg3.gif) no-repeat bottom;
}
#news_content table{
margin:5px;
font-size:11px;
}
#news_content td{
vertical-align:top;
border-bottom:#C0C0C0 dashed 1px;
padding:5px 2px;
}
/********* splitcontentrightのデザイン **********/
#about{
width:507px;
background:url(images/about_bg2.gif);
}
#about_header{
height:10px;
background:url(images/about_bg1.gif) no-repeat top;
}
#about_footer{
height:10px;
background:url(images/about_bg3.gif) no-repeat bottom;
}
#about_content{
padding:5px 15px;
line-height: 150%;
}
#cm{
width:507px;
background:url(images/cm_bg2.gif);
margin-top:20px;
}
#cm_header{
height:30px;
background:url(images/cm_bg1.gif) no-repeat top;
}
#cm_footer{
height:13px;
background:url(images/cm_bg3.gif) no-repeat bottom;
}
#cm_content{
padding:5px 10px 0px 30px;
line-height: 145%;
}
.cm_box01{
padding:10px 10px 0px 10px;
}
#cm_content td{
vertical-align:top;
}
#lineup_img{
width:507px;
height:23px;
background-image:url(images/lineup.gif);
margin:12px 0px;
padding-top:7px;
}
.lineup_box{
float:left;
width:252px;
height:440px;
border-top:#C0C0C0 solid 1px;
border-left:#C0C0C0 solid 1px;
border-bottom:#C0C0C0 solid 1px;
margin-top:5px;
margin-bottom:20px;
}
.lineup_box_rightborder{
float:left;
height:440px;
border-top:#C0C0C0 solid 1px;
border-right:#C0C0C0 solid 1px;
border-bottom:#C0C0C0 solid 1px;
margin-top:5px;
margin-bottom:20px;
}
.lineup_box01{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
padding:5px 0px 5px 10px;
border-bottom:#C0C0C0 solid 1px;
background-color:#efefef;
}
.lineup_box02{
text-align:center;
border-bottom:#C0C0C0 solid 1px;
padding:10px;
}
.lineup_box03{
line-height:120%;
height:80px;
padding:10px;
color: #666699;
border-bottom:#C0C0C0 solid 1px;
}
.lineup_box04{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
line-height:120%;
padding:10px;
color: #FF6699;
}
#lineup_box{
float:left;
width:249px;
height:440px;
border-top:#C0C0C0 solid 1px;
border-left:#C0C0C0 solid 1px;
border-bottom:#C0C0C0 solid 1px;
margin-top:5px;
margin-bottom:20px;
}
#lineup_box01{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
padding:5px 0px 5px 10px;
border-bottom:#C0C0C0 solid 1px;
background-color:#efefef;
}
#lineup_box02{
text-align:center;
border-bottom:#C0C0C0 solid 1px;
padding:10px;
}
#lineup_box03{
line-height:120%;
height:80px;
padding:10px;
color: #666699;
border-bottom:#C0C0C0 solid 1px;
}
#lineup_box04{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
line-height:120%;
padding:10px;
color: #FF6699;
}