jQueryにて仮サイトを作成する①
ベースまでで今後好きに改良する
- スライドショー:今回はHTML枠組みのみまで。 （自動、手動、プラグイン有無を好きに選ぶ為）
- CSS：jQuery反映が分かる最低限のみ
- GoogleMap API取得済みから
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で検索し、@の後
};