webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

シングルページの作成

f:id:yachin29:20170209004414j:plain

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。

今回の制作のポイント
  • トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え
  • ナビゲーションはある程度スクロールしたら固定
  • SNSの埋め込み
  • googleマップの埋め込み
  • 複数のjQueryプラグインの導入

などなど

参考サイト

http://racines-park.com/


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウトのシングルページ</title>
<link rel="stylesheet" href="css/syle.css">
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header class="slide">
<h1>Cafe de felica</h1>
<p></p>
</header>
<nav>
<ul>
<li><a  href="#">FACEBOOK</a></li>
<li><a  href="#">MENU</a></li>
<li><a  href="#">PARTY</a></li>
<li><a  href="#">WEDDING</a></li>
<li><a  href="#">INFORMATION</a></li>
<li><a  href="#">RESERVATION</a></li>
</ul>
</nav>
<div id="content"></div>
<footer></footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

/*PCレイアウト*/
header {
  width:100%;
  height:90vh;
  background: url(../img/01.png) no-repeat center/cover;
}
h1 {
  font-family: 'Spirax', cursive;
  text-align:center;
  font-size:80px;
  color:#FFFFFF;
  padding-top:50px;
  text-shadow: 0 0 10px #666666;
}
nav {
  width:100%;
  height:10vh;
  background: rgba(255,255,255,1);
}
nav ul {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
}
nav li {
  width:16.66%;
  float:left;
}
nav li a {
  display:block;
  width:100%;
  line-height:10vh;
  font-size:14px;
  color:#339900;
  font-weight:bold;
}
nav li a:hover {
  opacity:0.7;
}

/*ナビゲーションのスクロール*/
nav.fixed {
  position:fixed;
  left:0;
  top:0;
  background: rgba(255,255,255,0.7);
}

#content {
  width:100%;
  height:3000px;
  background:#CCCCCC;
}

Javascript

$(function() {
				$(window).scroll(function() {
					if ($(window).scrollTop() > 575) {
						$('nav').addClass('fixed');
					} else {
						$('nav').removeClass('fixed');
					}
          });
});





index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フルスクリーンレイアウトのシングルページ</title>
<link href="https://fonts.googleapis.com/css?family=Spirax" rel="stylesheet">
<link rel="stylesheet" href="css/syle.css">
<link rel="stylesheet" href="css/vegas.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<style>
.fancybox-slide--video .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
}

</style>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/vegas.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script>
$(function(){
$('header').vegas({
  transition: 'fade', 
  transitionDuration: 2000,
  delay: 5000,
  animation: 'none',
  animationDuration: 20000,
  overlay:'overlays/01.png',
  slides: [
    { src:'img/01.png' },
    { src:'img/02.png' },
    { src: 'img/03.jpg' }
  ]
});
});
</script>
<script>
$(function(){
	$("[data-fancybox]").fancybox({
		
	});
});
</script>
</head>
<body>
<header class="slide">
<h1>Cafe de felica</h1>
<p></p>
</header>
<nav>
<ul>
<li><a  href="#">FACEBOOK</a></li>
<li><a  href="#">MENU</a></li>
<li><a  href="#">PARTY</a></li>
<li><a  href="#">WEDDING</a></li>
<li><a  href="#">INFORMATION</a></li>
<li><a  href="#">RESERVATION</a></li>
</ul>
</nav>
<div id="content">
<div id="map">
<h2>MAP</h2>
<iframe id="gmap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1361.8413791520838!2d139.7137111940076!3d35.72565495438745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d69a1bfc623%3A0x6f829dc3047a4f7c!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yR77yS4oiS77yZIO-8q--8q-ODk-ODqw!5e0!3m2!1sja!2sjp!4v1491985629352" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

<div id="calendar">
<h2>Schedule</h2>
<iframe id="gcalendar" src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;bgcolor=%23FFFFFF&amp;src=2ahug8ru50b9ludvqe8i8i5470%40group.calendar.google.com&amp;color=%23B1365F&amp;ctz=Asia%2FTokyo" style="border-width:0"  frameborder="0" scrolling="no"></iframe>
</div>

<div id="form">
<h2>Contact Form</h2>
<iframe id="gform" src="https://docs.google.com/forms/d/e/1FAIpQLScJLKmX0WT3LzLpUK6Y58VKFzqDtlkoI0gNeUb-ghoLfLXxbg/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます...</iframe>
</div>

<div class="inner">
<div id="twitter">
<h2>Twitter</h2>
<a class="twitter-timeline" data-height="500" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/seiburailway">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fb_box">
<h2>Facebook</h2>
<iframe id="fb" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fkensetsu.metro.tokyo.jp&tabs=timeline&width=400px&height=500px&small_header=true&adapt_container_width=false&hide_cover=false&show_facepile=false&appId" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>

<ul id="img_box">
<li><a href="img/box1.png" data-fancybox="group"><img src="img/box1_s.png" alt="#"></a></li>
<li><a href="img/box2.png" data-fancybox="group"><img src="img/box2_s.png" alt="#"></a></li>
<li><a href="img/box3.png" data-fancybox="group"><img src="img/box3_s.png" alt="#"></a></li>
<li><a href="img/box4.png" data-fancybox="group"><img src="img/box4_s.png" alt="#"></a></li>
<li><a href="img/box5.png" data-fancybox="group"><img src="img/box5_s.png" alt="#"></a></li>
<li><a href="img/box6.png" data-fancybox="group"><img src="img/box6_s.png" alt="#"></a></li>
</ul>

<div class="ytube">
<ul>
<li><a data-fancybox href="https://www.youtube.com/watch?v=JGwWNGJdvx8" ><img src="img/youtube01.png" alt="#"></a></li>
<li><a href="https://www.youtube.com/watch?v=UqyT8IEBkvY" data-fancybox><img src="img/youtube02.png" alt="#"></a></li>
</ul>
</div>
</div>
</div>
<footer>
<p><small>&copy; cafe de Felica</small></p>
</footer>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p,ul, ol, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}

/*PCレイアウト*/
header {
  width:100%;
  height:90vh;
  background:#ccc no-repeat center/cover;
}
h1 {
  font-family: 'Spirax', cursive;
  text-align:center;
  font-size:80px;
  color:#FFFFFF;
  padding-top:50px;
  text-shadow: 0 0 10px #666666;
}
nav {
  width:100%;
  height:10vh;
  background: rgba(255,255,255,1);
}
nav ul {
  width:960px;
  margin: 0 auto;
  overflow:hidden;
}
nav li {
  width:16.66%;
  float:left;
}
nav li a {
  display:block;
  width:100%;
  line-height:10vh;
  font-size:14px;
  color:#339900;
  font-weight:bold;
}
nav li a:hover {
  opacity:0.7;
}

/*ナビゲーションのスクロール*/
nav.fixed {
  position:fixed;
  left:0;
  top:0;
  background: rgba(255,255,255,0.7);
}

#content {
  width:100%;
}
#map {
  width:960px;
  margin: 0 auto 100px;
}
#map h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 80px 0 20px 0;
}
#gmap {
  width:100%;
  height:400px;
}

#calendar {
  width:960px;
  margin: 0 auto;
}
#gcalendar {
  width:100%;
  height:400px;
}
#calendar h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 80px 0 20px 0;
}
#form {
  width:960px;
  margin: 80px auto 0;
}
#form h2 {
   font-family: 'Spirax', cursive;
   text-align:center;
   font-size:38px;
   padding: 40px 0 20px 0;
}
#gform {
  width:100%;
  height:1200px;
}
.inner {
  width:960px;
  margin: 40px auto;
  overflow:hidden;
}
#twitter {
  width:400px;
  float:left;
  margin-bottom:80px;
}
#twitter h2,#fb_box h2 {
  font-family: 'Spirax', cursive;
   text-align:center;
   font-size:30px;
   padding: 40px 0 20px 0;
}
#fb_box {
  width:400px;
  float:right;
  margin-bottom:80px;
}
#fb {
  width:100%;
  height:500px;
}

#img_box {
  width:648px;
  margin: 60px auto;
  overflow:hidden;
}

#img_box li {
  float:left;
  margin:6px;
}

.ytube {
  width:648px;
  margin: 80px auto;
}
.ytube ul {
  overflow:hidden;
}
.ytube li {
  float:left;
  margin:12px;
}
footer {
  width:100%;
  height:50px;
  background: #339900;
}
footer p {
  text-align:center;
  line-height:50px;
  font-size:16px;
  color:#FFFFFF;
}