Webサイト制作

webサイト制作 受講生作品



珈琲大學のwebサイト


  • コーヒーでモテモテになるための講座『珈琲大學』




外部ファイル


《 .css 》

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


index.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/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="header_main">

<h1 class="logo">珈琲大学</h1>

<p class="logo_p">ステキなモテ講座</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="font_img"><em>珈琲大学</em></h2>

<p><span>モテモテ</span>になる講座</p>

<p><span class="normal">〜</span>男性編<span class="normal">〜</span></p>

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

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

<div id="footer">

<div class="footer_left">

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

<div class="footer_main">

<div id="footer_main_nav">

<ul>
<li class="first"><a href="about.html">About</a></li>
<li><a href="preparation.html">Preparation</a></li>
<li><a href="preformance.html">Preformance</a></li>
<li><a href="situation.html">Situation</a></li>
<li><a href="cafe.html">Caf&eacute;</a></li>
<li><a href="conclusion.html">Conclusion</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://key-lock.net/kanagawa/kawasakishi.html" target="_top">川崎　鍵屋</a></li>
<li class="tdftpr"><a href="http://mvrv.jp/" target="_top">映画 クチコミ</a></li>
<li class="tdftpr"><a href="http://kgrm.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 】

@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
================================ */
.link_webry {
font-size: 12px;
}

address {
font-size: 9px;
}

span {
font-size: 17px;
}

span.normal {
font-size: 15px;
}
/* color
================================ */
p {
color: #333;
}

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: 50px;
height: 54px;
background-image: url("../DATE2/header_left.jpg");
background-repeat: no-repeat;
}

.header_main {
float: left;
width: 860px;
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;
}

h1 {
width: 279px;
height: 37px;
background-image: url("../DATE2/logo2.png");
background-repeat: no-repeat;
margin-left: 20px;
text-indent:-999px
}

p.logo_p {
float: left;
width: 50px;
text-indent:-999px
}

.link_webry {
position: absolute;
top: 0;
right: 70px;
font-color: #fff;
}
	
.link_webry a:link {
color: #fff;
}

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

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

/* wrapper
================================ */
#wrapper {
clear: both;
width: 860px;
margin: 0 auto;
background-color: #fff;
overflow: hidden;
}

/* content
================================ */
#content {
clear: both;
width: 860px;
margin: 0 auto;
padding: 155px 0;
background-image: url("../DATE2/img_main_bg.png");
background-repeat: repeat-y;
}

h2.font_img {
text-align: center;
width: 193px;
height: 49px;
margin: 0 337px;
background-image: url("../DATE2/font.png");
background-repeat: no-repeat;
}

p {
margin-top: 15px;
font-weight: 600;
}

span.normal {
font-weight: none;
padding: 0 7px;
}

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

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

.footer_main {
float: left;
width: 860px;
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 {
padding-top: 20px;
}

li {
display: inline;
border-left: 1px solid #fff;
padding: 0 10px;
}

li.first {
border-left: none;
}

li a:link {
color: #fff;
}

li a:visited {
color: #90c;
}

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

ソースコード【 CSS 】

ブラウザで表示【 Firefox 】