Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@grca3

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

More than 1 year has passed since last update.

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マップ

2
Help us understand the problem. What is going on with this article?
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
grca3
自分の記録用がメインです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?