【コピペOK】どんなウィンドウサイズにも最下部にメニューがフィット！◇コーディングテク【デモあり】

今日はLPを想定して、レスポンシブ対応で、

『画面いっぱいのKV（キービジュアル）とウィンドウ下部のメニュー』

のコーディングをやっていきたいと思います。

今日やりたいこと。

See the Pen
LP大きいKVとスティッキーメニュー by studio-0 (@studio-0)
on CodePen.

①大きいKV（キービジュアル）＋メニュー（グロナビ）のデザイン

スマホサイズ

タブレットサイズ

PCサイズ

このデザインでコーディングしていきます。

②初期値はメニュー（グロナビ）は画面の最下部。背景固定。

画面の最下部に固定するjs

style=”height:724px;”と自動でウィンドウの高さを書き出してくれます。

$(function(){

$(window).resize(function(){
$('.visual_wrapper').outerHeight($(window).height());
}).trigger('resize');

});

.visual_wrapperは

画面の最下部に固定するcss

.visual_wrapperはposition: relative;

.visual_wrapperは上のjsで高さが出てるので、

その値を基準として#navの場所が決まる。

#nav{
width: 100%;
left: 0;
bottom: 0;
height: 62px;
position: absolute;
z-index: 99;
background-color: #fff;
}

bottom:0;

下部に固定。

jsなくても大丈夫かも

.visual_wrapper {

margin-bottom: 80px;
padding: 3.1% 0 3.28%;
height: 100vh;
position: relative;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}

<div class="bg--fix" style=""></div>

<div id="container">
  <section id="main">

.bg--fix {
position: fixed;
width: 100%;
height: 100%;
background: url(https://studio-0.com/blog/wp-content/uploads/2020/04/visual_bg.jpg) no-repeat top center;
background-size: cover;
opacity: 0;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s; 
}
.bg--fix.on {
opacity: 1; 
}

$(function(){
$('.bg--fix').addClass('on');
setTimeout(function(){
$('.visual_wrapper').addClass('on');
},300);

③KVは順番に出てくる。左上→右側→左下→中央

左上からの画像

.visual_wrapper .visual__img {
position: absolute;
top: 0;
left: 18.55%;
height: 31.6%;
opacity: 0;
-webkit-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
transition: all ease 0.7s; }

0.7秒かけて変化します。

右側からの画像

.visual_wrapper .visual__img.visual__img02 {
top: auto;
left: auto;
right: 5.3%;
bottom: 63px;
width: auto;
height: 89.42%;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
transition-delay: 0.3s; }

0.3秒遅く始めます。

右下からの画像

.visual_wrapper .visual__img.visual__img03 {
top: auto;
left: 0;
height: 80%;
bottom: 7.7%;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s; }

0.6秒遅く始めます。

中央からの画像

.visual_wrapper .visual_wrapper__img {
width: auto;
height: 75.8%;
opacity: 0;
-webkit-transition: all ease 0.3s 0.9s;
-o-transition: all ease 0.3s 0.9s;
transition: all ease 0.3s 0.9s;
position: relative;
z-index: 2; }

0.9秒遅く始めて0.3秒かけて変化します。

フェイドインする仕掛け

.visual_wrapper.on .visual__img {
opacity: 1; }

onクラスが付いています。

これがあることによってアニメーションが起こります。

onクラスを付けるjs

//KV背景の表示
$(function(){
$('.bg--fix').addClass('on');
setTimeout(function(){
$('.visual_wrapper').addClass('on');
},300);

});

④KVはスマホ、タブレット、PCでどれでもバランス良く見えるように場所を調整。

PC

1281px以上でPC表示

.visual_wrapper .visual__img {

position: absolute;
top: 0;
left: 18.55%;
height: 31.6%;
opacity: 0;
-webkit-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
transition: all ease 0.7s;

}

タブレット

768px以上、1280px以下でタブレット表示

@media (max-width: 1280px) and (min-width: 768px){

.visual_wrapper .visual__img {
left: -11.1%;
width: auto;
max-height: 606px;
height: 88.72%;
top: -6.5%;
}
}

@media screen and (max-width: 767px){
.visual_wrapper .visual__img {
left: 0;
width: 31.8%;
height: auto;
max-width: inherit;
}}

⑤メニュー（グロナビ）はスクロールしてウィンドウ上部にきたら、上部に固定される。

JavaScript

//PCのgnavi
$(window).scroll(function () {
var winH = $(window).innerHeight();
var h;
if ($(window).width() > 767) {
h = winH - 70;
} else {
h = winH - 49;
}
if ($(window).scrollTop() > h) {
$('#nav').addClass('fixed');
} else {
$('#nav').removeClass('fixed');
}

}).trigger('scroll');

fixedクラスを追加してます。

CSS

#nav {
width: 100%;
left: 0;
bottom: 0;
height: 62px;
position: absolute;
z-index: 99;
background-color: #fff; 
}
#nav.fixed {
position: fixed;
left: 0;
top: 0;
bottom: auto; 
}

z-index: 99;で一番上になるようにしています。

⑥スマホでは右上にハンバーガーボタン

spクラスでスマホの時のみ表示するように設定

<div class="menu sp" id="toggle"><i class="fas fa-bars"></i></div>

⑦上から下りてくるドロワーメニュー

HTML

<div class="menu__box">
<div class="menu__inner">
<div class="close"><i class="fas fa-times"></i></div>
<div class="logo"><a href="#" target="_blank"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/menu_logo.png" width="82" alt="shinsei"></a></div>
<ul>
<li><a href="#a01">商品の特徴</a></li>
<li><a href="#a02">おすすめ商品</a></li>
<li><a href="#">商品のご紹介</a></li>
</ul>
<div class="menu__btn"><a href="#" target="_blank"><i class="fas fa-shopping-cart"></i>オンラインショップ</a></div>
</div>
</div>

JavaScript

//スマホのgnavi
var state = false;
var scrollpos;
$('.menu').on('click', function () {
if (state == false) {
scrollpos = $(window).scrollTop();
$('body').addClass('fixed').css({
'top': -scrollpos
});
$('.menu__box').stop().slideToggle();
$('.menu').toggleClass('on');
state = true;
} else {
$('body').removeClass('fixed').css({
'top': 0
});
window.scrollTo(0, scrollpos);
$('.menu__box').stop().slideToggle();
$('.menu').toggleClass('on');
state = false;
}
return false;
});
//メニューリンクかクローズボタンがクリックされたら、ドロワーメニューを非表示
$('.menu__box .menu__inner ul li a,.menu__box .menu__inner .close').click(function () {
$('body').removeClass('fixed').css({
'top': 0
});
window.scrollTo(0, scrollpos);
$('.menu__box').stop().slideToggle();
state = false;
return false;
});

⑧スマホは『購入するボタン』を下部に常に表示。『pagetopへボタン』

は⑨のPCと同じ。

HTML

<footer id="footer">
<div class="btn--fix sp"><a href="#" target="blank"><i class="fas fa-shopping-cart"></i>購入する</a></div>
<p class="copyright">Copyright (c) Studio-０ All Rights Reserved.</p>
</footer>

<div class=”btn–fix sp”>でスマホだけに表示させている。

CSS

#footer {
padding: 31px 0;
font-size: 1.8rem;
color: #00D1CD;
font-weight: 500;
text-align: center; 
}
#footer .btn--fix {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
z-index: 30;
padding: 19px 10px 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff; 
}
#footer .btn--fix a {
padding: 7px 7px 6px;
width: 262px;
color: #fff;
font-size: 1.8rem;
display: inline-block;
background-color: #00D1CD;
border-radius: 30px;
font-size: 1.8rem;
padding: 5px;
font-weight: bold;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 0 20px rgba(0, 209, 205, 0.4);
box-shadow: 0 0 20px rgba(0, 209, 205, 0.4); 
}
#footer .btn--fix a i {
margin-right: 19px; 
}
@media screen and (max-width: 767px) {
#footer {
padding: 15px 0 80px;
font-size: 1.4rem; 
} }

⑨PCでは『購入するボタン』『pagetopへボタン』は少しスクロールしたら表示。

300px以上スクロールしたら表示されます。

HTML

<ul class="page__ul">
    <li class="pc"><a href="#" target="blank"><i class="fas fa-shopping-cart"></i>購入する</a></li>
    <li><a href="#container" class="page__top"><i class="fas fa-chevron-up"></i>PAGE<br>
      TOP</a></li>
  </ul>

<li class=”pc”>でPCでのみ表示させている。

JavaScript

//ページトップへ
$(window).scroll(function () {
if ($(window).scrollTop() > 300) {
$('.page__ul').fadeIn();
} else {
$('.page__ul').fadeOut();
}
});

⑩スムーススクロール（アニメーション）で戻る。

これは定番のjsです。とっても便利です。

//page-scroller
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});

（11）文字サイズの設定

html {
font-size: 62.5%;
}

基準フォントサイズを10pxに設定しています。

PC

body {
font-size: 2rem;
}

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

20pxになります。

タブレット

@media all and (min-width: 768px) and (max-width: 1280px) {
body {
font-size: 1.6rem;
}
}

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

16pxになります。

スマホ

@media screen and (max-width: 767px) { 
body { 
font-size: 1.5rem; 
} 
}

「rem」 は常にhtml 要素のフォントサイズを基準にするので、

15pxになります。

（14）重なり順：z-indexの設定

#nav（PCのグローバルナビ）

z-index: 99;

.visual_wrapper h1（中央画像）

z-index: 2;

#footer .btn–fix（スマホの『購入する』ボタン）

z-index: 30;

.page__ul（ページトップへ）

z-index: 35;

.menu__box（スマホのグローバルナビ）

z-index: 98;

.menu__box .menu__inner .close（スマホのクローズボタン）

z-index: 100;

.menu

z-index: 30;

完成！

キレイなファーストビューが出来上がりました！

See the Pen
LP大きいKVとスティッキーメニュー by studio-0 (@studio-0)
on CodePen.