Help us understand the problem. What is going on with this article?

jQuery 仮サイト作成のbase (自分用)

jQueryにて仮サイトを作成する①

ベースまでで今後好きに改良する

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

ezgif.com-video-to-gif.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で地図が表示されないとき、原因だったこと

Jquery Googleマップ

grca3
自分の記録用がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした