※サイト模写用に作成したページの解説です。
※使用画像はフリー素材からダウンロードしています。
※下記、模写サイトへボタンから該当のサイトへGo!!
MEMO
1.body
- 最大幅1200px
- 左右の余白は2%、スマホの際は4%
- ページ内メインカラーを#09023a
- jsで、ページ内スムーススクロール実装
- 游ゴシック指定
2.ヘッダー
- ハンバーガーメニューにし、上に固定
- 左上のロゴはスクロール位置が520pxを超えたら表示するようjsとcssで指定
3.メインビジュアル
- 3つの画像を横幅いっぱいに表示
- スクロールしたら画像が大きくなるようjsとcssで指定
- スマホの際はスクロールしたら画像が小さくなるようjsとcssで指定
4.商品の種類
- 画像とテキストを横並び表示、スマホの際の表は縦表
- 動画はガジェットの下に来るようpositionで調節
5.選ばれる理由
- 背景を斜めに指定
- 背景はjsのinviewで左から右にスライドさせ表示
- テキストを横並び表示、スマホの際の表は縦表
6.購入者の声
- テキストを2つずつ横並び表示、スマホの際の表は縦表
7.サポート
- 背景は横幅いっぱい画像を配置
- ボタン上部分はテキストを縦表
- ボタン下部分はテキストを横並び表示、スマホの際の表は縦表
8.フッター
- テキストを横並び表示、スマホの際の表は縦表
9.レスポンシブ
- ブレークポイントは767px
10.その他
- jsのinviewをテキストや画像に設置し要素が見えたらクラスを追加して変化させる
- 【css例】 .inview-txt { opacity: 0; transform: scale(0.1); transition: 1s .4s; } .inview-txt.appear { opacity: 1; transform: scale(1); } ※inview-txtが見えたらappearクラスを追加し変化させる
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gadget｜サイト模写</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.inview.js"></script>
<script src="script.js" defer></script>
</head>
<body ontouchstart="">
<header id="header">
<h1 class="logo"><img src="img/logo.png" alt=""></h1>
<div class="ham">
<span></span>
<span></span>
</div>
<nav>
<ul>
<li><a href="#type" class="link">商品の種類</a></li>
<li><a href="#reason" class="link">選ばれる理由</a></li>
<li><a href="#voice" class="link">購入者の声</a></li>
<li><a href="#support" class="link">充実のサポート</a></li>
</ul>
<a class="navBtn link" href="#contact">お問合せ</a>
</nav>
<div class="mask"></div>
</header>
<main class="gadget-main">
<div id="mainvisual">
<div class="img">
<img src="img/m01.jpg" alt="">
<img src="img/m02.jpg" alt="">
<img src="img/m03.jpg" alt="">
</div>
</div>
<section id="type">
<h2 class="site-title inview-up">
<span class="en">Gadget type</span>
<span class="ja">商品の種類</span>
</h2>
<div class="wrapper">
<div class="box">
<div class="img inview-right">
<img src="img/sp.png" alt="">
<video src="img/mov01.mov" loop autoplay muted playsinline></video>
</div>
<div class="txt inview-left">
<h3>Smartphone</h3>
<p>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="read-more"><span>read more</a>
</div>
</div>
<div class="box">
<div class="img inview-right">
<img src="img/tb.png" alt="">
<video src="img/mov02.mov" loop autoplay muted playsinline></video>
</div>
<div class="txt inview-left">
<h3>Tablet</h3>
<p>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="read-more"><span>read more</a>
</div>
</div>
<div class="box">
<div class="img inview-right">
<img src="img/pc.png" alt="">
<video src="img/mov03.mov" loop autoplay muted playsinline></video>
</div>
<div class="txt inview-left">
<h3>Laptop</h3>
<p>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="read-more"><span>read more</a>
</div>
</div>
</div>
</section>
<section id="reason">
<h2 class="site-title inview-up">
<span class="en">Reason</span>
<span class="ja">選ばれる理由</span>
</h2>
<div class="wrapper">
<div class="box inview-txt">
<div class="title">
<span class="en">point</span>
<span class="num">.01</span>
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-txt">
<div class="title">
<span class="en">point</span>
<span class="num">.02</span>
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-txt">
<div class="title">
<span class="en">point</span>
<span class="num">.03</span>
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
</div>
</section>
<section id="voice" class="wrapper">
<h2 class="site-title inview-up">
<span class="en">Voice</span>
<span class="ja">購入者の声</span>
</h2>
<div class="wrapper">
<div class="box inview-left">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-right">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-right">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-left">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-left">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
<div class="box inview-right">
<div class="name">
<span>TEXT</span>さん
</div>
<p>
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
テキストテキストテキストテキスト
</p>
</div>
</div>
</section>
<section id="support" class="support-bg">
<h2 class="site-title inview-up">
<span class="en">Support</span>
<span class="ja">サポート</span>
</h2>
<div class="wrapper">
<div class="en-txt inview-txt">
<p class="main">TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
<p class="sub">TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT
</p>
</div>
<a href="#" class="inview-up read-more"><span>read more</a>
</div>
<div class="sup-b-wrap wrapper">
<div class="box inview-txt">
<div class="img">
<img src="img/icon01.png" alt="">
<div class="bo-txt">
テキストテキスト
</div>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
<div class="box inview-txt">
<div class="img">
<img src="img/icon02.png" alt="">
<div class="bo-txt">
テキストテキスト
</div>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
<div class="box inview-txt">
<div class="img">
<img src="img/icon03.png" alt="">
<div class="bo-txt">
テキストテキスト
</div>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</section>
</main>
<footer>
<h1 class="logo"><img src="img/logo.png" alt=""></h1>
<div class="source wrapper">
<a href="index02.html#memo">MEMO</a>
<a href="index02.html#html">HTML</a>
<a href="index02.html#css">CSS</a>
</div>
<div class="wrapper">
<div class="footWrap">
<p>商品カテゴリ</p>
<ul>
<li><a href="#">smartphone</a></li>
<li><a href="#">tablet</a></li>
<li><a href="#">laptop</a></li>
</ul>
</div>
<div class="footWrap">
<p>取り扱い店舗紹介</p>
<ul>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
</ul>
</div>
<div class="footWrap">
<p>会社情報</p>
<ul>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
</ul>
</div>
<div class="footWrap">
<p>製品について</p>
<ul>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#">テキストテキスト</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</div>
</div>
<p class="copy">© Gadget</p>
</footer>
</body>
</html>
css
@charset "UTF-8";
html {
font-size: 100%;
}
body {
color: #333;
line-height: 1.6;
letter-spacing: 1.2px;
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
font-weight: 500;
}
*, *::before, *::after {
box-sizing: border-box;
}
img {
max-width: 100%;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
text-align: center;
padding: 0 2%;
}
.site-title {
margin-bottom: 60px;
}
.site-title .en {
display: block;
font-weight: bold;
font-size: 50px;
}
.site-title .ja {
display: block;
font-weight: normal;
font-size: 20px;
}
.inview-txt {
opacity: 0;
transform: scale(0.1);
transition: 1s .4s;
}
.inview-txt.appear {
opacity: 1;
transform: scale(1);
}
.inview-left {
opacity: 0;
transform: translateX(-50%);
transition: 1s .4s;
}
.inview-left.appear {
opacity: 1;
transform: scale(1);
}
.inview-right {
opacity: 0;
transform: translateX(50%);
transition: 1s .4s;
}
.inview-right.appear {
opacity: 1;
transform: scale(1);
}
.inview-up {
opacity: 0;
transform: translatey(100px);
transition: .6s .4s;
}
.inview-up.appear {
opacity: 1;
transform: scale(1);
}
a {
text-decoration: none;
}
.read-more {
text-align: center;
display: block;
overflow: hidden;
width: 300px;
padding: 0.5rem 6rem;
color: #fff;
border-radius: 0;
background: #333;
position: relative;
}
.read-more span {
position: relative;
}
.read-more::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
transition: all .5s ease-in-out;
transform: translateX(-96%);
background: #09023a;
}
.read-more:hover::before, .read-more:active::before {
transform: translateX(0);
}
.read-more:hover, .read-more:active {
color: #fff;
}
header {
width: 100%;
margin: 0;
}
header .logo {
position: fixed;
top: 0;
left: 0;
width: 180px;
z-index: 5;
}
header .logo img {
width: 100%;
}
header .ham {
position: fixed;
top: 0;
right: 0;
width: 80px;
height: 80px;
background-color: #fff;
z-index: 50;
}
header .ham span {
display: block;
background-color: #09023a;
height: 3px;
width: 50px;
position: absolute;
transition: .6s;
}
header .ham span:nth-child(1) {
position: absolute;
top: 32px;
left: 10px;
}
header .ham span:nth-child(2) {
bottom: 32px;
right: 10px;
}
header nav {
display: none;
opacity: 0;
position: fixed;
top: 100px;
left: 0;
right: 0;
width: 300px;
margin: 0 auto;
text-align: center;
transition: all .6s;
z-index: 40;
}
header nav ul {
margin-bottom: 30px;
}
header nav ul li {
margin-bottom: 20px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
display: inline-block;
}
header .mask {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
transition: .6s;
background-color: #09023a;
opacity: 0.9;
z-index: 30;
}
header.open .ham {
background-color: #fff;
}
header.open .ham span {
background-color: #09023a;
}
header.open .ham span:nth-child(1) {
transform: translateX(5px) translateY(7px) rotate(45deg);
}
header.open .ham span:nth-child(2) {
transform: translateX(-5px) translateY(-7px) rotate(-45deg);
}
header.open nav {
display: block;
opacity: 1;
}
header.open nav ul li a {
color: #fff;
display: block;
}
header.open nav .navBtn {
display: block;
width: 300px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px solid #fff;
margin: 0 auto;
position: relative;
transition: .6s;
}
header.open nav .navBtn:hover, header.open nav .navBtn:active {
background-color: #fff;
color: #09023a;
}
header.open nav .navBtn::after {
content: '';
display: block;
width: 300px;
height: 70px;
position: absolute;
bottom: -6px;
right: -6px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
header.open .mask {
display: block;
}
.gadget-main {
text-align: center;
overflow: hidden;
}
.gadget-main #mainvisual .img {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.gadget-main #mainvisual .img img {
width: calc(100% / 3);
height: 100vh;
object-fit: cover;
}
.gadget-main #type {
padding: 100px 0 40px;
margin-bottom: 120px;
}
.gadget-main #type .box {
display: flex;
text-align: left;
margin-bottom: 160px;
}
.gadget-main #type .box:nth-child(1) .img img {
width: 190px;
}
.gadget-main #type .box:nth-child(1) .img video {
position: absolute;
top: 10px;
left: 10px;
width: 170px;
height: 370px;
object-fit: cover;
z-index: -1;
}
.gadget-main #type .box:nth-child(2) {
flex-direction: row-reverse;
}
.gadget-main #type .box:nth-child(2) .img img {
width: 300px;
}
.gadget-main #type .box:nth-child(2) .img video {
position: absolute;
top: 10px;
left: 10px;
width: 280px;
height: 380px;
object-fit: cover;
z-index: -1;
}
.gadget-main #type .box:nth-child(3) .img img {
width: 500px;
}
.gadget-main #type .box:nth-child(3) .img video {
position: absolute;
top: 10px;
left: 50px;
width: 400px;
height: 280px;
object-fit: cover;
z-index: -1;
}
.gadget-main #type .box .img {
position: relative;
margin: 0 auto;
}
.gadget-main #type .box .img::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 500px;
height: 500px;
background-color: #09023a;
border-radius: 50%;
z-index: -2;
}
.gadget-main #type .box .txt {
width: 44%;
margin-left: 6%;
}
.gadget-main #type .box .txt h3 {
font-weight: bold;
font-size: 30px;
margin-bottom: 60px;
}
.gadget-main #type .box .txt p {
margin-bottom: 60px;
}
.gadget-main #reason {
color: #fff;
position: relative;
padding-top: 160px;
margin-bottom: 300px;
}
.gadget-main #reason.bg-inview::after {
transform: skewY(-7deg) translateY(90px) translateX(0);
}
.gadget-main #reason::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-color: #09023a;
transition: .6s .6s;
transform: skewY(-7deg) translateY(90px) translateX(-100%);
z-index: -1;
}
.gadget-main #reason .wrapper {
display: flex;
justify-content: space-between;
text-align: left;
}
.gadget-main #reason .wrapper .box {
margin: 0 2%;
}
.gadget-main #reason .wrapper .box:nth-child(1) {
margin-top: 50px;
}
.gadget-main #reason .wrapper .box:nth-child(3) {
margin-top: -50px;
}
.gadget-main #reason .wrapper .box .title .en {
font-size: 30px;
}
.gadget-main #reason .wrapper .box .title .num {
font-size: 50px;
font-weight: bold;
}
.gadget-main #voice {
margin-bottom: 120px;
}
.gadget-main #voice .wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gadget-main #voice .wrapper .box {
width: 45%;
margin: 0 2%;
background-color: #09023a;
color: #fff;
margin-bottom: 30px;
border-radius: 20px;
padding: 3%;
text-align: left;
}
.gadget-main #voice .wrapper .box .name {
border-bottom: 1px solid #fff;
margin-bottom: 10px;
}
.gadget-main #voice .wrapper .box .name span {
font-weight: bold;
font-size: 20px;
}
.gadget-main #support {
padding: 100px 0;
background-image: url(img/bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
opacity: 0;
transition: 1s;
}
.gadget-main #support.support-bg.appear {
opacity: 1;
}
.gadget-main #support .en-txt {
margin: 0 auto 30px;
word-wrap: break-word;
}
.gadget-main #support .en-txt .sub {
font-size: 1rem;
}
.gadget-main #support .en-txt .main {
font-weight: bold;
font-size: 1.2rem;
display: block;
margin-bottom: 30px;
}
.gadget-main #support a {
margin: 0 auto 60px;
border: 1px solid #fff;
background: none;
}
.gadget-main #support .sup-b-wrap {
display: flex;
justify-content: space-between;
}
.gadget-main #support .sup-b-wrap .box {
width: 30%;
}
.gadget-main #support .sup-b-wrap .box .img .bo-txt {
margin-top: 30px;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 20px;
}
.gadget-main #support .sup-b-wrap .box .img p {
text-align: left;
}
footer {
padding: 100px 0 10px;
background-color: #09023a;
color: #fff;
}
footer .source {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
footer .source a {
font-size: 0.8rem;
padding: 10px 30px;
border: 1px solid #fff;
color: #fff;
margin: 0 2px;
}
footer .logo {
margin-bottom: 60px;
text-align: center;
}
footer .logo img {
border: 1px solid #fff;
}
footer .wrapper {
display: flex;
}
footer .wrapper .footWrap {
width: 25%;
text-align: left;
}
footer .wrapper .footWrap p {
font-weight: bold;
margin-bottom: 10px;
}
footer .wrapper .footWrap ul {
margin-bottom: 30px;
}
footer a {
color: #fff;
}
footer .copy {
text-align: center;
font-size: 0.7rem;
}
@media screen and (max-width: 767px) {
.wrapper {
width: 100%;
padding: 0 4%;
}
.site-title .en {
font-size: 30px;
}
.site-title .ja {
font-size: 16px;
}
.read-more {
width: 100%;
}
.gadget-main {
text-align: center;
}
.gadget-main #type {
margin-bottom: 60px;
}
.gadget-main #type .box {
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 100px;
}
.gadget-main #type .box:nth-child(1) .img img {
width: 190px;
}
.gadget-main #type .box:nth-child(1) .img video {
position: absolute;
top: 10px;
left: 10px;
width: 170px;
height: 370px;
object-fit: cover;
z-index: -1;
}
.gadget-main #type .box:nth-child(2) {
flex-direction: row-reverse;
}
.gadget-main #type .box:nth-child(2) .img img {
width: 260px;
}
.gadget-main #type .box:nth-child(2) .img video {
left: 10px;
width: 230px;
height: 330px;
}
.gadget-main #type .box:nth-child(3) {
margin-bottom: 0;
}
.gadget-main #type .box:nth-child(3) .img img {
width: 320px;
}
.gadget-main #type .box:nth-child(3) .img video {
left: 40px;
width: 240px;
height: 170px;
}
.gadget-main #type .box .img::after {
width: 300px;
height: 300px;
}
.gadget-main #type .box .txt {
margin-left: 0;
margin-top: 60px;
width: 100%;
}
.gadget-main #type .box .txt h3 {
font-size: 20px;
margin-bottom: 30px;
}
.gadget-main #type .box .txt p {
font-size: 1rem;
}
.gadget-main #type .box .txt a {
color: #fff;
}
.gadget-main #reason {
margin-bottom: 200px;
}
.gadget-main #reason .wrapper {
flex-direction: column;
}
.gadget-main #reason .wrapper .box {
width: 100%;
}
.gadget-main #reason .wrapper .box:nth-child(1) {
margin-top: 0;
}
.gadget-main #reason .wrapper .box:nth-child(3) {
margin-top: 0;
}
.gadget-main #reason .wrapper .box .title .en {
font-size: 20px;
}
.gadget-main #reason .wrapper .box .title .num {
font-size: 40px;
font-weight: bold;
}
.gadget-main #voice .wrapper {
flex-direction: column;
}
.gadget-main #voice .wrapper .box {
width: 100%;
margin: 0 auto 30px;
padding: 4%;
}
.gadget-main #support .en-txt {
margin-bottom: 30px;
}
.gadget-main #support .en-txt span {
font-weight: bold;
font-size: 1.2rem;
}
.gadget-main #support .sup-b-wrap {
flex-direction: column;
}
.gadget-main #support .sup-b-wrap .box {
width: 100%;
margin-bottom: 60px;
}
.gadget-main #support .sup-b-wrap .box:last-child {
margin-bottom: 0;
}
.gadget-main .en-txt {
margin-bottom: 30px;
}
.gadget-main .en-txt span {
font-weight: bold;
font-size: 1.2rem;
}
footer {
padding: 60px 4% 10px;
}
footer .logo {
margin-bottom: 30px;
}
footer .wrapper {
flex-wrap: wrap;
}
footer .wrapper .footWrap {
width: 50%;
}
footer .wrapper .footWrap p {
font-weight: bold;
margin-bottom: 10px;
}
footer .wrapper .footWrap ul {
margin-bottom: 30px;
}
footer a {
color: #fff;
}
footer .copy {
text-align: center;
font-size: 0.7rem;
}
}
js
$(function(){
/*=================================================
ハンバーガーメニュー
===================================================*/
// ハンバーガーメニューのクリックイベント
$('.ham').on('click', function() {
// #headerにopenクラスが存在する場合
if ($('#header').hasClass('open')) {
// openクラスを削除
// openクラスを削除すると、openクラスのCSSがはずれるため、
// メニューが非表示になる
$('#header').removeClass('open');
// #headerにopenクラスが存在しない場合
} else {
// openクラスを追加
// openクラスを追加すると、openクラスのCSSが適応されるため、
// メニューが表示される
$('#header').addClass('open');
}
});
// メニューが表示されている時に画面をクリックした場合
$('.mask').on('click', function() {
// openクラスを削除して、メニューを閉じる
$('#header').removeClass('open');
});
$('.link').on('click', function() {
// openクラスを削除して、メニューを閉じる
$('#header').removeClass('open');
});
/*=================================================
スムーススクロール
===================================================*/
// ページ内リンクのイベント
$('a[href^="#"]').click(function(){
// リンクを取得
let href= $(this).attr("href");
// ジャンプ先のid名をセット
let target = $(href == "#" || href == "" ? 'html' : href);
// トップからジャンプ先の要素までの距離を取得
let position = target.offset().top;
// animateでスムーススクロールを行う
// 600はスクロール速度で単位はミリ秒
$("html, body").animate({scrollTop:position}, 600, "swing");
return false;
});
/*=================================================
inview
===================================================*/
$('.inview-left').on('inview', function(){
$(this).addClass('appear');
});
$('.inview-right').on('inview', function(){
$(this).addClass('appear');
});
$('.inview-up').on('inview', function(){
$(this).addClass('appear');
});
$('.inview-txt').on('inview', function(){
$(this).addClass('appear');
});
$('.support-bg').on('inview', function(){
$(this).addClass('appear');
});
$('#reason').on('inview', function(){
$(this).addClass('bg-inview');
});
/*=================================================
スクロール時のイベント
===================================================*/
$(window).scroll(function() {
// スクロール位置を取得
let scroll = $(window).scrollTop();
/*=================================================
メインビジュアルの拡大・縮小
===================================================*/
mv_scale(scroll);
/*=================================================
ロゴ
===================================================*/
// スクロール位置が520pxを超えたら
if (scroll > 520) {
// ロゴ表示
$('.logo').fadeIn(500);
// スクロール位置が520px未満なら
} else {
// ロゴ非表示にする
$('.logo').fadeOut(500);
}
/*=================================================
画面読み込み時と画面幅変更時のイベント
===================================================*/
$(window).on('load resize', function() {
// スクロール位置を取得
let scroll = $(window).scrollTop();
/*=================================================
メインビジュアルの拡大・縮小
===================================================*/
mv_scale(scroll);
});
});
/*=================================================
メインビジュアルの拡大・縮小（共通処理）
===================================================*/
function mv_scale(scroll) {
// window.innerWidth 画面幅を取得
// 画面幅が767pxより大きい場合
if (window.innerWidth > 767) {
// widthを変更する
$('#mainvisual img').css({
'width': 100/3 + scroll/20 + '%'
});
// スマホ表示の場合
} else {
$('#mainvisual img').css({
'width': 100 - scroll/20 + '%'
});
}
}
});