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="003.css" type="text/css">
</head>
<body>
<div id="container">
<!--★ここから，ヘッダー部★-->
<div id="header">
<a href="#"><img src="images/title.gif" alt="" border="0" /></a>
</div><!--/header-->
<!--★ここから，コンテンツ部★-->
<div id="content">
<!--************* ここから 上のボックス *************-->
<div id="box_01">
<div id="box_01_left">
<a href="#"><IMG alt="" border="0" src="images/cm.gif"></a>
</div><!--/box_01_left-->
<div id="box_01_right">
<div id="license">
ライセンスとは
</div>
ライセンスとは、ソフトウェアの使用権です。ライセンスの数をまとめることよって低価格で購入でき、使用するライセンス数が多くなればなるほどボリュームディスカウントがうけられるライセンスプログラムです。<br />
ユーザー登録を行うことで、オンラインでの特別価格での見積・購入や、見積、注文の履歴、そして、保有しているライセンスの管理も可能になります。ユーザー登録は無料です。
<div id="user">
<a href="#"><img src="images/user.jpg" alt="" border="0" /></a>
</div>
<div id="news">
News
</div>
<div id="news_link">
<a href="#">Adobeのライセンス製品が１つから購入可能に！</a>
<a href="#">Acrobatを法人向けライセンスで割安導入</a>
<a href="#">アドビ製品 割引価格！ オンライン販売だから低価格。いつでも簡単、見積・購入。</a>
</div><!--/news_link-->
</div><!--/box_01_right-->
</div><!--/box_01-->
<!--************* ここから 下のボックス *************-->
<!--************* ボックス １ *************-->
<div class="box_02">
<div class="entry">
Creative Suite ファミリー
</div>
<img src="images/adobe_01.gif" alt="" border="0" align="left"/>
<a href="#">Adobe Creative Suite 3 Web Premium</a>
Webデザイン・開発に革新をもたらすトータルソリューション。
</div><!--/box_02-->
<!--************* ボックス ２ *************-->
<div class="box_02">
<div class="entry">
Creative Suite ファミリー
</div>
<a href="#"><img src="images/adobe_02.gif" alt="" border="0" align="left"/></a>
<a href="#">Adobe Creative Suite 3 Design Premium</a>
プリント・Web・モバイル。進化するデザインのための新世代ソリューション。
</div><!--/box_02-->
<!--************* ボックス ３ *************-->
<div class="box_03">
<div class="entry">
Photoshop ファミリー
</div>
<a href="#"><img src="images/adobe_03.gif" alt="" border="0" align="left"/></a>
<a href="#" target="_blank">Adobe Photoshop CS3</a>
写真の整理、加工、公開までを備え最高のクオリティを実現する、デジタル画像編集ソフトウェア。
</div><!--/box_03-->
<!--************* ボックス ４ *************-->
<div class="box_02">
<div class="entry">
Acrobat ファミリー
</div>
<a href="#"><img src="images/adobe_04.gif" alt="" border="0" align="left"/></a>
<a href="#">Adobe Acrobat Standard 8</a>
ビジネスソフトで作成した文章、電子メールやウェブページを簡単にPDF化するソフトウェア。
</div><!--/box_02-->
<!--************* ボックス ５ *************-->
<div class="box_02">
<div class="entry">
Acrobat ファミリー
</div>
<a href="#"><img src="images/adobe_05.gif" alt="" border="0" align="left"/></a>
<a href="#">Adobe Acrobat Professional 8</a>
高品質なファイル作成が可能な、Acrobat最上位バージョンのPDF作成ソフトウェア。
</div><!--/box_02-->
<!--************* ボックス ６ *************-->
<div class="box_03">
<div class="entry">
印刷パブリッシング
</div>
<a href="#"><img src="images/adobe_06.gif" alt="" border="0" align="left"/></a>
<a href="#">Adobe Illustrator CS3</a>
印刷やビデオ、Webなどベクトルワークグラフィックを作成する業界標準グラフィックソフトウェア。
</div><!--/box_03-->
</div><!--/content-->
<br clear="all" />
<!--★ここから，フッター部★-->
<div id="footer">
<div id="footer_title">
<img src="images/title2.gif" alt="" />
<a href="#">Adobe製品 今すぐ見積！ 電話・メールでの安心サポート。</a>
</div>
<div id="last">
<img src="images/mark.gif" alt="" /><a href="#">サイトマップ</a>
<img src="images/mark.gif" alt="" /><a href="#">FAQ</a>
<img src="images/mark.gif" alt="" /><a href="#">お問い合わせ</a>
</div>
</div><!--/footer-->
</div><!--/container-->
</body>
</html>
CSSのソース
body {
background-color:#000000;
background-image: url(images/header_bg.jpg);
background-repeat:repeat-x;
margin-top:5px;
text-align:center;
font-size:14px;
color: #FAFAFA;
line-height:150%;
}
a:link {
text-decoration:none;
color: #FF9900;
}
a:visited {
text-decoration:none;
color: #FF9900;
}
a:hover {
text-decoration:none;
color: #FF0033;
font-weight:bold;
}
#container{
margin:0 auto;
width:700px;
text-align:left;
}
#header{
width:700px;
margin-bottom:10px;
}
#content{
width:700px;
}
#footer{
border-top:#FFFFFF dotted 1px;
margin-top:15px;
}
/* ページの基本デザイン */
/***** headerのデザイン *****/
/***** contentのデザイン *****/
#box_01{
background:url(images/top_bg.jpg) no-repeat ;
height:390px;
border:#F6F6F6 solid 1px;
margin-top:10px;
margin-bottom:15px;
}
#box_01_left{
float: left;
}
#box_01_left img{
position:relative;
top:310px;
left:35px;
}
#box_01_right{
float:right;
width:400px;
padding:10px;
}
#license{
padding:5px;
font-size:16px;
font-weight:bold;
color:#FF6666;
}
#user{
text-align:right;
margin-top:20px;
}
#news{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
color:#CC3333;
border-bottom:#CC3333 solid 1px;
padding-left:40px;
}
#news_link a{
display:block;
margin:10px 20px;
font-size:12px;
line-height:110%;
border-bottom:#CCCCCC dotted 1px;
padding-bottom:3px;
}
.box_02{
float:left;
width:226px;
margin:0px 8px 7px 0px;
border: #F6F6F6 1px solid;
font-size:12px;
line-height:120%;
padding-bottom:5px;
}
.box_03{
float:left;
width:223px;
margin:0px 0px 7px 0px;
border:#F6F6F6 1px solid;
font-size:12px;
line-height:120%;
padding-bottom:5px;
}
.entry{
font-size:14px;
background-color: #CC3333;
padding:4px 0px 2px 5px;
border-bottom:#CC3333 3px groove;
}
.box_02 img{
background-color:#FFFFFF;
border:#CC3333 solid 1px;
padding:2px 0px;
margin:5px;
}
.box_02 a{
display:block;
margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.box_03 img{
background-color:#FFFFFF;
border:#CC3333 solid 1px;
padding:2px 0px;
margin:5px;
}
.box_03 a{
display:block;
margin-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
/***** footerのデザイン *****/
#footer_title{
border-top:#CC3333 solid 4px;
border-bottom:#CC3333 solid 1px;
margin-top:20px;
padding:5px 0px 2px 0px;
}
#last{
text-align:right;
font-size:10px;
}