練習サイト構築手順（１）

ページ構築の手順


この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。

文書構造のグループ化

  • グループ化とは、div要素によるコンテンツのブロック化
  • 「コンテンツのブロック化」であるので、１行を「div要素」で囲まないことが鉄則
  • 見出しと本文のまとまりとを一緒に構造化
情報を「線形化」する

ひとつのブロックには、中に情報の集まりが入っていると考えます。

  • 情報は上の行から順に読まれる
  • HTMLはブロック化しないと横並びはできない
  • 先に読ませながら、右に並べるときに設定するのが「float : right」


手順実践

トップ（ホーム）ページ

《index.html》

文字を読みアウトライン構造を想定する
/* ロゴ
　h1要素でマークアップ */
　CakeShop（logo.jpg）

/* グローバルナビゲーション（ナビゲーションボタン）
　リストでマークアップ */
　ホーム
　商品のご案内
　店舗案内
　お問い合せ

/* ビルボードメインイメージ
　imgでマークアップ */
　おすすめケーキのイメージ

/* メインコンテンツの見出し
　h2でマークアップ */
　新着情報

/* 日付と出来事をセットで扱う
　定義型リスト dlでマークアップ */
　2013.06.10
　スペシャルキャンペーン期間中、お休みをさせて頂いておりました、N.Y.チーズケーキ、レアチーズケーキのオーダー受付を再開させて頂きました。
　2013.05.25
　スペシャルキャンペーン実施中！ 人気のケーキが5%オフ！

/* メインコンテンツの見出し
　h2でマークアップ */
　おすすめ商品

/* メインコンテンツの小見出し
　h3でマークアップ */
　チーズスフレ

/* メインコンテンツの商品説明
　pでマークアップ */
　1個 480円
　ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。

/* メインコンテンツの商品説明-付帯情報
　リストでマークアップ */
　詳細を見る
　大きな写真を見る

/* メインコンテンツの小見出し
　h3でマークアップ */
　苺のバースデーケーキ

/* メインコンテンツの商品説明
　pでマークアップ */
　1個 2,480円
　大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。

/* メインコンテンツの商品説明-付帯情報
　リストでマークアップ */
　詳細を見る
　大きな写真を見る

/* メインコンテンツの小見出し
　h3でマークアップ */
　焼菓子の詰め合わせ

/* メインコンテンツの商品説明
　pでマークアップ */
　1箱 1,680円
　当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。

/* メインコンテンツの商品説明-付帯情報
　リストでマークアップ */
　詳細を見る
　大きな写真を見る

/* サイドバー バナー
　リストでマークアップ */
バナー１
バナー２

/* 著作情報
　smallでマークアップ */
Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.

マークアップはアウトライン構造を構築するために

アウトラインチェック


インストールするとURL欄にアウトラインをチェックするボタンが追加されます。（HTML５で作られたサイトでないとボタンが表示されない）


HTML 5 Outliner

文書構造のチェックとCSSの準備
  • #content以外は、billBoard以外のすべてのブロックが共有できるので「common.css」に記述します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>行列のできるケーキショップ｜ホーム</title>
<link href="css/common.css" rel="stylesheet" media="all">
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<h1>CakeShop</h1>
<ul>
<li>ホーム</li>
<li>商品のご案内</li>
<li>店舗案内</li>
<li>お問い合せ</li>
</ul>
<p><img src="" alt="おすすめケーキのイメージ"></p>
<h2>新着情報</h2>
<dl>
<dt>2013.06.10</dt>
<dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、N.Y.チーズケーキ、レアチーズケーキのオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd>スペシャルキャンペーン実施中！ 人気のケーキが5%オフ！</dd>
</dl>
<h2>おすすめ商品</h2>
<h3>チーズスフレ</h3>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>苺のバースデーケーキ</h3>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>焼菓子の詰め合わせ</h3>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<ul>
<li>バナー１</li>
<li>バナー２</li>
</ul>
<p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p>
</body>
</html>


画像（カンプ）を読みレイアウトブロックに名前をつける


<body>
<!-- #container -->
<div id="container">

<!-- #header -->
<div id="header">
<h1>CakeShop</h1>

<!-- #nav -->
<div id="nav">
<ul>
<li>ホーム</li>
<li>商品のご案内</li>
<li>店舗案内</li>
<li>お問い合せ</li>
</ul>
</div><!-- /#nav -->

<p><img src="" alt="おすすめケーキのイメージ"></p><!-- billBoard -->
</div><!-- /#header -->

<!-- #wrapper -->
<div id="wrapper">
<!-- #content -->
<div id="content">
<h2>新着情報</h2>
<dl>
<dt>2013.06.10</dt>
<dd>スペシャルキャンペーン期間中、お休みをさせて頂いておりました、N.Y.チーズケーキ、レアチーズケーキのオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd>スペシャルキャンペーン実施中！ 人気のケーキが5%オフ！</dd>
</dl>
<h2>おすすめ商品</h2>
<h3>チーズスフレ</h3>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>苺のバースデーケーキ</h3>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>焼菓子の詰め合わせ</h3>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
</div><!-- /#content -->

<!-- #sidebar -->
<div id="sidebar">
<ul>
<li>バナー１</li>
<li>バナー２</li>
</ul>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->

<!-- #footer -->
<div id="footer">
<p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>

大枠のレイアウトを設定する

  • 背景色でエリアを確認する


《common.css》

@chaset "UTF-8";

/* reset */
html,body,div,h1,h2,h3,p,img,ul,li,dl,dt,dd,p,
table,th,td,form,fieldset,address,small {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  font-size: 14px;
}
body{
  background-color: #005790;
  background-image: url(../img/bg.jpg);
  background-repeat: repeat-x;
  overflow-y: scroll;
}
img{
  border: none;
}
ul {
  list-style-type: none;
}

/*layout */
#container {
  width: 700px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background-color: #FFFFFF;
}
#header {
  width: 680px;
  height: auto;
  margin: 0 10px;
  background-color: #FFFFFF;
}
#nav {
  width: auto;
  height: 36px;
}
#wrapper {
  width: 680px;
  margin: 16px 10px 0 10px;
  overflow: hidden;
}
#content {
  width: 475px;
  float: right;
  display: inline;
  background-color: #FFFFFF;
}
#sidebar {
  width: 195px;
  float: left;
  display: inline;
  background-color: #FFFFFF;
}
#footer {
  clear: both;
  height: 62px;
  background-color: #EEEEEE;
}


各ブロックのレイアウト

#header

  • 背景色は「#FFFFFF」に戻す
  • ロゴ（トップページに戻るリンクを設定する）
<!-- #header -->
<div id="header">
<h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop"  width="260" height="55"></a></h1>

/* header */
h1 {
  padding: 10px 0 10px 0;
}


#nav

  • #header内に配置
  • liには、背景画像のためのid名を設定する
  • 各ブロックの背景画像を利用して画像置換によるマウスの挙動を作る
  • thisで現在のページを区別する
<!-- #nav -->
<div id="nav">
<ul>
<li id="menu_index" class="this"><a href="index.html"></a></li>
<li id="menu_products"><a href="products.html"></a></li>
<li id="menu_shop"><a href="shop.html"></a></li>
<li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li>
</ul>
</div><!-- /#nav -->

/* nav */
#nav {
  margin-bottom: 5px;
  background-image: url(../img/menubar.jpg);
  background-repeat: repeat-x;
}
#nav li {
  float: left;
  display: inline;
}
#nav li a {
  display: block;
  width: 136px;
  height: 36px;
}
#nav li#menu_index a:link,#nav li#menu_index a:visited {
  background-image: url(../img/menu_index.gif);
}
#nav li#menu_products a:link,#nav li#menu_products a:visited {
  background-image: url(../img/menu_products.gif);
}
#nav li#menu_shop a:link,#nav li#menu_shop a:visited {
  background-image: url(../img/menu_shop.gif);
}
#nav li#menu_mail a:link,#nav li#menu_mail a:visited {
  background-image: url(../img/menu_mail.gif);
}
#nav li a:hover,#nav li a:active {
  background-position: 0 -36px;
}
#nav li.this a {
  background-position: 0 -36px;
}



billBoard

<p><img src="img/main_photo.jpg" width="680" height="230" alt="おすすめケーキのイメージ"></p><!-- billBoard -->
</div><!-- /#header -->




#sidebar

  • 背景色は「#FFFFFF」に戻す
<!-- #sidebar -->
<div id="sidebar">
<ul>
<li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li>
<li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li>
</ul>
</div><!-- /#sidebar -->

/* sidear */
#sidebar a.banner {
  display: block;
  margin-bottom: 10px;
}



#footer

/* footer */
#footer {
  background-image: url(../img/footer_back.gif);
  background-repeat: repeat-x;
  text-align: center;
}
#footer p {
  font-size: 12px;
  line-height: 62px;
}




#content以外のまとめ

《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>行列のできるケーキショップ｜ホーム</title>
<link href="css/common.css" rel="stylesheet" media="all">
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<!-- #container -->
<div id="container">

<!-- #header -->
<div id="header">
<h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1>

<!-- #nav -->
<div id="nav">
<ul>
<li id="menu_index" class="this"><a href="index.html"></a></li>
<li id="menu_products"><a href="products.html"></a></li>
<li id="menu_shop"><a href="shop.html"></a></li>
<li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li>
</ul>
</div><!-- /#nav -->

<p><img src="img/main_photo.jpg" width="680" height="230" alt="おすすめケーキのイメージ"></p><!-- billBoard -->
</div><!-- /#header -->

<!-- #wrapper -->
<div id="wrapper">
<!-- #content -->
<div id="content">

<!-- .news_ -->
<h2><img src="img/news_title.gif" width="475" height="25" alt="新着情報"></h2>

<dl class="news_date">
<dt>2013.06.10</dt>
<dd class="news_content">スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="news_keyword">N.Y.チーズケーキ</span>、<span class="news_keyword">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd class="news_content"><span class="news_keyword">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！</dd>
</dl><!-- /.news_ -->


<h2>おすすめ商品</h2>
<h3>チーズスフレ</h3>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>苺のバースデーケーキ</h3>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
<h3>焼菓子の詰め合わせ</h3>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
</div><!-- /#content -->

<!-- #sidebar -->
<div id="sidebar">
<ul>
<li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li>
<li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li>
</ul>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->

<!-- #footer -->
<div id="footer">
<p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>
メインコンテンツ
  • 各ページが異なる内容になります


#content
修飾のために「class属性」を設定します。

  • newsエリア
<!-- .news_ -->
<h2><img src="img/news_title.gif" width="475" height="25" alt="新着情報"></h2>

<dl class="news_date">
<dt>2013.06.10</dt>
<dd class="news_content">スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="news_keyword">N.Y.チーズケーキ</span>、<span class="news_keyword">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd class="news_content"><span class="news_keyword">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！</dd>
</dl><!-- /.news_ -->


《style.css》

  • newsエリアの記述します
@charset "UTF-8";

/* index */
#content dl.news_date {
  margin: 15px 16px 15px 20px;
}
#content dl.news_date dt {
  font-weight: bold;
  margin-bottom: 5px;
  padding: 4px 4px 4px 8px;
  border-left: 5px solid #E8E2D6;
}
#content dl.news_date dd.news_content {
  margin-bottom: 18px;
  margin-left: 14px;
  line-height: 1.3;
}
p.news_date {
  font-weight: bold;
  text-decoration: underline;
  letter-spacing: 1px;
  margin-bottom: 3px;
  padding-left: 10px;
}
p.news_content {
  font-size: 13px;
  line-height: 17px;
  margin-top: 0;
  padding-left: 10px;
}
span.news_keyword {
  color: #FF1166;
  font-weight: bold;
}


  • productエリア
<h2><img src="img/recommend_title.gif" width="475" height="25" alt="おすすめ商品"></h2>

<!-- .product -->
<div class="product">
<h3>チーズスフレ</h3>
<p>1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3>苺のバースデーケーキ</h3>
<p>1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3>焼菓子の詰め合わせ</h3>
<p>1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li>詳細を見る</li>
<li>大きな写真を見る</li>
</ul>
</div><!-- /.product -->
  • .productを設定する
<!-- #content -->
<div id="content">

<!-- .news_ -->
<h2><img src="img/news_title.gif" width="475" height="25" alt="新着情報"></h2>

<dl class="news_date">
<dt>2013.06.10</dt>
<dd class="news_content">スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="news_keyword">N.Y.チーズケーキ</span>、<span class="news_keyword">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd class="news_content"><span class="news_keyword">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！</dd>
</dl><!-- /.news_ -->

<h2><img src="img/recommend_title.gif" width="475" height="25" alt="おすすめ商品"></h2>

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真">チーズスフレ</h3>
<p class="product_price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li><a href="item.html"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo01.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真">苺のバースデーケーキ</h3>
<p class="product_price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo02.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真">焼菓子の詰め合わせ</h3>
<p class="product_price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo03.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

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

.product {
  margin: 4px 0 18px 0;
  padding-bottom: 33px;
  border-bottom: 1px dotted #999999;
}
.product h3 {
  color: #015790;
  font-size: 20px;
  font-family:
    "ヒラギノ明朝 Pro W3",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
}
.product h3 img {
  float: left;
  margin: 0 11px 0 0;
}
.product p {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.product p.product_price {
  font-weight: bold;
}
.product li {
  float: left;
  display: inline;
  margin-right: 16px;
}



トップページまとめ


《index.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>行列のできるケーキショップ｜ホーム</title>
<link href="css/common.css" rel="stylesheet" media="all">
<link href="css/style.css" rel="stylesheet" media="all">
</head>
<body>
<!-- #container -->
<div id="container">

<!-- #header -->
<div id="header">
<h1><a href="index.html"><img src="img/logo.jpg" alt="CakeShop" width="260" height="55"></a></h1>

<!-- #nav -->
<div id="nav">
<ul>
<li id="menu_index" class="this"><a href="index.html"></a></li>
<li id="menu_products"><a href="products.html"></a></li>
<li id="menu_shop"><a href="shop.html"></a></li>
<li id="menu_mail"><a href="mailto:xxxxxx@xxxxx.jp"></a></li>
</ul>
</div><!-- /#nav -->

<p><img src="img/main_photo.jpg" width="680" height="230" alt="おすすめケーキのイメージ"></p><!-- billBoard -->
</div><!-- /#header -->

<!-- #wrapper -->
<div id="wrapper">
<!-- #content -->
<div id="content">

<!-- .news_ -->
<h2><img src="img/news_title.gif" width="475" height="25" alt="新着情報"></h2>

<dl class="news_date">
<dt>2013.06.10</dt>
<dd class="news_content">スペシャルキャンペーン期間中、お休みをさせて頂いておりました、<span class="news_keyword">N.Y.チーズケーキ</span>、<span class="news_keyword">レアチーズケーキ</span>のオーダー受付を再開させて頂きました。</dd>
<dt>2013.05.25</dt>
<dd class="news_content"><span class="news_keyword">スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！</dd>
</dl><!-- /.news_ -->

<h2><img src="img/recommend_title.gif" width="475" height="25" alt="おすすめ商品"></h2>

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo1.jpg" width="150" height="120" alt="チーズスフレ 商品写真">チーズスフレ</h3>
<p class="product_price">1個 480円</p>
<p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり乗せた一品です。</p>
<ul>
<li><a href="item.html"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo01.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo2.jpg" width="150" height="120" alt="苺のバースデーケーキ 商品写真">苺のバースデーケーキ</h3>
<p class="product_price">1個 2,480円</p>
<p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召し上がりいただけます。</p>
<ul>
<li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo02.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

<!-- .product -->
<div class="product">
<h3><img src="img/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真">焼菓子の詰め合わせ</h3>
<p class="product_price">1箱 1,680円</p>
<p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹念にお作りしています。</p>
<ul>
<li><a href="#"><img src="img/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る"></a></li>
<li><a href="img/item_photo03.jpg"><img src="img/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る"></a></li>
</ul>
</div><!-- /.product -->

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

<!-- #sidebar -->
<div id="sidebar">
<ul>
<li><a href="index.html" class="banner"><img src="img/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195"></a></li>
<li><a href="index.html" class="banner"><img src="img/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195"></a></li>
</ul>
</div><!-- /#sidebar -->
</div><!-- /#wrapper -->

<!-- #footer -->
<div id="footer">
<p><small>Copyright (C) 2013 CakeShop Corporation. All Rights Reserved.</small></p>
</div><!-- /#footer -->

</div><!-- /#container -->
</body>
</html>


《common.css》

@chaset "UTF-8";

/* reset */
html,body,div,h1,h2,h3,p,img,ul,li,dl,dt,dd,p,table,th,td,form,fieldset,address {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  font-size: 14px;
}
body{
  background-color: #005790;
  background-image: url(../img/bg.jpg);
  background-repeat: repeat-x;
  overflow-y: scroll;
}
img{
  border: none;
}
ul {
  list-style-type: none;
}

/*layout */
#container {
  width: 700px;
  height: auto;
  margin: 0px auto;
  padding: 0;
  background-color: #FFFFFF;
}
#header {
  width: 680px;
  height: auto;
  margin: 0 10px;
  background-color: #FFFFFF;
}
#nav {
  width: auto;
  height: 36px;
}
#wrapper {
  width: 680px;
  margin: 16px 10px 0 10px;
  overflow: hidden;
}
#content {
  width: 475px;
  float: right;
  display: inline;
  background-color: #FFFFFF;
}
#sidebar {
  width: 195px;
  float: left;
  display: inline;
  background-color: #FFFFFF;
}
#footer {
  clear: both;
  height: 62px;
  background-color: #EEEEEE;
}

/* header */
h1 {
  padding: 10px 0 10px 0;
}

/* nav */
#nav {
  margin-bottom: 5px;
  background-image: url(../img/menubar.jpg);
  background-repeat: repeat-x;
}
#nav li {
  float: left;
  display: inline;
}
#nav li a {
  display: block;
  width: 136px;
  height: 36px;
}
#nav li#menu_index a:link,#nav li#menu_index a:visited {
  background-image: url(../img/menu_index.gif);
}
#nav li#menu_products a:link,#nav li#menu_products a:visited {
  background-image: url(../img/menu_products.gif);
}
#nav li#menu_shop a:link,#nav li#menu_shop a:visited {
  background-image: url(../img/menu_shop.gif);
}
#nav li#menu_mail a:link,#nav li#menu_mail a:visited {
  background-image: url(../img/menu_mail.gif);
}
#nav li a:hover,#nav li a:active {
  background-position: 0 -36px;
}
#nav li.this a {
  background-position: 0 -36px;
}

/* sidear */
#sidebar a.banner {
  display: block;
  margin-bottom: 10px;
}

/* footer */
#footer {
  background-image: url(../img/footer_back.gif);
  background-repeat: repeat-x;
  text-align: center;
}
#footer p {
  font-size: 12px;
  line-height: 62px;
}


《style.css》

@chaset "UTF-8";

/* index */
#content dl.news_date {
  margin: 5px 16px 15px 20px;
}
#content dl.news_date dt {
  font-weight: bold;
  margin-bottom: 5px;
  padding: 4px 4px 4px 8px;
  border-left: 5px solid #E8E2D6;
}
#content dl.news_date dd.news_content {
  margin-bottom:20px;
  margin-left: 14px;
  line-height: 1.3;
}
p.news_date {
  font-weight: bold;
  text-decoration: underline;
  letter-spacing: 1px;
  margin-bottom: 3px;
  padding-left: 10px;
}
p.news_content {
  font-size: 13px;
  line-height: 17px;
  margin-top: 0px;
  padding-left: 10px;
}
span.news_keyword {
  color: #FF1166;
  font-weight: bold;
}
.product {
  margin: 4px 0 18px 0;
  padding-bottom: 33px;
  border-bottom: 1px dotted #999999;
}
.product h3 {
  color: #015790;
  font-size: 20px;
  font-family:
    "ヒラギノ明朝 Pro W3",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
}
.product h3 img {
  float: left;
  margin: 0 11px 0 0;
}
.product p {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.product p.product_price {
  font-weight: bold;
}
.product li {
  float: left;
  display: inline;
  margin-right: 16px;
}