jQuery 仮サイト作成のbase　（自分用）

##jQueryにて仮サイトを作成する①##
ベースまでで今後好きに改良する

-  スライドショー:今回はHTML枠組みのみまで。
（自動、手動、プラグイン有無を好きに選ぶ為）
- CSS：jQuery反映が分かる最低限のみ
- GoogleMap API取得済みから


![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547910/6cfc5b56-459c-1ffc-2e5f-b0577820fe4b.gif)


```index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>仮サイトをJQueryで作成</title>
  <link rel="stylesheet" href="css/styles.css">
  <!-- icon -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="jquery.js"></script>
  <!-- map -->
  <script src="https://maps.googleapis.com/maps/api/js?key=自分のAPIを実際は入力している"></script>
  <script src="map.js"></script>

</head>

<body>
  <header>
    <div class="header-info" id="site-info">このサイトについて(modal)</div>
    <div class="header-info" id="shop-info">店舗情報(modal)</div>
  </header>

  <!-- header,サイトについてmodal -->
  <div class="header-modal-info" id="info-modal">
    <div class="modal">
      <div class="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
      <p>このサイトはJQueryを使用した<br>デモサイトです<br>サイト内、架空の情報です</p>
    </div>
  </div>

  <!-- header,店舗情報modal -->
  <div class="header-modal-shop" id="shop-modal">
    <div class="modal">
      <div class="close-modal">
        <i class="fa fa-2x fa-times"></i>
      </div>
      <div id="shop">店舗情報</div>
      <h2>店舗名</h2>
      <h3>所在地</h3>
      <P>営業時間</P>
      <p>定休日</p>
    </div>
  </div>


<!-- メイン内容 -->
  <div class="main-container">
    <h1 class="main-title">今回はJQueryで仮サイトを作成します。</h1>
    <p class="main-text">
      今回はJQueryで仮サイトを作成します。<br>GoogleMapのAPIも使用
    </p>
  </div>

<!-- スライドショー -->
  <div class="slick">
    <p>以下、画像でスライドショーを作成する</p>
    <div class="single">
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
    </div>
  </div>

<!-- hoverアクション -->
  <div class="menu">
    <div><img src="" alt=""></div>
    <h3>ここをホバーで</h3>
    <p class="hover-text">
      ホバーが表示
    </p>
  </div>
  <div class="menu">
    <div><img src="" alt=""></div>
    <h3>ここをホバーで</h3>
    <p class="hover-text">
      ホバーが表示
    </p>
  </div>
  <div class="menu">
    <div><img src="" alt=""></div>
    <h3>ここをホバーで</h3>
    <p class="hover-text">
      ホバーが表示
    </p>
  </div>
  <div class="menu">
    <div><img src="" alt=""></div>
    <h3>ここをホバーで</h3>
    <p class="hover-text">
      ホバーが表示
    </p>
  </div>

  <!-- map -->
  <div class="map">
    <p>GoogleMap<span class="fas fa-map-marker-alt"></span></p>
    <div id="map"></div>
  </div>

  <!-- SNS関係 -->
  <div class="fab">
    <!-- <a href="" target="_blank"> -->
    <span class="fab fa-facebook"></span>
    <span class="fab fa-instagram"></span>
    <span class="fab fa-twitter"></span>
    <!-- </a> -->
  </div>

  <footer>
    <p>COMPANY</p>
    <p>Address</p>
    <p>Blog</p>
    <p>Contact Us</p>
    <p>Copyright © 0000 ooooo Inc. All Rights Reserved.</p>
  </footer>

</body>
</html>
```



```jquery.js
$(function(){
  $('#site-info').click(function() {
   $('#info-modal').fadeIn();
  });
   $('.close-modal').click(function() {
   $('#info-modal').fadeOut();
  });
 
 
  $('#shop-info').click(function() {
   $('#shop-modal').fadeIn();
  });
   $('.close-modal').click(function() {
   $('#shop-modal').fadeOut();
  });
 
  
   $('.menu').hover(
     function() {
     //hoverの第一引数としてfadeIn
      $(this).find('.hover-text').addClass('hover-text-active');
     },
     //hoverの第二引数としてfadeOut
     function() {
       $(this).find('.hover-text').removeClass('hover-text-active');
     },
   );
 
 
 });
```

```styles.css
body {
  margin: 0;
  padding: 0;
  font-size:100%;
}

.header-modal-info {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00000099;
  z-index: 10;
  /* display: none; */
  /* デモサイトの為、ロード時表示にする */
}

.header-modal-shop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #00000099;
  z-index: 10;
  display: none;
}

.modal {
  position: absolute;
  top: 20%;
  left: 34%;
  background-color: #e6ecf0;
  padding: 20px 0 40px;
  border-radius: 10px;
  width: 450px;
  height: auto;
  text-align: center;
}

.fa-times {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #1f0eddb4;
  cursor: pointer;
}


.hover-text {
  display: none;
}

.hover-text-active {
  display: block;
}


/* googlemap */
#map {
  width: 600px;
  height: 400px;
}
```


```map.js
function makeMap(lat, lng) {    
  var canvas = document.getElementById('map');       //HTMLフォルダの

  var latlng = new google.maps.LatLng(lat, lng);   //（緯度、経度）

  var mapOptions = {  
      zoom: 17,
      center: latlng,
  };
  var map = new google.maps.Map(canvas, mapOptions); 
  return map;
}


window.onload = function(){
    makeMap(48.8622751,2.2679159);  //取得したい座標 googleMapで検索し、@の後
};
```


#参考サイト#
[Google Maps JavaScript APIで地図が表示されないとき、原因だったこと](http://bashalog.c-brains.jp/17/08/25-200000.php)

[Jquery Googleマップ](https://tilotiti.github.io/jQuery-Google-Map/)