WEBサイト制作

#WEBサイト制作に役立つコードを記述
・コピー&ペーストで使用可能
・レスポンシブ対応
・学習するとともに随時更新を行う
・外部の技術と独自の記述が混在
・inviewJSを使う場合はDLが必要

#HTML StartUp
html制作に必要な初期テンプレート
使用可能：jQuery, bootstrap, fontawesome, googlefonts, bxSlider

```haml
<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- fontawesome -->
		<script src="https://kit.fontawesome.com/7c414374ac.js" crossorigin="anonymous"></script>
		<!-- google fonts -->
		<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p|Montserrat|Noto+Serif+JP|Sawarabi+Mincho&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- bxSlider CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
		<!-- MyCSS -->
		<link rel="stylesheet" href="assets/style.css">
    <title>title</title>
  </head>
  <body>
  <header>
         <nav>
         </nav>
  </header>

  <div class="main">
  </div>

  <footer>
  </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

	<!-- bxSlider JS -->
	<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

	<!-- inview JS -->
	<script src="assets/inview/jquery.inview.min.js"></script>

	<!-- myJS -->
	<script src="assets/script.js"></script>
  </body>
</html>
```
#CSS StartUp (リセットcss：自分用に改編版)
設定箇所：cssの初期化, form要素の最適化, font-sizeのrem指定設定, img要素の最適化

```css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}


body {
  line-height:2;
  letter-spacing: 0.18em;
  font-family: 'Montserrat', sans-serif;
  font-family: 'Noto Serif JP', serif;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding-left:0.2rem;
  vertical-align:baseline;
  background:transparent;
  text-decoration: none;
  color:black;
}
a:hover{
	  background:transparent;
  text-decoration: none;
  color:black;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;  
  border-top:1px solid #cccccc;
  margin:0 0;
  padding:0;
  border: 0;
}

/* form要素のcss全リセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}
/* form要素のcss全リセットここまで */
/*リセットここまで*/

/* font-size rem指定用に変換 */
html {
  /* ルートのフォントサイズを10pxに設定しておく */
  font-size: 62.5%;
}

body {
	/* ルートのフォントサイズを1.5em（15pxと同等のサイズ）に設定 */
	font-size: 1.5em;
}

h1{
	font-size: 3rem;
}
h2{
	font-size: 2.0rem;
}
h5{
	font-size: 1.5rem;
}
a{
	font-size: 2.5rem;

}
/* font-size rem指定用に変換ここまで */

/* イメージ要素をウィンドウサイズより大きくしない */
img {
object-fit: cover;
max-width: 100%;
height: auto;
}
/* イメージ要素をウィンドウサイズより大きくしないここまで */

.bg-white{
  background-color: white;
}
.bg-black{
  background-color: black;
}
.clr-white{
  color: white;
}
.flex-r{
  display: flex; 
  flex-wrap: wrap;
}
/* 丁度良いpaddingとmargin */
.p-top3{
    padding-top: 3rem;
}
.p-top5{
    padding-top: 5rem;
}
.p-bottom3{
    padding-bottom: 3rem;
}
.p-bottom5{
    padding-bottom: 5rem;
}
.pd-3{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.pd-5{
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.m-top3{
    margin-top: 3rem;
}
.m-top5{
    margin-top: 5rem;
}
.m-bottom3{
    margin-bottom: 3rem;
}
.m-bottom5{
    margin-bottom: 5rem;
}
.ma-3{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.ma-5{
  margin-top: 5rem;
  margin-bottom: 5rem;
}
/* 丁度良いpaddingとmarginここまで */
```
#headerテンプレート
コピペだけでheaderが完成します

html

```html
<header>
	<div class="header-contents">
		<a href="#"><img class="logo" src="images/任意のロゴ画像" alt="ロゴ"></a>
		<img class="navigation" src="images/任意のナビゲーションバー画像.png" alt="ナビゲーションバー">
	</div>
</header>

<nav>
	<ul>
		<li><a href="#">トップ</a></li>
		<li><a href="#id1">コンテンツ1</a></li>
		<li><a href="#id2">コンテンツ2</a></li>
		<li><a href="#id3">コンテンツ3</a></li>
		<li><a href="#id4">コンテンツ4</a></li>
		<li><a href="#id5">コンテンツ5</a></li>
	</ul>
</nav>

<div class="nav-cover"></div>
```

css

```css
/* headerここから */
/* モバイル用 */
header{
  position: fixed;
  z-index: 998;
  width: 100%;
  height: auto;
  /* 背景色は任意に変更 */
  background-color: rgba(0, 0, 0, 0.9);
}
.header-contents{
  width: 95%;
  height: 8.5vh;
  margin-left: auto;
  margin-right: auto;
}
header .logo{
  float: left;
  /* 以下、画像を小さくしてヘッダーの上下真ん中に配置(消しても良い) */
  height: 90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
header .navigation{
  float: right;
  /* 以下、画像を小さくしてヘッダーの上下真ん中に配置(消しても良い) */
  height: 90%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
nav{
  /* ナビは初期非表示 */
  display: none;
  width: 100%;
  position: fixed;
  top: 8.5vh;
  z-index:998;
  /* 任意のナビゲーションカラー */
  background-color: rgba(0, 0, 0, 0.9);
}
nav li{
  border-bottom: solid 1px rgba(255, 255, 255, 0.3);
}
nav a{
  display: block;
  padding-left: 2rem;
  color:white;
}
nav a:hover{
	color: #efcc69;
}
.nav-cover{
  display: none;
  position: fixed;
  top: 8.5vh;
  background-color: rgba(255, 255, 255, 0.2);
  /* 画像を表示させたい時用 */
  background-size: cover;
  height:100vh;
  width: 100%;
  z-index:997;
}
/* モバイル用ここまで */

/* PC用 */
@media (min-width: 720px){
  .navigation{
    display: none;
  }
  .header-contents{
    height: auto;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 10% 20% 70%;
  }
  header .logo{
    height: 90%;
    /* position:absoluteにするとなぜがロゴがheader内に
    収まる。header-contentsのheightはautoなので通常height:90%は
    auto要素を参照できないはず。。。
    今回同階層gridでナビ要素をmin-height:10vhとっている。
    もしかしたらgridはナビのheight要素を参照しているのかも
    結果オーライなんだけど */
    position: absolute;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  nav{
    width: 100%;
    min-height: 10vh;
    position: static;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    display: block;
    background-color: rgba(0, 0, 0, 0);
  }
  nav ul{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
  }
  nav ul li{
    display: inline;
    margin-right: 2rem;
    border-bottom: none;
  }
  nav a{
    display: inline;
    font-size: 2rem;
    padding-left: 0;
  }
}
/* PC用ここまで */
/* headerここまで */
```
javascript,jQuery
※以下のscriptがないとレスポンシブが行われません

```javascript
<script>
	$(function(){
//windowサイズが変化するごとにjQueryの動作を変更する判定
var timer = false;
var currentWidth = window.innerWidth;
  $(window).resize(function() {
  	if (currentWidth == window.innerWidth) {
        // ウインドウ横幅が変わっていないため処理をキャンセル。
        // safariでリロードされる現象を防ぐ
        return;
    }else if (timer !== false) {
          clearTimeout(timer);
      }
      timer = setTimeout(function() {
      location.reload();
      }, 200);
  });
	
	//現在の画面サイズ
  var winW = $(window).width();
  //判定基準にしたい画面サイズ
  var devW = 720;
  
  if (winW <= devW) {
    //720px以下の時の処理  
   $(document).on('click',function(e) {
   if(!$(e.target).closest('.navigation').length) {
     // ターゲット要素の外側をクリックした時の操作
     			$("nav").slideUp();
			$(".nav-cover").slideUp();
   } else {
     // ターゲット要素をクリックした時の操作
     			$("nav").slideToggle();
			$(".nav-cover").slideToggle();
   }
	});
	//スマホ用navここまで
	
  } else {
  //720pxより大きい時の処理
  
  	//navをheaderの中に入れる
  	$("nav").insertAfter(".navigation");
    
    //画面をクリックするとheaderが隠れる
    $(document).on('click',function() {
    	$("header").slideToggle();
							});
							
		//上にスライドでheader出現
		//下にスライドでheader隠れる
		var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop > startPos) {
        $('header:not(:animated)').slideUp();
    } else {
        $('header:not(:animated)').slideDown();
    }
    startPos = winScrollTop;
});

					  }
		
				});
</script>
```

#footerテンプレート
コピペだけでフッターが完成します

```html
<footer class="">
  <div class="footer_youso"><img src="images/rei.jpg" alt="お店のロゴ">
      <p class="">〒58s-45s54 住所xxxx-x</p>
      <p>TEL：<a href="tel:000-1s34-5s78">000-1s34-5s78</a></p>
      <p>MAIL：aaa@aaa.com</p>
  </div>
  <div class="site-info">
      <i class="far fa-copyright" aria-hidden="true"></i>
      <small>2020 omisenonamae</small>
  </div>
</footer>
```
css

```css
/* footerここから */
footer{
  background-color: rgba(255, 255, 255, 1);
  text-align:center;
  font-size: 1.5rem;
}
footer a{
  font-size: 1.5rem;
}
.footer_youso img{
  height: 15rem;
}
/* footerここまで */
```
#コンテンツの詳細画面を表示する
コピペで使える詳細画面
コンテンツをクリックすると詳細画面が立ち上がります
商品紹介をより詳しくスマートに行うため作成
表示される項目：写真,タイトル,値段,説明文
※表示項目は正直なんでもいいです
　適当にクラス名を変えてください
※説明文はスクロールできるので文字数制限なし

html

```html
<!-- 詳細表示元になる要素です -->
<div class="assignment-source">
	<img class="assignment-img" src="images/任意の画像" alt="">
	<p class="assignment-title">タイトル</p>
	<p class="assignment-price">値段</p>
	<p class="assignment-text">説明文説明文説明文説明文説明文説明文</p>
</div>

<!-- 表示される詳細画面です -->
<div class="shosai">
	<div class="shosai-contents">
		<img class="shosai-logo" src="images/お店のロゴとかある場合" alt="ロゴ">
		<img class="item-img" src="images/任意の画像" alt="">
		<div class="scroll">
			<p class="item-title">タイトルが代入される</p>
			<p class="item-price">値段が代入される</p>
			<p class="item-text">説明文が代入される</p>
		</div>
	</div>
</div>
<div class="shosai-out"></div>
```

css

```css

/* モバイル用 */
.shosai{
	display: none;
	width: 80%;
	height: 60vh;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background-color: #e8e8e8;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.shosai-out{
	/* 詳細画面外を任意の色で覆います */
	display: none;
	position: fixed;
	top:0; left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 998;
	/* 任意の色に変更 */
	background-color: rgba(255, 255, 255, 0.3);
}
.shosai .shosai-contents{
	position: relative;
	width: 90%;
	height: 100%;
	margin: auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.shosai-logo{
	/* 詳細画面にロゴとか入れたい人用
	削除してOK */
	position: absolute;
	height: 15%;
	bottom: 1%;
	right: 1%;
	opacity: 0.3;
}
.shosai .shosai-contents .item-img{
	width: 100%;
	height: 50%;
}
.scroll{
	height: 50%;
	overflow: scroll;
}
.assignment-text{
	display: none;
}
.item-title{
	font-size: 2rem;
}
.item-price{
	color: #79036a;
	margin-left: 0.3rem;
}
.item-text{
	margin-left: 0.1rem;
}

/* デスクトップ,パッド用レスポンシブ */
@media (min-width: 720px){
.shosai{
	display: none;
	width: 40%;
	height: 80vh;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	background-color: #e8e8e8;
	filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}
.shosai-out{
	/* 詳細画面外を任意の色で覆います */
	display: none;
	position: fixed;
	top:0; left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 998;
	/* 任意の色に変更 */
	background-color: rgba(255, 255, 255, 0.3);
}
.shosai .shosai-contents{
	position: relative;
	width: 95%;
	height: 100%;
	margin: auto;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.shosai-logo{
	/* 詳細画面にロゴとか入れたい人用
	削除してOK */
	position: absolute;
	height: 15%;
	bottom: 10%;
	right: 5%;
	opacity: 0.3;
}
.shosai .shosai-contents .item-img{
	width: 100%;
	height: 55%;
}
.assignment-text{
	display: none;
}
.scroll{
	height: 45%;
	overflow: scroll;
}
.item-title{
	font-size: 2rem;
}
.item-price{
	color: #79036a;
	margin-left: 0.3rem;
}
.item-text{
	margin-left: 0.1rem;
	font-size: 1.3rem;
	line-height: 1.5;
}
}
```

jQuery

```javascript
$(function(){
		//assignment-sourceクラスが付与されている要素をクリックすると
		//詳細画面が開き、画像やテキストが代入されます
		$(".assignment-source").on("click", function(){ 
         	$(".item-img").attr("src", $(this).find(".assignment-img").attr("src"));
         	$(".item-title").text($(this).find(".assignment-title").text());
         	$(".item-price").text($(this).find(".assignment-price").text());
         	$(".item-text").text($(this).find(".assignment-text").text());
     			$(".shosai").css("display","block");
					$(".shosai-out").css("display","block");
								});
									
				//詳細画面外をクリックしたときに詳細画面を閉じます
		   $(".shosai-out").on("click",function() {
				$(".shosai").css("display","none");
				$(".shosai-out").css("display","none");
							});
});
```
#タイトル画面テンプレート (bootstrap carousel)
bootstrapでタイトル画面を作る
(フェード機能 100vw 100vh)

```html
<div class="vh-cover"></div>
<div id="title">
	<div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-interval=3000 data-ride="carousel">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img class="d-block w-100" src="images/rei.jpg" alt="">
				</div>
				<div class="carousel-item">
					<img class="d-block w-100" src="images/rei2.jpg" alt="">
				</div>
				<div class="carousel-item">
					<img class="d-block w-100" src="images/rei.jpg" alt="">
				</div>
				<div class="carousel-item">
					<img class="d-block w-100" src="images/rei2.jpg" alt="">
				</div>
			</div>
	</div>
</div>
```

```css
/* タイトル画面ここから */
#carouselExampleSlidesOnly{
	position: fixed;
	top: 0;
	z-index: -1;
}
#title .carousel-item img{
	width: 100vw;
	height: 100vh;
}
.vh-cover{
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0);
}
/* タイトル画面ここまで */
```

#タイトル画面テンプレート (bxSlider)
コピペでタイトル画面を生成

html

```html
	<div class="title">
		<div class="slider">
			<div><img src="images/任意" alt=""></div>
			<div><img src="images/任意" alt=""></div>
			<div><img src="images/任意" alt=""></div>
			<div><img src="images/任意" alt=""></div>
		</div>
		<img class="hitokoto" src="material/任意の一言" alt="一言">
		<img class="logo" src="material/タイトル画面ロゴ" alt="タイトルロゴ">
	</div>
```

css

```css
/* titleここから */
.title{
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0);
}
.title .hitokoto{
  width: 100%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}
.title .logo{
  width: 90%;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
}

  /* スライダーここから */

  .bx-wrapper {
    position: fixed;
    z-index: -1;
    top: 0;
    background-color: transparent;
    margin: 0px auto 0px;
    border: none;
    box-shadow: none;
    width: 100%;
    height: 100%;
  }
  .bx-wrapper img {
    display: block;
    width: 100vw;
    height: 100vh;
    margin: 0px auto;
  }
  /* bsslider ページャーをスライダーの内側に収める */
  .bx-wrapper .bx-controls-auto,
  .bx-wrapper .bx-pager {
    bottom: 20px;
  }
  /* スライダーここまで */

  /* レスポンシブ対応 */
  @media (min-width: 720px){
    .title .hitokoto{
      width: 60%;
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
    }
    .title .logo{
      width: auto;
      height: 45%;
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      filter: drop-shadow(2px 2px 2px rgba(0,0,0,1));
    }
  }
  /* レスポンシブ対応ここまで */
/* titleここまで */
```

jQuery

```javascript
      $(".slider").bxSlider({
        auto: true,
        pause: 4000,
        speed: 2000,
  //一度に表示させる最大枚数
  maxSlides: 1,
  //タッチスワイプ許可設定
  touchEnabled: true,
  //タッチスワイプしたとみなす最低限の移動距離
  swipeThreshold: 10,
  //'full'はスライダーの数を黒点で、'short'はa/nで表示
  pagerType: 'full',
  // 画像の高さを自動調整
  adaptiveHeight: true,
  //コントロール表示
  controls: false,
  //スライドモード設定
  mode: 'fade',
  //スライド番号を表示する
  pager: false
});
```


#bxSliderテンプレート
タイトル画面スライダーのテンプレート

html

```html
<div class="top-empty"></div>

<div class="slider">
	<div><img src="images/任意" alt=""></div>
	<div><img src="images/任意" alt=""></div>
	<div><img src="images/任意" alt=""></div>
	<div><img src="images/任意" alt=""></div>
</div>
```

css

```css
/* スライダーここから */
.top-empty{
  /*透明の要素*/
  background-color: rgba(0,0,0,0);
  /* 重ねる範囲を指定 */
  width: 100vw;
  height: 100vh;
}

.bx-wrapper {
  position: fixed;
  z-index: -1;
  top: 0;
  background-color: transparent;
  margin: 0px auto 0px;
  border: none;
  box-shadow: none;
  width: 100vw;
  height: 100vh;
}
.bx-wrapper img {
  display: block;
  width: 100vw;
  height: 100vh;
  margin: 0px auto;
}
/* bsslider ページャーをスライダーの内側に収める */
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
  bottom: 20px;
}
/* スライダーここまで */
```

jQuery

```javascript
        $(".slider").bxSlider({
    auto: true,
    pause: 4000,
    speed: 2000,
  //一度に表示させる最大枚数
  maxSlides: 1,
  //タッチスワイプ許可設定
  touchEnabled: true,
  //タッチスワイプしたとみなす最低限の移動距離
  swipeThreshold: 10,
  //'full'はスライダーの数を黒点で、'short'はa/nで表示
  pagerType: 'full',
  // 画像の高さを自動調整
  adaptiveHeight: true,
  //コントロール表示
  controls: false,
  //スライドモード設定
  mode: 'fade',
  //スライド番号を表示する
  pager: false
});
```

#特定の要素を超えた時点でイベントを発生させるjQuery
ある位置まで画面をスクロールした場合、何かイベントを発生させることができる

```java
//特定の位置までスクロールしたら背景画像を差し替える
var thisOffset;
$(window).on('load',function(){
	thisOffset = $('#セレクタ').offset().top + $('#セレクタ').outerHeight();
});
 
$(window).scroll(function(){
	if( $(window).scrollTop() + $(window).height() > thisOffset){
		// 特定の要素を超えた場合のイベント
	} else {
		// 特定の要素を超えていないイベント
	}
});
```

参考：[特定の位置まで来たらイベントを実行](https://blog.teorico.jp/%E3%80%90jquery%E3%80%91%E7%89%B9%E5%AE%9A%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%BE%E3%81%A7%E6%9D%A5%E3%81%9F%E3%82%89%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C/)

解説：$('#セレクタ').offset().top ⇒ ページTOPから特定要素までの高さ

　　　$('#セレクタ').outerHeight() ⇒ 特製要素の持っている高さ

　　　thisOffset ⇒ 上記2つの高さの和

　　　$(window).scrollTop() ⇒ スクロールした数値(スクロールバーの位置)

　　　$(window).height() ⇒ 現在表示されている画面全体の高さ

　　　上記2つの和 > thisOffset のとき、イベント発動

#GoogleMapテンプレート
丁度良いサイズのマップ

html

```haml
<!-- グーグルマップ -->
<div class="gmap">
  <iframe>任意のマップ</iframe>
</div>
```
css

```css
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
```
#メールフォーム(Googleform)
googleformで作ったメールフォームをスライドで表示・非表示

```html
<p id="mailform">MAIL +</p>

<div class="googleform">			
	<iframe>googleformをブチ込んで</iframe>
</div>	
```

css

```css
.googleform{
	display: none;
	text-align: center;
}
.googleform iframe{
	max-width: 100%;
}
```

jquery

```javascript
$(function(){
	//メールフォームの出現
  $("#mailform").on("click",function() {
  $(".googleform").slideToggle();
	});							
				});
```

#インスタ情報の取得

html

```html
<script src="assets/script.js">
```
javascript

```javascript
/* instagram */

$(function () {

    try {

        // インスタのIDを入れようね

        this.name = "via_jpn";

        $.ajax('https://www.instagram.com/' + this.name + '/', {

            timeout: 2000,

            datatype: 'html'

        }).then(function (data) {

            json_string = data.split("window._sharedData = ")[1];

            json_string = json_string.split("};</script>")[0] + "}";

            this.Arrya_data = JSON.parse(json_string);

            let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;

            for (i in datas) {

                // 画像URL取得

                var url = datas[i].node.display_url;

                // テキスト取得

                var text = datas[i].node.edge_media_to_caption.edges[0].node.text;



                this.html = `

                <div class="cardImgWrp p-3">

                <img src="${url}">

                <p>${text}</p>

                </div>

                `;

                $(".insta-card").append(this.html);

            }

        });

    } catch (error) {

        alert(error);

    }

})
```

#インスタ情報を取得してスライド表示にする
bootstrapのカルーセルを使う(動作が非常に軽いため)
bootstrapのスタートアップは済んでいるものとする。

```html
	<div id="carouselExampleControls" class="carousel slide contents" data-ride="carousel">

							<div class="carousel-inner insta-card"></div>

							<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
```

```css

/* インスタスライダーここから */
.clr-news{
  background-color: #ffdee6;
}
#toziru{
  display: none;
}
.sinchaku-item{
  height: 70vh;
  position: relative;
}
.sinchaku-item img{
  height: 50%;
}
.sinchaku-item .carousel-caption{
  height: 40%;
  overflow: scroll;
    position: absolute;
  transform: translateX(-50%); 
  bottom: 0;
  left: 50%;
}
/* インスタスライダーここまで */
```

```javascript
      // instagram
      $(function () {
        try {
        // インスタのIDを入れようね
        this.name = "via_jpn";
        $.ajax('https://www.instagram.com/' + this.name + '/', {
          timeout: 2000,
          datatype: 'html'
        }).then(function (data) {
          json_string = data.split("window._sharedData = ")[1];
          json_string = json_string.split("};</script>")[0] + "}";
          this.Arrya_data = JSON.parse(json_string);
          let datas = this.Arrya_data.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;

          for (i in datas) {
                // 画像URL取得
                var url = datas[i].node.display_url;

                // テキスト取得
                var text = datas[i].node.edge_media_to_caption.edges[0].node.text;

                this.html = `
                <div class="carousel-item sinchaku-item">
                <img class="d-block w-100" src="${url}" alt="First slide">
                <div class="carousel-caption d-md-block w-100">
                <p class="clr-black">${text}</p>
                </div>
                </div>
                `;
                
                $(".insta-card").append(this.html);
              }
            });
      } catch (error) {
        alert(error);
      }
    });

//マウスが動いたらインスタスライダーをアクティブに！
$(window).one('scroll',function(){
  $(".carousel-item:first-of-type").addClass("active");
});
```


#inviewJSを使って動きのあるWEBサイトにする
特定の要素がウィンドウに表示されたらイベント発動
ソースコードを以下リンクよりいただきました
参考：[inviewJS](https://github.com/protonet/jquery.inview)
jquery.inview.min.jsをHTMLの任意の場所で読み込むことでinviewが使用可能

jQuery

```javascript
$(function(){
$('#セレクタ').on('inview', function() {
           //ブラウザの表示域に特定要素が来たときの処理
    });
});
```

#コンテンツをスライド表示する
画面をスクロールすると、特定の位置に来た時にコンテンツが浮かび上がる表示を実現する
・inviewJSを使用し、特定の位置に来た時に動きを発動させる
・cssで非表示状態から表示させる

```html
<div class="main">
  	<div class="a"></div>
  	<div class="b">
  		<img src="images/pic1.jpg" alt="">
  		<img src="images/pic1.jpg" alt="">
  		<img src="images/pic1.jpg" alt="">
  		<img src="images/pic1.jpg" alt="">
  		<img src="images/pic1.jpg" alt="">
  		<img src="images/pic1.jpg" alt="">
  	</div>
</div>
```

```css
.a{
	width: 100%;
	height: 100vh;
}

/* 要素を隠しておく */
.b img{
  margin-top: 100px;
  opacity: 0;
  /* アニメーションの時間 */
  transition: 1.2s;
}

/* 要素の登場 */
.showUp {
  opacity: 1 !important;
  margin-top: 0 !important;
}
```

```javascript
$(function(){
//特定要素の位置まで画面がスクロールされたら
$('.b img').on('inview', function() {
         //ブラウザの表示域に表示されたときに実行する処理
         if($(this).css("opacity") == "0"){
         //if条件がないと、何度でもスライド表示を繰り返してしまう
           $(this).toggleClass('showUp');
         }
       });
});
```


#要素をゆっくりスライドして表示させる
toggleClassを使用して時間差で表示させる

html

```html
<div class="youkoso"><p>sample</p></div>
```
css

```css
.youkoso{
  margin-top: 100px;
  opacity: 0;
  transition: 1.5s;
}
.showUp {
  opacity: 1;
  margin-top: 0;
}
```
jQuery

```javascript
$('.youkoso').toggleClass('showUp');
```

#ローディング画面の作成

html

```html
<!-- ローディングメーターの生成 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />

<!-- ローディング画面の生成 -->
<div id="loading-window"></div>
```

css

```css
/*ローディング画面ここから*/
#loading-window{
  background-color: #fbbdcc;　/* 任意の色 */
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 999;
}
/*ローディング画面ここまで*/
```

jQuery

```javascript
//ローディングが終わってからサイトを表示
  Pace.on('done', function(){
    $("#loading-window").fadeOut();
  });
```

参考：[10秒でできるローディング画面](https://pecopla.net/web-column/loading)