Webサイト制作０３

webサイト制作 受講生作品



珈琲大學のwebサイト


  • 下準備として、まずは器具道具の準備をする




外部ファイル


《 .css 》

http://st.shinobi.jp/img/services/homepage/commercial.css


《 .js 》

js/yetii-min.js


Preparation


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<meta name="description" content="美味しいコーヒーを飲ませてあげる | 専門的な道具を使って">
<meta name="keywords" content="道具紹介,抽出コツ,商品価格"> 

<link rel="shortcut icon" href="favicon2.png">

<title>珈琲大學</title>

<link rel="stylesheet" href="css/preparation_style.css" media="screen,print">

<link rel="stylesheet" href="css/button.css">

<style>

#tabBox {
  width: 555px;
  margin: 0px;
  padding-top: 30px;
}

ul#tabBox-nav {
  list-style-type: none;
  width: 555px;
  float: left;
  margin: 0;
  background: url(img/pixel.gif) bottom left repeat-x;
}

ul#tabBox-nav li {
  margin-right: 2px;
  float: left;
}

ul#tabBox-nav a {
  float: left;
  display: block;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-bottom: 0;
  color: #666;
  background: #eee;
  text-decoration: none;
  font-weight: bold;
  outline: none;
}

ul#tabBox-nav a:hover {
  background: #fff;
}

ul#tabBox-nav a.active {
  background: #fff;
  padding-bottom: 5px;
  cursor: default;
  color: #00BF08;
}

.tab {
  width: 530px;
  clear: left;
  border: 1px solid #ccc;
  border-top: none;
  padding: 10px;
}

.gr {
  color: #00BF08;
  font-weight: bold;
}
</style>

<script src="js/yetii-min.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-38750673-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" /></head>
<body>

<div id="body_bg">
<p><img src="DATE2/eyes.png" width="640" height="480" alt=""></p>
</div><!-- / body_bg -->

<div id="body_bg2">
<p><img src="DATE2/em4.png" width="100" height="1263" alt=""></p>
</div><!-- / body_bg2 -->

<div id="container">

<div id="header">

<div class="header_left">

</div><!-- / header_left -->

<div class="nav_top_header">

</div><!-- / nav_top_header -->

<div class="header_main">

<h1 class="logo_img"><em>珈琲大學</em></h1>

<p><em>ステキなモテ講座</em></p>

<p class="link_webry"><a href="http://d.hatena.ne.jp/webry/">実践するwebサイト制作 | webnote</a></p>

</div><!-- / header_main -->

<div class="header_right">

</div><!-- / header_right -->

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

<div id="wrapper">

<div id="content">

<h1 class="title_img"><img src="DATE2/preformance_title.gif" width="199" height="78" alt="準備として、まずは道具をそろえる"></h1>

<p class="img_p">ポットや、サーバー（コーヒーサーバー）等の専門的な道具を持っているとアピールして下さい。<br>
「美味しいコーヒーを飲ませてあげる」と期待させましょう。</p>

<h2 class="introduction">道具の紹介</h2>

<div id="tabBox">

<ul id="tabBox-nav">
<li><a href="#sampletab1">器具</a></li>
<li><a href="#sampletab2">道具</a></li>
<li><a href="#sampletab3">豆</a></li>
<li><a href="#sampletab4">おススメ</a></li>
</ul><!-- / ul#tabBox-nav -->

<div class="tab" id="sampletab1">

<p><span class="gr">抽出器具</span><br>

<div class="img_box">

<p class="img_box_image"><img src="DATE2/img_pot2.jpg" width="160" height="250" alt=""></p>

<div class="img_title_p">

<h2>細口ポット<span class="math_wight">0.7L</span></h2>
<p class="h2_sub">[ ケトル&amp;ポット ]</p>

<div class="h3_title">

<h3 class="h3_top"><img src="DATE2/logo7.gif" width="55" height="55" alt="商品の説明">商品の説明</h3>
<p class="h3_img_p">注ぎ口が細いコーヒーポット。注ぎ口が細いのでハンドドリップに最適。 ステンレス製</p>

</div><!-- / h2_sub -->

<h3 class="h3_pad_top">抽出のコツ</h3>
<p class="h3_img_p2">抽出量にあったサイズのポットを使うと温度管理が容易である。</p>

<h3 class="h3_pad_top">商品の紹介</h3>
<table border="1" width="300" height="50" cellpadding="6" cellspacing="0" summary="商品の紹介">
<thead>

<tr>
<th>メーカー</th><td><a href="http://www.kalita.co.jp/">カリタ</a><br><span class="td_small">(株式会社カリタ公式ホームページ)</span></td>
</tr>

</thead>

<tr>
<th rowspan="2">型</th><td>ステンレス製　底径85mm</td>
</tr>

<tr>
<td>重量: <span class="math_wight">0.46kg</span></td>
</tr>

<tfoot>

<tr>
<th>価格</th><td><span class="math_wight">￥ 4,537</span>&nbsp;&nbsp;<span class="td_small"><a href="http://www.amazon.co.jp/Kalita-%E3%82%AB%E3%83%AA%E3%82%BF-%E7%B4%B0%E5%8F%A3%E3%83%9D%E3%83%83%E3%83%88-0-7L/dp/B000H77TK0">amazon.com.jp</a></span></td>
</tr>

</tfoot>

</table>
</div><!-- / img_title_p -->

</div><!-- / img_box -->

<hr>

<div class="img_box">

<div class="img_box_image">

<p class="main">
<img src="DATE2/img_server.jpg" width="160" height="250" alt="" name="mainImg">
</p>

<br>

<div class="thumbnail">
<img src="DATE2/1_o.jpg" width="70" height="100" alt="" 
onMouseOver="document.mainImg.src='DATE2/img_server.jpg'">

<img src="DATE2/2_o.jpg" width="70" height="100" alt="" 
onMouseOver="document.mainImg.src='DATE2/3.jpg'">

<br>

<img src="DATE2/3_o.jpg" width="70" height="100" alt="" 
onMouseOver="document.mainImg.src='DATE2/2.jpg'">

<img src="DATE2/4_o.jpg" width="70" height="100" alt="" 
onMouseOver="document.mainImg.src='DATE2/4.jpg'">

</div><!-- / thumbnail -->

</div><!-- / img_box_image -->

<div class="img_title_p">

<h2>ドリップセット <span class="math_wight2">101-ロトセットN</span></h2>
<p class="h2_sub">[ コーヒードリッパー&amp;サーバー(デカンタ)&amp;コーヒー濾紙 ]</p>

<div class="h3_title">

<h3 class="h3_top"><img src="DATE2/logo7.gif" width="55" height="55" alt="商品の説明">商品の説明</h3>
<p class="h3_img_p">カリタ製品のドリップセット。<br>サーバー、ドリッパー、濾紙等がセットになってお得です。</p>

</div><!-- / h2_sub -->

<h3 class="h3_pad_top">抽出のコツ</h3>
<p class="h3_img_p2">使用器具のメーカーを統一することによって均整のとれた風味になる。</p>

<h3 class="h3_pad_top">商品の紹介</h3>
<table border="1" width="300" height="50" cellpadding="6" cellspacing="0" summary="商品の紹介">
<thead>

<tr>
<th>メーカー</th><td><a href="http://www.kalita.co.jp/">カリタ</a><br><span class="td_small">(株式会社カリタ公式ホームページ)</span></td>
</tr>

</thead>

<tr>
<th rowspan="2">型</th><td>1〜2人用陶器製ドリッパー<br>101濾紙<br>
300ccサーバー　<br>メジャーカップ　<br>ロト受け</td>
</tr>

<tr>
<td>重量: <span class="math_wight">0.63kg</span></td>
</tr>

<tfoot>

<tr>
<th>価格</th><td><span class="math_wight">￥ 1,712 </span>&nbsp;&nbsp;<span class="td_small"><a href="http://www.amazon.co.jp/Kalita-%E3%82%AB%E3%83%AA%E3%82%BF-35161-%E3%83%89%E3%83%AA%E3%83%83%E3%83%97%E3%82%BB%E3%83%83%E3%83%88-101-%E3%83%AD%E3%83%88%E3%82%BB%E3%83%83%E3%83%88N/dp/B000HAELDU">amazon.com.jp</a></span></td>
</tr>

</tfoot>

</table>
</div><!-- / img_title_p -->

</div><!-- / img_box -->

<hr>

<div class="img_box">

<p class="img_box_image"><img src="DATE2/img_beans.jpg" width="160" height="250" alt=""></p>

<div class="img_title_p">

<h2>トラジャセレクテッド <span class="math_wight2"> 200g(豆)</span></h2>
<p class="h2_sub">[ 豆&amp;粉 ]</p>

<div class="h3_title">

<h3 class="h3_top"><img src="DATE2/logo7.gif" width="55" height="55" alt="商品の説明">商品の説明</h3>
<p class="h3_img_p">プレミアム『アルコ トラジャ』<br>
トアルコトラジャをベースにした、格調高い味わいです。「幻の名品トラジャコーヒー」を復活させるために、インドネシア スラウエシ島のジャングルを開墾し、理想的なコーヒー生産を行なう直営農場を作りあげました。</p>

</div><!-- / h2_sub -->

<h3 class="h3_pad_top">抽出のコツ</h3>
<p class="h3_img_p2">店舗オリジナルブレンドがある場合それがその店舗のオススメである。豆は挽かれていない豆タイプのものを購入すると鮮度が落ちにくい。</p>

<h3 class="h3_pad_top">商品の紹介</h3>
<table border="1" width="300" height="50" cellpadding="6" cellspacing="0" summary="商品の紹介">
<thead>

<tr>
<th>メーカー</th><td><a href="http://www.keycoffee.co.jp/index.html">KEY COFFEE</a><br><span class="td_small">(キーコーヒー株式会社公式ホームページ)</span></td>
</tr>

</thead>

<tr>
<th rowspan="2">内容</th><td>２００ｇ（豆）</td>
</tr>

<tr>
<td>商品サイズ(幅×奥行×高さ):<br>80×50×145mm袋</td>
</tr>

<tfoot>

<tr>
<th>価格</th><td><span class="math_wight">￥ 798</span>&nbsp;&nbsp;<span class="td_small"><a href="http://www.amazon.co.jp/%E3%82%AD%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC-%E3%83%88%E3%83%A9%E3%82%B8%E3%83%A3%E3%82%BB%E3%83%AC%E3%82%AF%E3%83%86%E3%83%83%E3%83%89-200g-%E8%B1%86/dp/B002OB3ZL4/ref=sr_1_2?ie=UTF8&qid=1359903265&sr=8-2">amazon.com.jp</a></span></td>
</tr>

</tfoot>

</table>
</div><!-- / img_title_p -->

</div><!-- / img_box -->
</p>

</div><!-- / .tab #sampletab1 -->

<div class="tab" id="sampletab2">

<p><span class="gr">tab02</span><br>に切り替わりました。</p>

</div><!-- / .tab #sampletab2 -->

<div class="tab" id="sampletab3">

<p><span class="gr">tab03</span><br>に切り替わりました。</p>

</div><!-- / .tab #sampletab3 -->

<div class="tab" id="sampletab4">

<p><span class="gr">tab04</span><br>に切り替わりました。</p>

</div><!-- / .tab #sampletab4 -->

</div><!-- / #tabBox -->

<section class="top_button">  
<p><a href="#top" title="ページのトップへ戻る"><button>&and;&emsp;ページのトップへ戻る</button></a></p>  
</section>  

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

<div id="side_bar">

<p class="side_bar_img"><img src="DATE2/font_main.png" alt="珈琲大学logo"></p>

<div class="side_bar_nav">
<ul>
<li><a href="about.html"><img src="DATE2/about.png" width="124" height="29" alt="About" onMouseOver="this.src='DATE2/about_o.png'" 
onMouseOut="this.src='DATE2/about.png'"></a></li>

<li><a href="preparation.html"><img src="DATE2/preparation2.png" alt="Preparation" onMouseOver="this.src='DATE2/preparation_o2.png'" 
onMouseOut="this.src='DATE2/preparation2.png'"></a></li>

<li><a href="preformance.html"><img src="DATE2/preformance2.png" alt="Preformance" onMouseOver="this.src='DATE2/preformance_o2.png'" 
onMouseOut="this.src='DATE2/preformance2.png'"></a></li>

<li><a href="situation.html"><img src="DATE2/situation.png" alt="Situatoin" onMouseOver="this.src='DATE2/situation_o.png'" 
onMouseOut="this.src='DATE2/situation.png'"></a></li>

<li><a href="cafe.html"><img src="DATE2/cafe.png" alt="Cafe" onMouseOver="this.src='DATE2/cafe_o.png'" 
onMouseOut="this.src='DATE2/cafe.png'"></a></li>

<li class="last"><a href="conclusion.html"><img src="DATE2/conclusion.png" alt="Conclusion" onMouseOver="this.src='DATE2/conclusion_o.png'" 
onMouseOut="this.src='DATE2/conclusion.png'"></a></li>
</ul>

</div><!-- / side_bar_nav -->

</div><!-- / side_bar -->

</div><!-- / wrapper -->

<div id="footer">

<div class="footer_left">

</div><!-- / footer_left -->

<div class="nav_bottom_footer">

</div><!-- nav_bottom_footer -->

<div class="footer_main">

<div id="footer_main_nav">

<ul class="footer_nav">
<li class="home"><a href="index.html">Home</a></li>
</ul>

<address>Copyright &copy; 2013 copyrights.珈琲大学〜ステキなモテ講座〜. All Rights Reserved.</address>

</div><!-- / footer_main_nav -->

</div><!-- / footer_main -->

<div class="footer_right">

</div><!-- / footer_right -->

</div><!-- / footer -->

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

<script type="text/javascript">
  var tabber1 = new Yetii({
  id: 'tabBox'
  });
</script>

<ul class="tdftad">
<li><a href="http://crowd.biz-samurai.com/" target="_top">自宅で出来る小遣い稼ぎ</a></li>
<li class="tdftpr"><a href="http://key-lock.net/kanagawa/kawasakishi.html" target="_top">川崎　鍵屋</a></li>
<li class="tdftpr"><a href="http://pydt.jp/" target="_top">ダイエット クチコミ</a></li>
<li class="tdftpr"><a href="http://uura.jp/" target="_top">占い クチコミ</a></li>
<li class="tdftlink"><a href="http://crowd.biz-samurai.com/" target="_top" rel="nofollow">空いた時間を有効活用</a></li>
</ul></body>
</html>

ソースコード【 CSS 】

<< css/preparation_style.css >>

@charset "UTF-8";


/* reset
================================ */
html,body,div,h1,h2,h3,p,address,ul,ol,li{
	
margin: 0;
padding: 0;
line-height: 1.6;
font-family:
  "ヒラギノ角ゴ Pro W3",
  "Hiragino Kaku Gothic Pro W3",
  "メイリオ",
  Meiryo,
  Osaka,
  "ＭＳ Ｐゴシック",
  "MS PGothic",
  sans-serif;
}

ul, ol  {
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  border: 0;
}

em {
 visibility: hidden;
}

/* font-size
================================ */
address {
  font-size: 8px;
}

.link_webry {
  font-size: 12px;
}

h2 {
  font-size: 22px;
}

h2.introduction {
  font-size: 23px;
}

.h2_sub,.td_small {
  font-size: 11px;
}

.img_title_p {
  font-size: 14px;
}

h3 {
  font-size: 15px;
}

.math_wight2 {
  font-size: 18px;
}

/* color
================================ */
p,h2,h3,th,td,hr {
  color: #333;
}

.h2_sub {
 color: #848AFF;}

.logo_p {
  color: #fff;
}

address {
 color: #fff;
}

thead,tfoot {
  background-color: #f4f4f4;
}

/* body
================================ */
body {
  text-align: center;
  line-height: 1.5;
  background-color: #f9f9f9;
}

/* container
================================ */
#container {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

/* header
================================ */
#header {
  width: 960px;
  height: 54px;
  overflow: hidden;
}

.header_left {
  float: left;
  width: 35px;
  height: 54px;
  background-image: url("../DATE2/header_left.jpg");
  background-repeat: no-repeat;
}

.nav_top_header{
  float: left;
  width: 300px;
  height: 54px;
  background-image: url("../DATE2/header_main5.png");
  background-repeat: no-repeat;
}
	
.header_main {
  float: left;
  width: 575px;
  height: 54px;
  background-image: url("../DATE2/header_main.png");
  background-repeat: repeat-x;
}

.header_right {
  float: right;
  width: 50px;
  height: 54px;
  background-image: url("../DATE2/header_right.jpg"); 
  background-repeat: no-repeat;
}

.link_webry {
  position: absolute;
  top: 18px;
  right: 70px;
}
	
/* wrapper
================================ */
#wrapper {
  clear: both;
  width: 875px;
  margin-left: 35px;
  background-color: #fff;
  overflow: hidden;
}

/* content
================================ */
#content {
  float: right;
  width: 555px;
  padding-bottom: 50px;
  overflow: hidden;
}

h1.title_img {
 clear: both;
 padding: 60px 25px 60px 5px;
}

.img_p {
  text-align: left;
  line-height: 2.3em;
  width: 470px;
  padding-left: 60px;
  text-indent: 1em;
}

.img_box {
  width: 500px;
  margin: 30px auto;
  padding-bottom: 50px;
}

.img_box_image {
  float: left;
}

.thumbnail img {
  border: 1px solid #D8D8D8;}

.img_title_p {
  text-align: left;
  width: 340px;
  padding-left: 25px;
  overflow: auto;
}

h2.introduction {
  padding-top: 80px;
}

h2 {
  padding-top: 6px;
}

h2.introduction {
  width: 200px;
  font-weight: bold;
  text-align: left;
  padding-left: 45px;
}

.h2_sub {
  font-weight: 600;
  line-height: 1.2em;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.math_wight {
  font-weight: 600;
}

h3 {
  padding-bottom: 3px;
}

h3 img {
  float: left;
  margin-right: 16px;
}

.h3_img_p {
  width: 250px;
  overflow: auto;
}

.h3_img_p2 {
  width: 310px;
}

.h3_top {
  padding-top: 14px;
}

.h3_top img {
  padding-top: 11px;
}

.h3_title {
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

.h3_pad_top {
  padding-top: 15px;
}

/* table
================================ */
td {
  padding-left: 11px;
}

th {
  text-align: center;
}

td a:hover {
  color: #33C; }

.td_small a:hover {
  text-decoration: underline;
  color: #33C;
}

/* button
==================================== */
.top_button {
  text-align: right;
  padding-right: 20px;
  padding-top: 50px;
}

/* side_bar
================================ */
#side_bar {
  float: left;
  width: 300px;
  background-image: url("../DATE2/img_nav2.png");
  background-repeat: repeat-y;
}

p.side_bar_img {
  padding-top: 50px;
}

.side_bar_nav {
  padding-left: 60px;
}

.side_bar_nav li{
  padding-top: 26px;
}

.side_bar_nav li.last {
  padding-bottom: 2200px;
}

/* footer
================================ */
#footer {
  clear: both;
  width: 960px;
  height: 120px;
}

.footer_left {
  float: left;
  width: 35px;
  height: 120px;
  background-image: url("../DATE2/footer_left.png");
  background-repeat: no-repeat;
}

.nav_bottom_footer {
  float: left;
  width: 300px;
  height: 120px;
  background-image: url("../DATE2/footer_main2.png");
  background-repeat: no-repeat;
}

.footer_main {
  float: left;
  width: 575px;
  height: 120px;
  background-image: url("../DATE2/footer_main.png");
  background-repeat: repeat-x;
}

.footer_right {
  float: right;
  width: 50px;
  height: 120px;
  background-image: url("../DATE2/footer_right.png");
  background-repeat: no-repeat;
}

#footer_main_nav {
  text-align: left;
  padding-left: 80px;
  padding-top: 20px;
}

li.home {
  text-align: center;
  width: 100px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

#footer_main_nav ul.footer_nav li a:link {
  color: #fff;
}

#footer_main_nav ul.footer_nav li a:visited {
  color: #90c;
}

#footer_main_nav ul.footer_nav li a:hover {
  color: #fa0;
}

.link_webry a:link {
  color: #fff;
}

.link_webry a:visited {
  color: #90c;
}

.link_webry a:hover {
  color: #fa0;
}

address {
  text-align: right;
  padding-top: 20px;
  padding-right: 28px;
}

#body_bg {
  position: absolute;
  top: 60%;
  left: -18%;
}

#body_bg2 {
  position: absolute;
  top: 20%;
  left: 95%;
}

ソースコード【 CSS 】

<< css/button.css >>

@charset: "UTF-8";

.top_button button {
  font-size: 10px;
}

/* 右と下だけボーダーの色を濃く。
============================================= */
.top_button button   {  
  border-top: 1px solid #ccc;  
  border-right: 1px solid #999;  
  border-bottom: 1px solid #999;  
  border-left: 1px solid #ccc;  
  padding: 5px 20px;  
  font-weight: bold;  
  cursor: pointer;  
  color: #666;  
}

/* 角円、テキスト、ボックスの装飾
=============================================== */
.top_button button   {  
  -webkit-border-radius: 3px;  
  -moz-border-radius: 3px;  
  text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;  
  -webkit-box-shadow: 1px 1px 2px #E7E7E7;  
  -moz-box-shadow: 1px 1px 2px #E7E7E7;  
}   

/* 背景色をグラデーションに最上部と最下部だけ少し色を変えている
======================================================== */
.top_button button {  
  background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);  
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));  
} 

/* マウスオーバー時のアクション
==================================================== */
.top_button button:hover {  
  background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));  
}  

/* クリック時のアクション
================================================== */
.top_button button:active    {  
  background: #ccc;  
  padding: 6px 20px 4px;  
}

ブラウザで表示【 Chrome 】