Cake shop
Project site▲
テキストを参照しながらも相当な時間を要してしまった。
再度、別データの同レイアウトに自力で挑戦し、時間の短縮をはかりたいと思う。
HTML
トップページ<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>ケーキショップトップページ</title> <link href="cakeshop.css" rel="stylesheet" type="text/css" media="screen, print" /> <!--[if IE6.0]> <link href=css/ie6.css rel=”stylesheet” type=”text/css”> <![endif]-- > </head> <body> <!--▼#container--> <div id="container"> <!--▼header--> <div id="header"> <h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1> <!--▼#nav--> <div id="nav"> <ul> <li id="home"><a href="index.html"><em>ホーム</em></a></li> <li id="products"><a href="products.html"><em>商品</em></a></li> <li id="shop"><a href="shop.html"><em>お店</em></a></li> <li id="mail"><a href="mailto:xxxxx@xxxx.jp" ><em>お問い合わせ</em> </a></li> </ul> </div> <!--▲#nav--> <img src="images/main_photo.jpg" width="680" height="236" alt="メインページ" class="main.image" /> </div> <!--▲#header--> <!--▼#content--> <div id="content"> <!--▼#main--> <div id="main"> <h2><img src="images/news_title.gif" width="475" height="25" alt="新着情報" /></h2> <dl class="news_date"> <dt>2008.10.10</dt> <dd class="news_content">スペシャルキャンペーン期間中、 お休みをさせて頂いておりました、 <span class="news_keyword">N.Y.チーズケーキ</span>、<span class= "news_keyword">レアチーズケーキ</span>のオーダー受付を再開 させて頂きました。 </dd> <dt>2008.09.25</dt> <dd class="news_content"><span class="news_keyword"> スペシャルキャンペーン</span>実施中！ 人気のケーキが<span class="news_keyword">5%オフ</span>！ </dd> </dl> <h2><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品" /></h2> <!--▼.products--> <div class="products"> <img src="images/top_item_photo1.jpg" width="150" height="120" alt=" チーズスフレ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">チーズスフレ</a> </p> <p class="products_price">1個 480円</p> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり 乗せた一品です。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a> </div> <!--▲.products--> <!--▼.products--> <div class="products"> <img src="images/top_item_photo2.jpg" width="150" height="120" alt=" 苺のバースデーケーキ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">苺のバースデーケーキ </a></p> <p class="products_price">1個 2,480円</p> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召 し上がりいただけます。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな 写真を見る" /></a> </div> <!--▲.products--> <!--▼.product--> <div class="products"> <img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">焼菓子の詰め合わせ </a></p> <p class="products_price">1箱 1,680円</p> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹 念にお作りしています。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな 写真を見る" /></a> </div> <!--▲.product--> </div> <!--▲#main--> <!--▼#sidebar--> <div id="sidebar"> <a href="index.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195" /></a> <br /><br /> <a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195" /></a> </div> <!--▲#sidebar--> </div> <!--▲#content--> <!--▼#footer--> <div id="footer"> Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved. </div> <!--▲#footer--> </div> <!--▲container--> </body> </html>
商品のご案内
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>商品のご案内</title> <link href="cakeshop.css" rel="stylesheet" type="text/css" media="screen, print" /> <!--[if IE6.0]> <link href=css/ie6.css rel=”stylesheet” type=”text/css”> <![endif]-- > </head> <body> <!--▼#container--> <div id="container"> <!--▼header--> <div id="header"> <h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1> <!--▼#nav--> <div id="nav"> <ul> <li id="home"><a href="index.html"><em>ホーム</em></a></li> <li id="products"><a href="products.html"><em>商品</em></a></li> <li id="shop"><a href="shop.html"><em>お店</em></a></li> <li id="mail"><a href="mailto:xxxxx@xxxx.jp" ><em>お問い合わせ</em> </a></li> </ul> </div> <!--▲#nav--> <img src="images/main_photo.jpg" width="680" height="236" alt="メインページ" class="main.image" /> </div> <!--▲#header--> <!--▼#content--> <div id="content"> <!--▼#main--> <div id="main"> <h2><img src="images/item_title.gif" width="475" height="25" alt="商品のご紹介" /></h2> <!--▼#nav2--> <div id="nav2"> <ul> <li id="shurt"><a href="#cheese">ショートケーキ</a></li> <li id="birth"><a href="#birth">バースデーケーキ</a></li> <li id="sweet"><a href="#sweet">洋菓子</a></li> </ul> </div> <h2><img src="images/recommend_title.gif" width="475" height="25" alt="おすすめ商品" /></h2> <!--▼.products--> <div class="products"> <a name="cheese" ></a> <h3 class="products_title">ショートケーキ</h3> <img src="images/top_item_photo1.jpg" width="150" height="120" alt=" チーズスフレ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">チーズスフレ</a> </p> <p class="products_price">1個 480円</p> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり 乗せた一品です。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo01.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな写真を見る" /></a> </div> <!--▲.products--> <!--▼.products--> <div class="products"> <a name="birth"></a> <h3 class="products_title">バースデーケーキ</h3> <img src="images/top_item_photo2.jpg" width="150" height="120" alt=" 苺のバースデーケーキ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">苺のバースデーケーキ </a></p> <p class="products_price">1個 2,480円</p> <p>大切な方のお誕生日に。ほどよい甘さで大人も子供もおいしくお召 し上がりいただけます。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo02.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな 写真を見る" /></a> </div> <!--▲.products--> <!--▼.product--> <div class="products"> <h3 class="products_title">洋菓子</h3> <img src="images/top_item_photo3.jpg" width="150" height="120" alt="焼菓子の詰め合わせ 商品写真" class="products_item" /> <p class="products_name"><a href="item.html">焼菓子の詰め合わせ </a></p> <p class="products_price">1箱 1,680円</p> <p>当店自慢の焼菓子の詰め合わせです。無添加の素材でひとつずつ丹 念にお作りしています。</p> <a href="item.html"><img src="images/top_moreinfo_btn.gif" width="83" height="16" alt="詳細を見る" /></a> <a href="images/item_photo03.jpg"><img src="images/top_morelook_btn.gif" width="105" height="16" alt="大きな 写真を見る" /></a> <a name="sweet"></a> </div> <!--▲.product--> </div> <!--▲#main--> <!--▼#sidebar--> <div id="sidebar"> <a href="index.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195" /></a> <br /><br /> <a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195" /></a> </div> <!--▲#sidebar--> </div> <!--▲#content--> <!--▼#footer--> <div id="footer"> Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved. </div> <!--▲#footer--> </div> <!--▲container--> </body> </html>
店舗案内
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>店舗案内</title> <link href="cakeshop.css" rel="stylesheet" type="text/css" media="screen, print" /> <!--[if IE6.0]> <link href=css/ie6.css rel=”stylesheet” type=”text/css”> <![endif]-- > </head> <body> <!--▼#container--> <div id="container"> <!--▼header--> <div id="header"> <h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1> <!--▼#nav--> <div id="nav"> <ul> <li id="home"><a href="index.html"><em>ホーム</em></a></li> <li id="products"><a href="products.html"><em>商品</em></a></li> <li id="shop"><a href="shop.html"><em>お店</em></a></li> <li id="mail"><a href="mailto:xxxxx@xxxx.jp" ><em>お問い合わせ</em> </a></li> </ul> </div> <!--▲#nav--> <img src="images/main_photo.jpg" width="680" height="236" alt="メインページ" class="main.image" /> </div> <!--▲#header--> <!--▼#content--> <div id="content"> <!--▼#main--> <div id="main"> <h2><img src="images/shop_title.gif" width="475" height="25" alt="店舗案内" /></h2> <img src="images/shop.jpg"width="475px" height="317" alt="店舗写真"/> <table width="475px" border="1px"> <tr> <th>社名</th><td>ウォンツケーキ</td> <tr> <tr> <th>住所</th><td>ウォンツ県一途市三番町4-1-3<br /> ケーキビル1F</td> <tr> <th>TEL</th><td>000-0000-0000</td> </tr> <tr> <th>定休日</th><td>水曜日</td> </tr> <tr> <th>営業時間</th><td>午前9:00〜午後8:00</td> </tr> </table> <img src="images/map.png" text-align="center" width="" alt="店舗地図" class="map"> </div> <!--▲#main--> <!--▼#sidebar--> <div id="sidebar"> <a href="index.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195" /></a> <br /><br /> <a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195" /></a> </div> <!--▲#sidebar--> </div> <!--▲#content--> <!--▼#footer--> <div id="footer"> Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved. </div> <!--▲#footer--> </div> <!--▲container--> </body> </html>
チーズスフレ
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>チーズスフレ</title> <link href="cakeshop.css" rel="stylesheet" type="text/css" media="screen, print" /> <!--[if IE6.0]> <link href=css/ie6.css rel=”stylesheet” type=”text/css”> <![endif]-- > </head> <body> <!--▼#container--> <div id="container"> <!--▼header--> <div id="header"> <h1><a href="index.html"><img src="images/logo.jpg" alt="Wants Cake" height="55" width="260"></a></h1> <!--▼#nav--> <div id="nav"> <ul> <li id="home"><a href="index.html"><em>ホーム</em></a></li> <li id="products"><a href="products.html"><em>商品</em></a></li> <li id="shop"><a href="shop.html"><em>お店</em></a></li> <li id="mail"><a href="mailto:xxxxx@xxxx.jp" ><em>お問い合わせ</em> </a></li> </ul> </div> <!--▲#nav--> <img src="images/main_photo.jpg" width="680" height="236" alt="メインページ" class="main.image" /> </div> <!--▲#header--> <!--▼#content--> <div id="content"> <!--▼#main--> <div id="main"> <h2><img src="images/item_title.gif" width="475" height="25" alt="商品 のご紹介" /></h2> <!--▼.products--> <div class="products"> <p class="cheese"><a href="item.html">チーズスフレ</a> </p> <img src="images/item_photo01.jpg" width="475" height="285" alt="チーズスフレ 商品写真" /> <p class="recommend"><font size="1.5em">当店人気のメニュー！</font></p> <p>ふんわりと口の中で溶けるチーズスフレに、生クリームをたっぷり 乗せた一品です。チョコとオレンジのトッピングが、やわらかな味わい の中にアクセントを与えてくれます。<br /> <br /> 甘さ控えめとなっておりますので、カロリーが気になる方も安心です。 お茶のお供にも是非どうぞ。</p> <p><span class="price">価格</span>： 480円 (税込)</p> </div> <!--▲.products--> <a href="item.html"><img src="images/buy_btn.gif" width="105" height="16" alt="この商品を購入する" /></a> </div> <!--▲#main--> <!--▼#sidebar--> <div id="sidebar"> <a href="index.html" class="banner"><img src="images/banner01.jpg" alt="バースデーケーキのご注文はこちら" height="175" width="195" /></a> <br /><br /> <a href="index.html" class="banner"><img src="images/banner02.jpg" alt="ユミの奮闘日記" height="88" width="195" /></a> </div> <!--▲#sidebar--> </div> <!--▲#content--> <!--▼#footer--> <div id="footer"> Copyright (C) 2008 Wants Cake Corporation. All Rights Reserved. </div> <!--▲#footer--> </div> <!--▲container--> </body> </html>
CSS
@charset "utf-8";
/* CSS Document */
/* リセット */
*{
margin: 0;
padding: 0;
}
body {
font-size: 0.875em;
line-height: 1.0;
background-color: #005790;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
overflow-y: scroll; /* スクロールのあるページとないページの差が
ない様にする */
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meiryo,
"メイリオ",
Osaka,
"MS-P Gothic",
"ＭＳ Ｐゴシック",
sans-serif;
}
img {
border: none;
}
ul {
list-style-type: none;
}
em {
visibility: hidden;
}
a {
text-decoration: none;
}
/* レイアウト */
#container {
width: 700px;
height: auto;
margin: 0 auto;
background-color: #FFF;
}
#header {
padding: 10px 10px 20px;
background-color: #FFF;
}
#nav {
width: 680px;
height: 36px;
background-image: url(images/menubar.jpg);
background-repeat: repeat-x;
}
#content {
clear: left;
overflow: hidden;
}
#main {
width: 475px;
margin: 0 10px 0 0;
float: right;
}
#sidebaer {
width: 195px;
margin: 0 0 0 10px;
float: left;
}
#footer {
font-size: 0.875em;
line-height: 1.5em;
text-align: center;
height: 32px;
margin-top: 20px;
padding-top: 25px;
background-image: url(images/footer_back.gif);
background-repeat: repeat-x;
background-color: #EEEEEE;
clear: both;
}
/* nav メインナビ */
#nav ul {
width: 544px;
}
#nav li {
display: inline;
float: left;
}
#nav li a {
width: 136px;
height: 36px;
background-image: url(images/menubar2.gif);
background-repeat: no-repeat;
display: block;
}
/* individual */
#nav li#home a {
background-position: left 0;
}
#nav li#home a:hover, #nav li#home a:active {
background-position: left -36px;
}
#nav li#products a {
background-position: -136px 0;
}
#nav li#products a:hover, #nav li#products a:active {
background-position: -136px -36px;
}
#nav li#shop a {
background-position: -272px 0;
}
#nav li#shop a:hover, #nav li#shop a:active {
background-position: -272px -36px;
}
#nav li#mail a {
background-position: -408px 0;
}
#nav li#mail a:hover, #nav li#mail a:active {
background-position: -408px -36px;
}
/* content */
#content {
padding: 0 0 0 10px;
}
/* news */
.news_date {
padding:10px;
}
dt {
font-weight: bold;
border-left: 4px solid #D8D3C9;
padding-left: 6px;
margin: 10px 0 5px 0;
}
dd {
font-size: 0.8em;
font-weight: 600;
line-height: 1.4em;
margin: 0 0 10px 10px;
}
span.news_keyword {
color: #ED3484;
}
/* products */
.products {
border-bottom: 1px solid #999999;
padding: 15px 0 20px 0;
margin: 0 20px 10px 0;
}
/* ▼商品のご案内 */
h3.products_title{
color: #FFFFFF;
font-size: 1em;
margin-bottom: 4px;
padding: 10px 0 0 14px;
width: 460px;
height: 36px;
background-image: url(images/menubar.jpg);
background-repeat: repeat-x;
}
/* ▲商品のご案内 */
.products_item {
float: left;
margin-right: 10px;
}
p.products_name a {
font-size: 1.3em;
font-weight: 600;
font-family: serif;
color: #3B3B87;
}
/* チーズスフレ詳細 */
p.cheese a {
font-size: 1.5em;
font-weight: 600;
font-family: serif;
color: #3B3B87;
margin-left: 10px 0;
}
span.price {
font-weight: 600;
}
.recommend {
font-weight: 600;
color: #ED3484;
border-left: 4px solid;
margin: 10px 0;
padding-left: 4px;
}
.reco {
font-size: 1.5em;
}
/* ▲チーズスフレ詳細 */
p.products_price {
font-size: 0.8em;
margin: 6px 0;
}
.products p {
font-size: 0.8em;
line-height: 1.4em;
margin-bottom: 12px;
}
/* ▼商品のご案内 */
/* nav2 */
#nav2 {
margin: 10px 0;
}
#nav2 ul {
}
#nav2 li {
padding: 7px 0 7px 15px;
}
#nav2 li a {
color: #82572A;
font-weight: 600;
background-image: url(images/mark.gif);
background-repeat: no-repeat;
padding-left: 18px;
}
#nav2 a:hover, #nav2 a:active {
}
/* ▲商品のご案内 */
/* 店舗案内 */
/* テーブル */
table {
border-color: #DDDCD2;
border-collapse: collapse;
table-padding: 6px;
font-size: 0.8em;
}
th {
background-color: #D6CD9C;
text-align: right;
padding: 10px 10px 10px 20px;
}
td {
border-color: #999999;
text-align: left;
padding: 10px 0 10px 10px;
}
/* 地図 */
.map {
margin: 10px 0 0 80px;
}
CSS IE6
@charset "UTF-8";
/* CSS Document */
body {
text-align: center;
}
