ファイル名：hollywood_cafe/4t/top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="ハリウッド・カフェはクリエイターが集まる創造空間カフェです。"> <meta name="keywords" content="カフェ,クリエイター,CAFE,作品,創造,空間"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="style.css" type="text/css" media="screen,print"> <title>HOLLYWOOD CAFE</title> </head> <body> <div id="pageBody"> <div id="pageTop"> <!-- ヘッダ要素 ここから --> <h1><img src="images/top/hc_logo.png" alt="HOLLYWOOD_CAFE" width="140" height="170"></h1> <h2>クリエイターが集まり、作品が生まれる。創造空間カフェ。</h2> <p id="siteMap"><a href="sitemap.html">Sitemap</a></p> <!-- ヘッダ要素 ここまで --> <hr> <div id="contentsWrap"> <div id="contents"> <!-- ナビゲーション ここから --> <ul id="globalNavi"> <li><img src="images/top/navi_on_home.jpg" alt="Home" width="120" height="30" style="float:left;"></li> <li><a href="about.html"><img src="images/top/navi_about.jpg" alt="About" width="120" height="30"></a></li> <li><a href="menu.html"><img src="images/top/navi_menu.jpg" alt="Menu" width="120" height="30"></a></li> <li><a href="access.html"><img src="images/top/navi_access.jpg" alt="Access" width="120" height="30"></a></li> <li><a href="contact.html"><img src="images/top/navi_contact.jpg" alt="Contact" width="120" height="30"></a></li> </ul> <!-- ナビゲーション ここまで --> <hr> <!-- Welcome to HOLLYWOOD CAFE ここから --> <h3><img src="images/top/top_ttl_welcome.gif" alt="welcome to HOLLYWOOD CAFE" width="440" height="30"></h3> <p id="welcomeMessage"><img src="images/top/top_welcome_img.jpg" alt="" width="160" height="114">ハリウッドカフェは、グラフィックやWebデザインをはじめ、色々なジャンルで活躍するクリエイターが交流する創造空間カフェです。仕事をお探しの方、仕事を依頼したい方、仕事仲間を探している方、ハリウッドカフェで新たな出会いを探してみませんか。</p> <!-- Welcome to HOLLYWOOD CAFE ここまで --> <!-- Recommended menu ここから --> <dl id="topRecommendedMenu"> <dt id="topRecommendedMenuTitle"><img src="images/top/top_ttl_recommend.jpg" alt="Recomended menu" width="190" height="20"></dt> <dd> <ul> <li><img src="images/top/top_recommend_img_01.jpg" alt="ハリウッド・バーガー" width="153" height="118"> <dl> <dt> <strong>ハリウッド・バーガー</strong> </dt> <dd class="price"> <p>¥880</p> </dd> <dd class="menuData"> <p>当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー。ハンバーガーパティーは、厳選した国産和牛肉を炭火で焼き上げます。パント肉本来の持つ旨味を存分にお楽しみ下さい。</p> </dd> </dl> </li> <li><img src="images/top/top_recommend_img_02.jpg" alt="ハリウッド・プレート" width="153" height="118"> <dl> <dt> <strong>ハリウッド・プレート</strong> </dt> <dd class="price"> <p>¥1,380</p> </dd> <dd class="menuData"> <p>お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ。どれも新鮮な素材を使用した手作りの味が自慢です。是非一度御賞味下さい。</p> </dd> </dl> </li> </ul> </dd> </dl> <!-- Recommended menu ここまで --> </div> <div id="side"> <!-- Information ここから --> <dl id="information"> <dt><img src="images/top/top_ttl_information.jpg" alt="Information" width="220" height="30"></dt> <dd> <iframe src="info.html" width="220" height="200" name="info" title="Information" frameborder="0">インラインフレームを使用しています。<a href="info.html">非対応環境の方はこちらより新着情報をご覧ください。</a></iframe> </dd> </dl> <!-- Information ここまで --> <!-- バナー ここから --> <ul> <li>お得なセットメニュー</li> <li><a href="http://www.sugiyama-style.tv/" target="_blank">オーナーブログ</a></li> </ul> <!-- バナー ここまで --> </div> <!-- ページトップへのリンク ここから --> <p id="gotoTop"><a href="#pageTop">PageTop</a></p> <!-- ページトップへのリンク ここまで --> </div> </div> <hr> <!-- フッタ要素 ここから --> <address>Copyright 2007 HOLLYWOOD CAFE, ALL Rights Reserved.</address> <!-- フッタ要素 ここまで --> </div> </body> </html>
ファイル名：hollywood_cafe/4t/style.css
@charset "utf-8";
/* 基本設定 ここから */
body{
color:#555555;
font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック", "MS P Gothic",sans-serif;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
background-color:#999999;
}
a:link{
color:#55555;
text-decoration:none;
}
a:visited{
color:#888888;
text-decoration:none;
}
a:hover{
color:#FF6600;
text-decoration:none;
}
a:active{
color:#000000;
text-decoration:none;
}
h1,h2,h3{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
img{
border:0;
}
hr{
display:none;
}
/* 基本設定 ここまで */
/* レイアウト設定 ここから */
#pageBody{
width:760px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
background-color:#FFFFFF;
background-image:url(images/top/body_bg.jpg);
background-repeat:repeat-y;
}
#pageTop{
background-image:url(images/top/body_bg_t.jpg);
background-repeat:no-repeat;
background-position:top left;
padding-top:70px;
padding-right:30px;
padding-bottom:0px;
padding-left:30px;
}
#contents{
width:440px;
padding-right:19px;
float:left;
}
#side{
width:220px;
padding-left:20px;
float:right;
}
#contentsWrap{
clear:both;
}
/* レイアウト設定 ここまで */
/* PageTopへのリンクテキスト ここから */
#gotoTop{
clear:both;
}
/* PageTopへのリンクテキスト ここまで */
/* SITEMAPへのリンクテキスト ここから */
#siteMap{
font-size:0.7em;
text-transform:uppercase;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
position:absolute;
top:35px;
right:35px;
}
#siteMap a{
background-image:url(images/top/icon_arrow_02.gif);
background-repeat:no-repeat;
background-position:left;
padding-left:13px;
}
/* SITEMAPへのリンクテキスト ここから */
/* ナビゲーション ここから */
#globalNavi{
list-style-type:none;
width:660px;
height:30px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:20px;
padding-right:0px;
padding-bottom:0px;
padding-left:20px;
background-image:url(images/top/navi_bg.gif);
background-repeat:no-repeat;
background-position:top left;
position:absolute;
top:320px;
left:40px;
}
#globalNavi li{
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
float:left;
}
/* ナビゲーション ここまで */
/* TOP ここから */
p#welcomeMessage{
color:#999999;
font-size:0.8em;
line-height:1.5em;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
background-color:#FFFFFF;
}
p#welcomeMessage img{
float:right;
margin-left:25px;
}
#topRecommendedMenu{
clear:both;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:10px;
padding-left:0px;
background-image:url(images/top/recommend_bg_b.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
#topRecommendedMenu dt,
#topRecommendedMenu dd{
background-color:#EEEEEE;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
#topRecommendedMenu ul{
font-size:0.8em;
line-height:1.5em;
list-style-type:none;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
#topRecommendedMenu ul li dl{
width:240px;
float:right;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
#topRecommendedMenu dd ul img{
float:left;
}
#topRecommendedMenu ul li{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
clear:both;
}
#topRecommendedMenu ul li dl dt{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
width:180px;
float:left;
}
#topRecommendedMenu ul li dl dd.price{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
width:60px;
float:right;
text-align:right;
color:#663300;
}
#topRecommendedMenu ul li dl dd.menuData{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
clear:both;
border-top-width:1px;
border-top-style:dotted;
border-top-color:#999999;
}
#topRecommendedMenu strong{
color:#663300;
font-weight:normal;
}
#topRecommendedMenu p{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
#topRecommendedMenu dt#topRecommendedMenuTitle{
background-image:url(images/top/recommend_bg_t.gif);
background-repeat:no-repeat;
backgrouond-position:top left;
}
#topRecommendedMenu dt#topRecommendedMenuTitle img{
margin-top:15px;
margin-right:0px;
margin-bottom:0px;
margin-left:10px;
}
dl#information{
margin-top:0px;
margin-right:0px;
margin-bottom:10px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
dl#information dt,
dl#information dd{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:0px;
padding-left:0px;
}
/* TOP ここまで */