Webサイト制作02
珈琲大學のwebサイト
- コーヒーを女性の前でカッコよく淹れてモテモテになる方法
外部ファイル
《 .css 》
http://st.shinobi.jp/img/services/homepage/commercial.css
about.html
ソースコード【 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/about_style.css" media="screen,print"> <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/em2.png" width="47" height="300" 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="#">実践する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/about_P2.gif" width="453" height="126" alt="男性が誰でも女性にもてたいかっこよくなりたいと思ったはず"></p> <p class="p_img"><img src="DATE2/about_img.png" width="150" height="300" alt=""></p> <div class="p_img_p"> <p>そう思っている方へ、コーヒーを女性の前でカッコよく淹れてモテモテになる方法<span>「モテモテ道」</span>をご紹介します。</p> </div> </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://hikkoshi-kakaku.com/ranking/index.html" target="_top">引越し業者 人気ランキング</a></li> <li class="tdftpr"><a href="http://uura.jp/" target="_top">占い クチコミ</a></li> <li class="tdftpr"><a href="http://ryog.jp/" target="_top">国内旅行 クチコミ</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 { float: left; padding: 60px 5px 60px 30px; } .p_img { float: left; padding-left: 30px; padding-bottom: 50px; } .p_img_p { float: left; text-align: left; text-indent: 1em; line-height: 2.3em; width: 300px; padding-left: 30px; } .p_img_p span { font-weight: bold; } /* 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: 50px; } /* 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 { color: #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 { background-repeat: no-repeat; position: absolute; top: 15%; left: -18%; } #body_bg2 { background-repeat: no-repeat; position: absolute; top: 6%; left: 95%; }
ブラウザで表示【 Firefox 】