Webサイト制作０７

webサイト制作 受講生作品



珈琲大學のwebサイト


  • 結論




外部ファイル


《 .css 》

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


Conclusion


ソースコード【 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/conclusion_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/em3.png" width="100" height="703" 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/conclusion_title2.gif" width="155" height="24" alt="けつろん"></h2>

<div class="img_p">
<p>では、結果です。あなたはここまで良く頑張りました。</p>
<p class="p_top">しかし女性はすべての手の内を見透かしていることでしょう。しかしあなたの淹れるコーヒーを飲みに来てくださった女性は、そんな一生懸命に尽くしてくれたあなたにとても好意を寄せていることでしょう。</p>
<p>それでは、チャレンジしてみましょう！まずは<span class="koui">好意</span>を寄せていただけている女性をお部屋にご招待してください。そこからすべてが始まります。</p>

<p class="p_try"><img src="DATE2/conclusion_title_sub.gif" width="233" height="24" alt="男性が誰でも女性にもてたいかっこよくなりたいと思ったはず"><em>いざ!!Let'sトライ!!</em></p>
</div><!--/ img_p -->

</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 -->

<ul class="tdftad">
<li><a href="http://crowd.biz-samurai.com/" target="_top">自宅で出来る小遣い稼ぎ</a></li>
<li class="tdftpr"><a href="http://hikkoshi-go.com/infomation/result.php?state_id=8&area_id=09202" target="_top">足利市　引越し</a></li>
<li class="tdftpr"><a href="http://gmer.jp/" target="_top">ゲーム クチコミ</a></li>
<li class="tdftpr"><a href="http://mvrv.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/conclusion_style.css >>

@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 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;
}

p {
  font-size: 16px;
}

.span {
  font-size: 17px;
}

.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;
  background-image: url("../DATE2/woman3.jpg");
  background-repeat: no-repeat;
  background-position: right bottom;
}

.img_box {
  clear: both;
  width: 200px;
  margin: 30px auto;
  padding-right: 20px;
  padding-top: 40px;
}

.img_box_ul li {
  float: left;
  padding-left: 10px;
  padding-bottom: 50px;
}

h2.title_img {
  padding: 50px 5px 60px 30px;
}

.img_p {
  clear: both;
  text-align: left;
  line-height: 2.3em;
  width: 500px;
  padding-left: 30px;
  text-indent: 1em;
  padding-bottom: 180px;
}

.p_top {
  margin-bottom: 32px;
}

.p_try {
  padding: 70px 0 100px 0;
}

span.koui {
  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: 350px;
}

/* 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: 15%;
  left: -18%;
}

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

ブラウザで表示【 Chrome 】