Webサイト制作06
珈琲大學のwebサイト
- おいしいコーヒーを淹れる
外部ファイル
《 .css 》
http://st.shinobi.jp/img/services/homepage/commercial.css
Café
ソースコード【 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/cafe_style.css" media="screen,print"> <link rel="stylesheet" href="css/button.css"> <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"> <p class="title_img"><img src="DATE2/cafe_title.gif" width="326" height="26" alt="おいしいコーヒーを入れる"></p> <div class="img_box"> <ul class="img_box_ul"> <li><img src="DATE2/cafe3.jpg" width="180" height="600" alt=""></li> </ul><!-- / ul --> </div><!-- / img_box --> <div class="img_box_left"> <p class="inde">出来立てのコーヒーを淹れてあげましょう。</p> <p>出来立てのコーヒーはとても強く香りが立ちます。</p> <p>香りには人に生理的な影響を与えることがある。との研究結果も報告されています。</p> <p class="inde">コーヒーの香り(揮発性成分)の中には、香水で使われているストロベリーフラノンと呼ばれる有機化合物など800種類を超える成分が発見されています。</p> <p>そのコーヒーの香り<span class="bl">「コーヒーアロマ」</span>と呼ばれる香りの力を借りれば、ググッと雰囲気を作り出してくれることでしょう。</p> </div><!-- / img_box_left --> <div id="lust_title"> <div class="img_p"> <p class="sub_title"><img src="DATE2/font3.png" alt="もし失敗してしまったら"><em>もし失敗してしまったら....。</em></p> <p class="p_top">裏で見つからないようにスタバのコーヒーに入れ替えましょう。</p> <p>もし女性がドトール好きであればドトールコーヒーを用意しましょう。しかしはじめからあきらめてはいけません。失敗を恐れずにチャレンジすることが<span class="bl">「もてもて道」</span>の第一歩です。</p> </div><!--/ img_p --> </div><!-- / lust_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 --> <ul class="tdftad"> <li><a href="http://crowd.biz-samurai.com/" target="_top">記事を書いてポイントGET</a></li> <li class="tdftpr"><a href="http://www.cash-t.com/" target="_top">キャッシング</a></li> <li class="tdftpr"><a href="http://www.youtube.com/watch?v=E4q0H7Fkfsg" target="_top">LUBE</a></li> <li class="tdftpr"><a href="http://www.youtube.com/watch?v=E4q0H7Fkfsg" target="_top">【動画】LUBE</a></li> <li class="tdftlink"><a href="http://crowd.biz-samurai.com/" target="_top" rel="nofollow">記事を書いてポイントGET</a></li> </ul></body> </html>
@charset "UTF-8"; /* reset ================================ */ html,body,div,h1,h2,h3,p,address,ul,ol,li{ margin: 0; padding: 0; 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: 9px; } .link_webry { font-size: 12px; } /* color ================================ */ p { 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; overflow: hidden; } p.title_img { clear: both; padding: 60px 5px 20px 30px; } .img_box { float: right; padding-top: 40px; } .img_box_ul li { padding-bottom: 50px; } .img_box_left { float: left; width: 375px; padding-top: 50px; line-height: 2.2em; } .img_box_left p { text-align: left; padding-top: 12px; padding-left: 20px; padding-right: 16px; } .img_box_left p.inde { text-indent: 1em; } p span.bl { font-weight: bold; } .img_p { clear: both; text-align: left; line-height: 2.3em; width: 500px; margin-top: 100px; margin-left: 30px; text-indent: 1em; padding-bottom: 50px; background-image: url("../DATE2/cafe_man.jpg"); background-repeat: no-repeat; } .p_top { margin-bottom: 32px; } p.sub_title { padding-bottom: 125px; } #lust_title { clear: both; padding-top: 50px; } /* button ==================================== */ .top_button { text-align: right; padding-right: 20px; } /* 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 】