Webサイト制作04
珈琲大學のwebサイト
- パフォーマンスで演出し、視覚や聴覚で楽しませ期待感をふくれあがらせましょう
外部ファイル
《 .css 》
http://st.shinobi.jp/img/services/homepage/commercial.css
《 jQuery 》
js/jquery-1.6.min.js
Preformance
ソースコード【 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/preformance_style.css" media="screen,print"> <link rel="stylesheet" href="css/button.css"> <script type="text/javascript" src="js/jquery-1.6.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"> <h2 class="title_img"><img src="DATE2/preformance_img_title.jpg" width="500" height="333" alt="パフォーマンスをする"></h2> <p class="img_p">目の前で、または聞こえるように『只今、コーヒーを淹れています。』をアピールしてください。<br><br>視覚や聴覚で楽しませ期待感をふくれあがらせましょう。</p> <h3 class="youtube_main_title"><em>動画で見る見本</em></h3> <iframe width="500" height="281" src="http://www.youtube.com/embed/io9JiBfEySg" frameborder="0" allowfullscreen></iframe> <div class="youtube_title"> <h3>タリーズ流 ハンドドリップの淹れ方!<br>【 ホットコーヒー篇 】</h3> <p class="decoration"><a href="http://www.youtube.com/user/TULLYSCOFFEEJAPAN?feature=watch">TULLYSCOFFEEJAPAN</a> ・ <a href="http://www.youtube.com/user/TULLYSCOFFEEJAPAN/videos"> <span>27 本の動画</span></a><p> <div class="youtybe_title_p"> <p class="up_date">【アップロード日:<span> 2011</span>/<span>04</span>/<span>04</span>】</p> <ul class="navi"> <li> <div class="category"><img src="DATE2/font7.gif" width="500" height="32" alt="動画アップ時のコメント" onMouseOver="this.src='DATE2/font6_o.gif'" onMouseOut="this.src='DATE2/font7.gif'"></div> <ul class="menu"> <li>実際ハンドドリップをしているところを見た方が、美味しく入れるポイントがつかめます。「なるほど!」と改めて気づくこともあるはず。美味しく淹れるには幾つかポイントが-ありますが、何よりも気持ちをこめて楽しんで行うことが1番大切かもしれませんね。</li> </ul><!-- / .menu --> </li><!-- / ul.navi li --> <li> <div class="category"><img src="DATE2/font8.gif" width="500" height="32" alt="その他の情報" onMouseOver="this.src='DATE2/font7_o.gif'" onMouseOut="this.src='DATE2/font8.gif'"></div> <ul class="menu"> <li class="li_first">【Facebook】公式ページ</li> <li id="tullys_link"><a href="http://www.facebook.com/TullysCoffeeJapan">http://www.facebook.com/TullysCoffeeJapan</a></li> <li>タリーズの最新情報はもちろん、皆さまから寄せられたコーヒーにまつわる"ふとした疑問"を分かりやすく解説するなど、あなたの生活とコーヒーが、ちょっと身近でおいしい--関係になるような情報を、随時お届けしています♪</li> </ul><!-- / .menu --> </li><!-- / ul.navi li --> </ul><!-- / ul.navi --> </div><!-- / youtybe_title_p --> </div><!-- / youtube_title --> <section class="top_button"> <p><a href="#top" title="ページのトップへ戻る"><button>∧ ページのトップへ戻る</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 © 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"> $(function(){ $("ul.menu").hide(); $("div.category").click(function(){ $("ul.menu").slideUp(); if($("+ul",this).css("display")=="none"){ $("+ul",this).slideDown(); } }); }); </script> <ul class="tdftad"> <li><a href="http://crowd.biz-samurai.com/" target="_top">記事を書いてポイントGET</a></li> <li class="tdftpr"><a href="http://hikkoshi-go.com/infomation/result.php?state_id=19&area_id=20203" target="_top">上田市 引越し</a></li> <li class="tdftpr"><a href="http://www.plusmoney.jp/" target="_top">キャッシング</a></li> <li class="tdftpr"><a href="http://www.shinobi-web.biz/" target="_top">比較サイト</a></li> <li class="tdftlink"><a href="http://crowd.biz-samurai.com/" target="_top" rel="nofollow">自宅で出来る小遣い稼ぎ</a></li> </ul></body> </html>
<< css/preformance_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 Pゴシック", "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; } .img_title_p { font-size: 14px; } h3 { font-size: 18px; } .up_date { font-size: 13px; } .up_date span { font-size: 14px; } p.decoration,.pdecoration2 { font-size: 14px; } p.decoration span { font-size: 12px; } .category { font-size: 15px; } ul.menu li { font-size: 14px; } /* color ================================ */ p,h2,h3 { color: #333; } .logo_p { color: #fff; } address { color: #fff; } /* 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; } .link_webry a:link { color: #fff; } .link_webry a:visited { color: #90c; } .link_webry a:hover { color: #fa0; } /* wrapper ================================ */ #wrapper { clear: both; width: 875px; margin-left: 35px; background-color: #fff; overflow: hidden; } /* content ================================ */ #content { float: right; width: 555px; padding-top: 60px; padding-bottom: 120px; overflow: hidden; } h2.title_img { clear: both; } .img_p { text-align: left; line-height: 2.3em; width: 470px; padding-top: 45px; padding-left: 40px; text-indent: 1em; } h3 { padding-top: 7px; } h3.youtube_main_title { width: 500px; margin: 120px auto 0; background-image: url("../DATE2/font4.jpg"); background-repeat: no-repeat; } /* youtube画像 ========================================= */ .youtube_title { width: 500px; margin: 0 auto; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; overflow: auto; } .youtybe_title_p { text-align: left; } p.decoration { padding-top: 10px; } p.up_date { padding-top: 22px; text-indent: 1em; } p.decoration a:hover { text-decoration: underline; color: #33C; } .up_date span,p.decoration { font-weight: bold; } /* アコーディオンメニュー ================================================== */ ul.navi { width: 500px; margin: 0px; } ul.navi, ul.menu { margin: 0; padding: 0; list-style: none; overflow: hiddein; } ul.menu li { padding:15px 15px 20px; line-height: 1.8em; } ul.menu li.li_first { font-weight: bold; } #tullys_link { margin: 0; padding: 0; } #tullys_link a{ margin-left: 24px; padding: 0; } #tullys_link a:hover { text-decoration: underline; color: #33C; } .category { cursor: pointer; } ul.menu a{ display: block; height: 35px; line-height: 35px; color: #164158; padding: 0 1em; } /* button ==================================== */ .top_button { text-align: right; padding-right: 20px; padding-top: 60px; } /* 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: 1000px; } /* 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; } 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%; }
@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 】