webサイト制作の勉強|2018月2月クラスブログ

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>SNSのAPIを使った1カラムサイトの制作</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/vegas.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/script.js"></script>
<script src="js/vegas.js"></script>
<script>
$(function(){
$('header').vegas({
  transition: 'fade', 
  slides: [
    { src:'img/main1.png' },
    { src:'img/main2.png' },
    { src:'img/main3.png' }
  ]
});
});
</script>
</head>

<body id="top">
<header>
<h1>タイトル(仮)</h1>
</header>
<nav>
<ul class="gnav">
<li><a href="#facebook">FACEBOOK</a></li>
<li><a href="#menu">MENU</a></li>
<li><a href="#party">PARTY</a></li>
<li><a href="#wedding">WEDDING</a></li>
<li><a href="#info">INFOMATION</a></li>
<li><a href="#reservation">RESERVATION</a></li>
</ul>
</nav>

<div class="box" id="facebook">
<div class="wrapper">
<div class="fb">
<h2>Facebook</h2>
<div class="fb_inner">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.0';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-page" data-width="320" data-href="https://www.facebook.com/toshima9.tokyo/" data-tabs="timeline" data-small-header="true" data-adapt-container-width="false" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/toshima9.tokyo/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/toshima9.tokyo/">豊島区民ニュース</a></blockquote></div>

</div>
</div>

<div class="tw">
<h2>Twitter</h2>
<div class="tw_inner">
<a class="twitter-timeline" data-height="600" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/seiburailway?ref_src=twsrc%5Etfw">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</div>

<div class="box" id="menu">menu</div>



<div class="box" id="party">
<h2>party</h2>
<video controls muted id="v_content">
<source src="img/party.mp4" type="video/mp4">
</video>

<h3>YouTube</h3>
<div class="YT_wrapper">
<iframe id="YT_video" src="https://www.youtube.com/embed/HCq2g_PQfP8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

</div>

<div class="box" id="wedding">
wedding
</div>


<div class="box" id="info">
<div class="info_wrapper">
<div class="info_inner">
<h2>infomation</h2>
<dl>
<dt>電話番号</dt><dd>03-xxx-4567</dd>
<dt>営業時間</dt><dd id="week">平日:11時~22時</dd><dd>土日・祝日:10時~23時</dd>
<dt>住所</dt><dd>豊島区南池袋x-x-x</dd>
<dt>定休日</dt><dd>無休</dd>
</dl>
<p id="eg">English</p>
</div>

<div class="gmap">
<h2>Access</h2>
<iframe id="map_frame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.011000573313!2d139.71168631526004!3d35.725947980183804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd184e022fc8bf0e6!2z5qCq5byP5Lya56S-44OV44Kh44Km44Oz44OH44O844K344On44Oz44OV44Kn44Oq44KrVEE!5e0!3m2!1sja!2sjp!4v1525858935282" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>

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

<p id="to_top"><a href="#top">トップに戻る</a></p>
<footer></footer>
</body>
</html>


スタイルシート

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

html,body,h1,h2,h3,p,ul,li,dl,dt,dd {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}

/*PCレイアウト*/
header {
  width:100%;
  height:calc(100vh - 50px);/*演算子の両サイドは必ず半角スペース*/
  background:url(../img/main1.png) no-repeat center center/cover;
  position:relative;
}
h1 {
  width:140px;
  height:140px;
  background:url(../img/logo.svg) no-repeat center center/contain;
  position: absolute;
  top:30px;
  left:30px;
  white-space:nowrap;
  text-indent:100%;
  overflow:hidden;
  z-index:999;
}
nav {
  width:100%;
  height:50px;
  background:#FFF;
}
nav.fixed {
  position:fixed;
  top:0;
  left:0;
  z-index: 9999;
}
.gnav {
  width:70%;
  height:50px;
  margin:0 auto;
}
li {
  display:inline-block;
  height:50px;
  margin: 0 30px;
}
li a {
  display:block;
  line-height:50px;
  color:#3C6;
  text-align:center;
  font-weight:bold;
}
.box {
  width:100%;
  padding-top:60px;
  box-sizing:border-box;
}
#to_top a {
  display:block;
  padding:20px;
}
.wrapper {
max-width:960px;
margin: 0 auto;
overflow: hidden;
padding-top: 60px;
box-sizing: border-box;
}
#facebook h2 {
padding:0 0 10px 20px;
border-bottom: 2px solid #3C6;
margin: 20px;
color:#3C6;
}
.fb {
width: 48%;
float: left;
}
.fb-page {
padding: 60px;
box-sizing: border-box;
}
.tw {
width: 48%;
float: right;
}
.timeline-Body {
height: 500px;
}
#party h2 {
padding:20px 0;
border-bottom: 2px solid #3C6;
color:#3C6;
text-align: center;
width: 960px;
margin: 40px auto 20px;
}
#v_content {
display: block;
width: 960px;
margin:0 auto;
}
#party h3 {
text-align: center;
margin: 60px 0 0 0;
color: #3C6;
}
#YT_video {
display:block;
width: 800px;
height:500px;
margin: 50px auto 0;
}
.info_wrapper {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
}
.info_wrapper h2 {
text-align: center;
color:#3C6;
padding-bottom: 10px;
margin: 40px 0 20px;
}
.info_inner {
width: 48%;
float: left;
}
.info_inner dt {
float: left;
margin-bottom: 20px;
padding: 10px 0;
}
.info_inner dd {
padding:10px 0 10px 30%;
box-sizing: border-box;
border-bottom: 1px solid #3C6;
margin-bottom: 20px;
}
.info_inner dd#week {
border-bottom: none;
margin-bottom: 8px;
padding: 10px 0 0 30%;
}
#eg {
width: 200px;
height: 40px;
text-align: center;
line-height: 40px;
color:#3C6;
border: 1px solid #3C6;
border-radius: 8px;
float: right;
margin-top: 60px;
cursor: pointer;
}
.gmap {
width: 48%;
float: right;
}
#map_frame {
width:100%;
height: 400px;
}
#form {
width: 800px;
margin: 0 auto;
}
#gform {
width:100%;
height:1400px;
}

script.js

// JavaScript Document

//スクロールイベント
$(function(){
	var h = $('header').outerHeight();//指定した要素の高さを取得し変数hに代入
	console.log(h);
  $(window).scroll(function(){//スクロールイベント
		if($(this).scrollTop() > h){
			//header要素以上スクロールしたらという条件分岐
			$('nav').addClass('fixed');
		}else{
			$('nav').removeClass('fixed');
		};
	});
});


//スムーススクロール
$(function(){
	 //#で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
      // スクロールの速度
      var speed = 300; // ミリ秒
       // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 50;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});