【ソースコード】中級編：ランディングページ／CSSアニメーション
目次
- ディレクトリ構成
- HTML（index.html）
- CSS（style.css）
- JavaScript（main.js）
-
jQueryのプラグイン「jquery.inview.min.js」は、配布元からダウンロードしてください。
※コーディングの解説はCSSのコメントを参照
ディレクトリ構成
lp
├─img
│ ├─favicon.ico
│ ├─logo-r.svg
│ ├─logo-w.svg
│ ├─bg.gif
│ ├─icon-pc.png
│ ├─icon-student1.png
│ ├─icon-student2.png
│ ├─icon-student3.png
│ ├─icon-teacher.png
│ ├─mainvisual1.jpg
│ ├─mainvisual2.jpg
│ └─mainvisual3.jpg
│
├─css
│ └─style.css
│
├─js
│ ├─jquery.inview.min.js
│ └─main.js
│
└─index.html
HTML（index.html）
別タブで開く
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>BBB英会話スクール</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header id="header">
<h1 class="site-title">
<a href="#"><img src="img/logo-r.svg" alt="BBB英会話スクール"></a>
</h1>
<nav id="navi">
<img class="logo" src="img/logo-w.svg" alt="BBB英会話スクール">
<ul class="menu">
<li><a href="#reason">BBBが選ばれる理由</a></li>
<li><a href="#voice">受講生の声</a></li>
<li><a href="#summary">スクールの概要</a></li>
</ul>
<a class="btn" href="#">無料体験に申し込む</a>
</nav>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</header>
<main>
<!-- メインビジュアル -->
<div id="mainvisual">
<div class="text">
<p class="title">話して学ぼう！<br>BBB英会話スクール</p>
<a class="btn" href="#">無料体験はこちら</a>
</div>
<ul class="fade">
<li><img src="img/mainvisual1.jpg" alt=""></li>
<li><img src="img/mainvisual2.jpg" alt=""></li>
<li><img src="img/mainvisual3.jpg" alt=""></li>
</ul>
</div>
<!-- BBBが選ばれる理由 -->
<section id="reason">
<h2 class="section-title">BBBが選ばれる理由</h2>
<div class="bg">
<div class="slide inview-slide-left">
<img src="img/icon-pc.png" alt="">
<p>
<span class="title">オンライン対応</span>
<span class="text">24時間いつでも受講できる！</span>
</p>
</div>
<div class="slide inview-slide-right">
<img src="img/icon-teacher.png" alt="">
<p>
<span class="title">講師はネイティブ</span>
<span class="text">お気に入りの講師が自由に選べる！</span>
</p>
</div>
</div>
</section>
<!-- 受講生の声 -->
<section id="voice" class="wrapper">
<h2 class="section-title">受講生の声</h2>
<div class="item-left inview-balloon">
<div class="student">
<img src="img/icon-student1.png" alt="">
<p class="name">○○○さん<br>大学生</p>
</div>
<div class="balloon-text">
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
<div class="item-right inview-balloon">
<div class="balloon-text">
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
<div class="student">
<img src="img/icon-student2.png" alt="">
<p class="name">○○○さん<br>会社員</p>
</div>
</div>
<div class="item-left inview-balloon">
<div class="student">
<img src="img/icon-student3.png" alt="">
<p class="name">○○○さん<br>自営業</p>
</div>
<div class="balloon-text">
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</section>
<!-- スクールの概要 -->
<section id="summary">
<div class="wrapper">
<h2 class="section-title">スクールの概要</h2>
<ul class="menu">
<li>
<h3 class="menu-title">
<span class="ja">レッスン内容</span>
<span class="en">LESSON</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">料金プラン</span>
<span class="en">PRICE</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">講師のご紹介</span>
<span class="en">TEACHER</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
<li>
<h3 class="menu-title">
<span class="ja">BBBのQ&A</span>
<span class="en">Q&A</span>
</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</li>
</ul>
</div>
</section>
<!-- 無料体験申し込み -->
<div id="entry" class="wrapper">
<p class="title">まずは無料で、BBBの英会話を試してみませんか？</p>
<p class="catchphrase">今なら初月のレッスンを特別価格で受講できる割引クーポンをプレゼント！</p>
<a class="btn" href="#">無料体験に申し込む</a>
</div>
</main>
<footer id="footer">
<ul class="inner wrapper">
<li>
<p class="title">コース一覧</p>
<ul class="menu">
<li><a href="#">スタンダードプラン</a></li>
<li><a href="#">プレミアムプラン</a></li>
<li><a href="#">短期集中プラン</a></li>
<li><a href="#">日常英会話コース</a></li>
<li><a href="#">ビジネス英会話コース</a></li>
</ul>
</li>
<li>
<p class="title">講師紹介</p>
<ul class="menu">
<li><a href="#">講師について</a></li>
<li><a href="#">講師一覧</a></li>
<li><a href="#">講師を探す</a></li>
</ul>
</li>
<li>
<p class="title">会社情報</p>
<ul class="menu">
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
</ul>
</li>
<li>
<p class="title">BBBについて</p>
<ul class="menu">
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">ご利用規約</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</li>
</ul>
<p class="copyright">© BBB English School</p>
</footer>
</body>
</html>
CSS（style.css）
別タブで開く
style.css
@charset "UTF-8";
html {
font-size: 100%;
}
body {
color: #333;
font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
letter-spacing: 0.1em;
}
a {
color: #333;
text-decoration: none;
}
img {
max-width: 100%;
vertical-align: bottom;
}
li {
list-style: none;
}
/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
/*
セクションタイトル用の共通クラス
*/
.section-title {
font-size: 2.25rem;
margin-bottom: 100px;
text-align: center;
position: relative;
}
/* 疑似要素でタイトル下に下線を引く */
.section-title::after {
content: "";
width: 100px;
height: 3px;
background-color: #333;
display: block;
position: absolute;
bottom: -20px;
left: 0;
right: 0;
margin: 0 auto;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
height: 100px;
padding: 40px 0 0 50px;
}
#header .site-title {
width: 100px;
line-height: 1px;
}
#header .site-title a {
display: block;
}
/*
ハンバーガ―メニュー
*/
.hamburger {
width: 100px;
height: 100px;
background-color: #ff2a2a;
position: fixed;
top: 0;
right: 0;
z-index: 30;
cursor: pointer;
transition: 0.3s;
}
.hamburger:hover {
opacity: 0.7;
}
/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
width: 50px;
height: 2px ;
background: #fff;
position: absolute;
left: 25px;
transition: 0.3s ease-in-out;
}
/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
top: 36px;
}
/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
top: 50px;
}
/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
top: 64px;
}
/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.hamburger.active span:nth-child(1) {
top: 47px;
left: 25px;
background :#fff;
transform: rotate(-45deg);
}
/* 2本目と3本目は重ねて45度回転 */
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 47px;
background: #fff;
transform: rotate(45deg);
}
/*
メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく
*/
#navi {
width: 100%;
height: 100vh;
background-color: #ff2a2a;
color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 20;
opacity: 0;
text-align: center;
transition: opacity 0.6s ease, visibility 0.6s ease;
visibility: hidden;
}
/*
ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
メニューを表示させる。
*/
#navi.active {
opacity: 1;
visibility: visible;
}
#navi .logo {
width: 100px;
position: absolute;
top: 40px;
left: 50px;
}
#navi .menu {
margin: 80px 0 40px 0;
}
#navi .menu li {
margin-bottom: 20px;
}
#navi .menu a {
color: #fff;
font-weight: bold;
}
#navi .btn {
width: 250px;
border: solid 1px #fff;
color: #fff;
display: block;
font-weight: bold;
padding: 15px 0;
margin: 0 auto;
position: relative;
transition: 0.3s ease-in-out;
}
/* ボタンの右と下の線は疑似要素で設定 */
#navi .btn::after {
content: " ";
width: 250px;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
padding: 15px 0;
position: absolute;
right: -6px;
bottom: -6px;
}
#navi .btn:hover {
background-color: #fff;
color: #ff2a2a;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
height: 720px;
position: relative;
margin-bottom: 120px;
}
/*
テキストとボタンが画像の上に表示されるように「z-index」を設定
*/
#mainvisual .text {
position: absolute;
top: 280px;
left: 10%;
z-index: 10;
}
/*
「text-shadow」で文字の輪郭に白い影をつけることで、
文字が背景画像に埋もれないようにする
*/
#mainvisual .text .title {
font-size: 2.875rem;
font-weight: bold;
margin-bottom: 30px;
text-shadow: 0 4px 6px #fff;
}
#mainvisual .text .btn {
background-color: #ff2a2a;
/* 文字の下に影をつけてボタンに立体感を出す */
border-bottom: 6px solid #9a0413;
border-radius: 10px;
color: #fff;
font-size: 1.5rem;
display: block;
padding: 15px 35px;
text-align: center;
transition: 0.3s;
position: relative;
}
/*
ボタンの右矢印
上と右にボーダーを設定し、「transform: rotate(45deg)」で
45度回転させることで矢印を作成
positionで位置を調整する
*/
#mainvisual .text .btn::after {
content: "";
width: 16px;
height: 16px;
border-top: solid 3px #fff;
border-right: solid 3px #fff;
transform: rotate(45deg);
position: absolute;
top: 26px;
right: 30px;
}
/*
ホバー時は、opacityで透過させながら「transform: scale(1.05);」で
少しだけボタンのサイズを大きくする
*/
#mainvisual .text .btn:hover {
opacity: 0.9;
transform: scale(1.05);
}
/*
メインビジュアル
animationを使用して、画像をフェードイン、フェードアウトで切り替えを行う
※画像のフェード切り替えは、CSSアニメーション以外にも
jQueryのプラグインを使う等便利なやり方が色々ありますが、
今回は学習のためにアニメーションを使用しています。
*/
#mainvisual .fade li {
width: 75%;
position: absolute;
top: 0;
right: 0;
/* 最初は3枚の画像を非表示にしておく */
opacity: 0;
/*
アニメーションを実行
fade：下で定義している「@keyframes fade」を実行
15s：「@keyframes fade」の処理を15秒かけて実行
infinite：アニメーションの処理を無限に繰り返す
*/
animation: fade 15s infinite;
}
/*
1枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 0s;」ですぐに実行
*/
#mainvisual .fade li:nth-child(1) {
animation-delay: 0s;
}
/*
2枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 5s;」で5秒後に実行
*/
#mainvisual .fade li:nth-child(2) {
animation-delay: 5s;
}
/*
3枚目の画像のアニメーション実行タイミングを設定
「animation-delay: 10s;」で10秒後に実行
*/
#mainvisual .fade li:nth-child(3) {
animation-delay: 10s;
}
#mainvisual .fade li img {
width: 100%;
height: 720px;
object-fit: cover;
}
/*
「box-shadow」で画像のまわりをぼかす
*/
#mainvisual .fade li::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0px 0px 20px 20px #fff;
}
/*
アニメーション処理
上の「animation」で15sを指定しているので下記の処理を15秒かけて実行
0%が0秒を表し、100%が15秒後を表す。
0%の「opacity: 0;」で非表示の状態からスタートし、
15%になるまでの間に少しづつ画像を表示（フェードイン）させる。
そこから30%の時点までは画像を表示させたままの状態を維持し、
45%の時点に向けて画像を非表示（フェードアウト）する。
そこから100%まで非表示の状態を維持する。
*/
@keyframes fade {
0% {
opacity: 0;
}
15% {
opacity: 1;
}
30% {
opacity: 1;
}
45% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/*-------------------------------------------
Reason
-------------------------------------------*/
#reason {
margin-bottom: 120px;
}
#reason .bg {
background-color: #ff2a2a;
padding: 80px 0;
}
/*
スライド左右共通
最初は「opacity: 0;」で非表示にしておく
*/
#reason .slide {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
padding: 5%;
opacity: 0;
}
#reason .slide img {
width: auto;
height: 60px;
margin-right: 30px;
}
#reason .slide .title {
color: #ff2a2a;
display: block;
font-size: 1.75rem;
font-weight: bold;
}
#reason .slide .text {
display: block;
font-size: 1.125rem;
}
#reason .inview-slide-left {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 40px;
}
/*
アニメーション（スライド左）を実行
slide-left：下で定義している「@keyframes slide-left」を実行
0.5s：アニメーションが始まってから終わるまでの時間（0.5sかけて実行）
ease-out：アニメーションの変化（開始時は早く、終了時は緩やかに変化）
0s：アニメーションが始まるまでの時間（0sですぐに実行）
1：アニメーションの繰り返し回数（1回）
forwards：アニメーション終了時の状態をそのまま維持
*/
#reason .slide-left {
animation: slide-left 0.5s ease-out 0s 1 forwards;
}
/*
アニメーション処理
最初は「translateX(-50%);」で左側に隠しておく
100%（0.5秒）かけて要素を表示させながら元の位置へ移動させる
*/
@keyframes slide-left {
0% {
transform: translateX(-50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#reason .inview-slide-right {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
/*
アニメーション（スライド右）を実行
※左の処理と同様
*/
#reason .slide-right {
animation: slide-right 0.5s ease-out 0s 1 forwards;
}
@keyframes slide-right {
0% {
transform: translateX(150%);
}
100% {
opacity: 1;
transform: translateX(100%);
}
}
/*-------------------------------------------
Voice
-------------------------------------------*/
#voice {
margin-bottom: 120px;
}
#voice .item-left,
#voice .item-right {
display: flex;
align-items: flex-start;
opacity: 0;
margin-bottom: 60px;
}
#voice .item-left {
justify-content: flex-start;
}
#voice .item-left:last-of-type {
margin-bottom: 0;
}
#voice .item-right {
justify-content: flex-end;
}
#voice .student img {
width: 120px;
background-color: #ccc;
border-radius: 50%;
margin-bottom: 10px;
}
#voice .student .name {
font-size: 0.75rem;
text-align: center;
}
/* ふきだしを設定 */
#voice .item-left .balloon-text,
#voice .item-right .balloon-text {
width: 60%;
display: flex;
justify-content: center;
background: #e9f1fb;
border-radius: 15px;
padding: 20px;
position: relative;
}
#voice .item-left .balloon-text {
margin-left: 25px;
}
/* 左のふきだしの矢印部分を設定 */
#voice .item-left .balloon-text::before {
content: "";
position: absolute;
top: 60%;
left: 0;
margin-left: -30px;
border: 15px solid transparent;
border-right: 15px solid #e9f1fb;
}
#voice .item-right .balloon-text {
margin-right: 25px;
}
/* 右のふきだしの矢印部分を設定 */
#voice .item-right .balloon-text::before {
content: "";
position: absolute;
top: 60%;
right: 0;
margin-right: -30px;
border: 15px solid transparent;
border-left: 15px solid #e9f1fb;
}
/*
アニメーションを実行
balloon：下で定義している「@keyframes balloon」を実行
0.5s：アニメーションが始まってから終わるまでの時間（0.5sかけて実行）
ease-out：アニメーションの変化（開始時は早く、終了時は緩やかに変化）
0s：アニメーションが始まるまでの時間（0sですぐに実行）
1：アニメーションの繰り返し回数（1回）
forwards：アニメーション終了時の状態をそのまま維持
*/
#voice .balloon {
animation: balloon 0.5s ease-out 0s 1 forwards;
}
/*
アニメーション処理
最初は「transform: scale(0.1);」で要素を小さくした状態で、「opacity: 0;」で非表示にしておく
0.5秒かけて要素を表示させながら元のサイズへ戻す
*/
@keyframes balloon {
0% {
transform: scale(0.1);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/*-------------------------------------------
Summary
-------------------------------------------*/
/*
アニメーションを実行
fall：下で定義している「@keyframes fall」を実行
10s：アニメーションが始まってから終わるまでの時間（10sかけて実行）
infinite：アニメーションの繰り返し回数(無限に繰り返す)
linear：アニメーションの変化（開始から終了まで一定に変化）
*/
#summary {
background: url("../img/bg.gif") repeat;
animation: fall 10s infinite linear;
padding: 60px 0;
margin-bottom: 120px;
}
/*
アニメーション処理
10秒かけて背景画像の位置「background-position」を移動させる動作を繰り返す
*/
@keyframes fall {
0% {
background-position: 0 0;
}
100% {
background-position: -700px 700px;
}
}
#summary .menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#summary .menu li {
width: 48%;
background-color: #fff;
border-radius: 20px;
padding: 60px;
margin-bottom: 32px;
}
/* 3つ目以降はmargin-bottomを設定しない */
#summary .menu li:nth-child(n + 3) {
margin-bottom: 0;
}
#summary .menu-title {
font-weight: bold;
line-height: 1;
text-align: center;
}
#summary .menu-title .ja {
display: block;
font-size: 1.75rem;
margin-bottom: 15px;
}
#summary .menu-title .en {
display: block;
font-size: 1.125rem;
margin-bottom: 30px;
}
/*-------------------------------------------
Entry
-------------------------------------------*/
#entry {
margin-bottom: 120px;
text-align: center;
}
#entry .title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 5px;
}
#entry .catchphrase {
font-size: 1.125rem;
margin-bottom: 40px;
}
#entry .btn {
background-color: #ff2a2a;
border-radius: 40px;
border: solid 3px #ff2a2a;
color: #fff;
font-size: 1.75rem;
font-weight: bold;
display: block;
padding: 15px;
text-align: center;
transition: 0.3s;
}
#entry .btn:hover {
background-color: #fff;
border: solid 3px #ff2a2a;
color: #ff2a2a;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer {
background-color: #e8e8e8;
padding: 60px 0 20px 0;
}
#footer a {
font-size: 0.875rem;
/*
ホバー時の透過をふわっとさせる（0.3秒かけて実行）
*/
transition: 0.3s;
}
#footer a:hover {
opacity: 0.7;
}
#footer .inner {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
#footer .inner > li {
width: 25%;
}
#footer .inner .title {
font-weight: bold;
}
#footer .inner .menu {
padding: 10px 0 0 10px;
}
#footer .inner .menu li {
margin-bottom: 3px;
}
#footer .copyright {
font-size: 0.625rem;
text-align: center;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {
.wrapper {
padding: 0 16px;
}
.section-title {
font-size: 1.75rem;
margin-bottom: 60px;
}
.section-title::after {
width: 80px;
}
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
padding: 25px 0 0 25px;
}
/* ハンバーガ―メニュー */
.hamburger {
width: 75px;
height: 75px;
}
.hamburger span {
width: 35px;
left: 21px;
}
.hamburger span:nth-child(1) {
top: 26px;
}
.hamburger span:nth-child(2) {
top: 37px;
}
.hamburger span:nth-child(3) {
top: 48px;
}
.hamburger.active span:nth-child(1) {
top: 37px;
left: 21px;
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 37px;
}
#navi .logo {
top: 25px;
left: 25px;
}
#navi .menu {
margin-top: 110px;
}
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
height: 490px;
margin-bottom: 80px;
}
#mainvisual .fade li {
width: 100%;
}
#mainvisual .fade li img {
height: 300px;
}
#mainvisual .text {
/* 両端に16pxづつ余白を作る */
width: calc(100% - 32px);
top: 310px;
left: 16px;
}
#mainvisual .text .title {
font-size: 1.75rem;
margin-bottom: 10px;
}
#mainvisual .text .btn {
width: 100%;
}
/*-------------------------------------------
Reason
-------------------------------------------*/
#reason {
margin-bottom: 80px;
}
#reason .bg {
padding: 40px 0;
}
#reason .slide {
width: calc(100% - 16px);
}
#reason .slide .title {
font-size: 1.5rem;
}
@keyframes slide-left {
0% {
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slide-right {
0% {
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(16px);
}
}
/*-------------------------------------------
Voice
-------------------------------------------*/
#voice {
margin-bottom: 80px;
}
#voice .student {
text-align: center;
}
#voice .item-left,
#voice .item-right {
margin-bottom: 40px;
}
#voice .item-left {
flex-direction: column-reverse;
align-items: center;
}
#voice .item-right {
flex-direction: column;
align-items: center;
}
#voice .item-left .balloon-text,
#voice .item-right .balloon-text {
width: 100%;
margin: 0 0 30px 0;
}
/*
スマホの場合はふきだしの向きを下に変える
*/
#voice .item-left .balloon-text::before,
#voice .item-right .balloon-text::before {
top: 100%;
border: 15px solid transparent;
border-top: 15px solid #e9f1fb;
}
#voice .item-left .balloon-text::before {
margin-left: calc(50% - 15px);
}
#voice .item-right .balloon-text::before {
margin-right: calc(50% - 15px);
}
/*-------------------------------------------
Summary
-------------------------------------------*/
#summary {
margin-bottom: 80px;
}
#summary .menu {
flex-direction: column;
}
#summary .menu li {
width: 100%;
padding: 30px;
}
#summary .menu li:nth-child(3) {
margin-bottom: 32px;
}
#summary .menu-title .ja {
font-size: 1.5rem;
}
#summary .menu-title .en {
font-size: 1rem;
}
/*-------------------------------------------
Entry
-------------------------------------------*/
#entry {
margin-bottom: 80px;
}
#entry .title {
font-size: 1.5rem;
}
#entry .catchphrase {
font-size: 1rem;
}
#entry .btn{
font-size: 1.5rem;
}
/*-------------------------------------------
フッター
-------------------------------------------*/
#footer .inner {
flex-wrap: wrap;
}
#footer a {
font-size: 0.75rem;
}
#footer .inner .title {
font-size: 0.9375rem;
}
#footer .inner > li {
width: 50%;
}
#footer .inner > li:nth-child(1),
#footer .inner > li:nth-child(2) {
margin-bottom: 30px;
}
}
JavaScript（main.js）
別タブで開く
main.js
$(function(){
/*=================================================
ハンバーガ―メニュー
===================================================*/
// ハンバーガーメニューをクリックした時
$('.hamburger').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
// メニューのリンクをクリックした時
$('#navi a').on('click', function() {
// ハンバーガーメニューの共通処理を呼び出す
hamburger();
});
/*=================================================
Inview（画面に表示されたタイミングで処理を実行）
===================================================*/
// BBBが選ばれる理由（スライド左）
$('.inview-slide-left').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
// 要素が表示されたらslide-leftクラスを追加
$(this).stop().addClass('slide-left');
}
});
// BBBが選ばれる理由（スライド右）
$('.inview-slide-right').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
// 要素が表示されたらslide-rightクラスを追加
$(this).stop().addClass('slide-right');
}
});
// 受講生の声（ふきだし）
$('.inview-balloon').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
// 要素が表示されたらballoonクラスを追加
$(this).stop().addClass('balloon');
}
});
});
/*=================================================
ハンバーガ―メニュー共通処理
===================================================*/
// ハンバーガーメニューをクリックした時とメニュー内のリンクをクリックした時の
// 処理が同じなので処理を共通化する
function hamburger() {
// toggleClassを使用することで、hamburgerクラスにactiveクラスが存在する場合は削除、
// 存在しない場合を追加する処理を自動で行ってくれる
$('.hamburger').toggleClass('active');
if ($('.hamburger').hasClass('active')) {
// hamburgerクラスにactiveクラスが存在する場合は、naviにもactiveクラスを追加する
$('#navi').addClass('active');
} else {
// hamburgerクラスにactiveクラスが存在しない場合は、naviからactiveクラスを削除する
$('#navi').removeClass('active');
}
}