ソース表示

HTMLのソース

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

<body style="font-size:12px;">

<div id="container">

<div id="header">
<div id="sitename1">
<img src="images/sitename.gif" />
</div>
<div id="sitename2">
<a href="#" >ソニースタイル</a><br />
<a href="#" >VAIOラインアップ</a>
</div>

<div id="sitename4">
<a href="#">HOME</a>
</div>

<div id="sitename3">
<a href="#">初めての方へ</a><br />
<a href="#">バスケットを見る</a><br />
<a href="#">クーポン</a>
</div>

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


<div id="contents">

<div id="top">
<br clear="all" />
<img src="images/toptext.gif" />
</div><!--/top-->

<div id="topics01">
<ul>
<li class="li_01"><a href="#">ハイビジョンハンディカムで一瞬を美しく撮る。</a>
<div class="li_text">
記録メディアがあり迷ってしまう。そんなみなさまにハイビジョン“ハンディカム”選びをお手伝いいたします。</div>
</li>
<li class="li_01">
<a href="#">パソコン，PSP，カメラなどで使うソフトウェアや動画を取り揃え。</a>
<div class="li_text">
欲しいソフトはその場で手に入れる。ソフトウェア　ダウンロードショップ</div>
</li>
</ul>
</div><!--/topics01-->


<div id="side_left">

<img src="images/category.gif" />

<div id="category">
<a href="#"><img src="images/sankaku.gif" border="0" />VAIO（個人）</a>
<a href="#"><img src="images/sankaku.gif" border="0" />VAIO（法人）</a>
<a href="#"><img src="images/sankaku.gif" border="0" />NetworkMusic</a>
<a href="#"><img src="images/sankaku.gif" border="0" />Camera</a>
<a href="#"><img src="images/sankaku.gif" border="0" />HomeAV</a>
<a href="#"><img src="images/sankaku.gif" border="0" />すべての商品</a>
<a href="#"><img src="images/sankaku.gif" border="0" />ソフトウェアダウンロード</a>
</div>

</div><!--/side_left-->


<div id="side_center">

<img src="images/information.gif" />

<div id="information">

<img src="images/sankaku.gif" border="0" />
2020年1月1日
<a href="#">新商品（個人・法人のお客様）　CameraStyle　Q-navi</a>

<img src="images/sankaku.gif" border="0" />
2020年1月1日
<a href="#">キャンペーン&イベント　NetworkMusicStyle</a>

<img src="images/sankaku.gif" border="0" />
2020年1月1日
<a href="#">価格変更（個人・法人のお客様向け）</a>

<img src="images/sankaku.gif" border="0" />
2020年1月1日
<a href="#">スペシャルコンテンツ</a>

<img src="images/sankaku.gif" border="0" />
2020年1月1日
<a href="#">ショッピング・パレット</a>

</div><!--/information-->
</div><!--/side_center-->


<div id="side_right">

<img src="images/guide.gif" />

<div id="guide">
<a href="#"><img src="images/guide01.gif" border="0" /></a>
<a href="#"><img src="images/guide02.gif" border="0" /></a>
<a href="#"><img src="images/guide03.gif" border="0" /></a>
<a href="#"><img src="images/guide04.gif" border="0" /></a>

</div><!--/guide-->
</div><!--/side_right-->

</div><!--/contents-->

<br clear="all" />

<div id="footer"></div><!--/footer-->

</div><!--/container-->

</body>
</html>

CSSのソース

body {
     margin:0;
	 padding:0;
　　 font-size:12px;
     color:#666666;
     background-color:#C3C7DE;
	 text-align:center;
	 line-height:16px;
}

a:link {
	 color: #6666CC;
}
a:visited {
	 color: #6666CC;
}
a:hover {
	 color: #FF0033;
}


#container {
     margin:10px auto;
	 width:712px;
	 text-align:left;
	 background:url("images/bg02.jpg");
}
	
#header {
     width:712px;
	 height:70px;
	 background:url("images/bg01.jpg") no-repeat top;
}

#contents{
	 width:712px;
     margin:0px auto;
}

#side_left {
     float:left;
	 width:167px;
	 border-top:#ffffff double 4px;
	 margin:0px 0px 0px 15px;
}

#side_center{
     float:left;
	 width:330px;
	 border-top:#EBE1C3 double 4px;
	 margin:0px 0px 0px 0px;
}

#side_right {
     float:left;
	 width:150px;
	 margin:0px 0px 0px 15px;
}

#footer {
	 background:url("images/bg03.jpg") no-repeat bottom;
	 width:712px;
	 height:10px;
}


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

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

#sitename1{
     margin-top:15px;
	 margin-left:15px;
	 float: left;
}

#sitename2{
     margin-top:30px;
	 margin-left:15px;
	 float: left;
}

#sitename3{
     margin-top:15px;
	 margin-right:10px;
	 float: right;
	 font-size:10px;
	 text-align:right;
}

#sitename4{
     margin-top:15px;
	 margin-right:15px;
	 padding-top:15px;
	 padding-left:10px;
	 height:35px;
	 float: right;
	 text-align:right;
	 border-left:#CCCCCC 1px solid;
}


/******　contentsのデザイン　******/

#top{
     background:url(images/top_img.jpg);
	 height:213px;
	 margin-left:7px;
	 margin-right:7px;
}

#top img{
	 margin-left:140px;
	 margin-top:100px;
}

#topics01{
     width:712px;
	 margin-top:20px;
}
     
.li_01{
	font-size: 16px;
	font-weight: bold;
	list-style-image: url(images/arrow_01.gif);
	list-style-type: none;
}

.li_01 a:link,.li_01 a:visited{
    color:#FF6600;
}

.li_01 a:hover {
	list-style-image: url(images/arrow_02.gif);
	text-decoration: underline;
	color:#FF0000;
}

.li_text{
    font-size:10px;
	font-weight: normal;
	margin-bottom:12px;
}

#category a:link,#category a:visited{
     display:block;
	 padding-left:10px;
	 margin-bottom:10px;
	 font-weight:bold;
}

#category a:hover{
     background-color: #FFFFFF;
}

#information{
     padding-left:10px;
}

#information a:link,#information a:visited{
	 margin-bottom:5px;
     display:block;
     padding-left:20px;
	 text-decoration: none;
	 border-bottom: #666666 1px dashed;
}

#information a:hover{
     background-color: #FFFFFF;
}

#guide{
     width:114px;
	 padding:4px 0px 0px 0px;
	 text-align:center;
	 background-color: #666666;
	 margin-left:30px;
}