はじめに
下記画像のように、「Aボタン」をクリックすると「A画面」が、
「Bボタン」をクリックすると「B画面」が表示されるような
画面切り替えをJavaScript、HTML、CSS を使って作成していきます。
JavaScript、HTML、CSS ファイルの作成
ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。
HTML の作成
ヘッダーの作成
次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。
<link rel="stylesheet" href="./style.css" />
で style.css に連携。
<script src="./script.js" defer></script>
で script.js に連携。
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>画面切り替え</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
ボディの作成
ボディには画面に表示させる「切り替えボタン」と
「切り替えた画面」を表す文言を記載します。
<body>
<!-- ➀切り替えボタン -->
<div class="buttons">
<!-- ➁ボタン単体 -->
<button class="button" id="a_btn">Aボタン</button>
<button class="button" id="b_btn">Bボタン</button>
</div>
<!-- ➂切り替え画面 -->
<div class="screen">
<!-- ➃A画面 -->
<div class="a_screen">
<p>Aの画面です</p>
</div>
<!-- ➄B画面 -->
<div class="b_screen">
<p>Bの画面です</p>
</div>
</div>
</body>
実際のサイトではこのような表示になります。
CSS の作成（切り替えボタン）
次にCSSで画面を整えていきます。
CSSのリセット
まずはCSSのリセットを行います。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
切り替えボタン
デフォルトでは「A画面」が表示されるようにしたいので、
「Aボタン」を赤色にし、 active が追加された時に白色にします。
「Bボタン」はデフォルトでは白色ですが、 active が追加された時に青色にします。
※ active については次の JavaScript で説明します。
/* ➀切り替えボタン */
.buttons{
margin: 50px auto; /* 上下 50px 空け、左右中央に配置 */
width: 210px; /* 横幅 210px */
}
/* ➁ボタン単体 */
.button{
width: 100px; /* 横幅 210px */
height: 30px; /* 縦幅 30px */
}
/* Aボタン */
#a_btn{
color: white; /* 文字色：白 */
background-color: red; /* 背景色：赤 */
}
/* Aボタン active */
#a_btn.active{
color: black; /* 文字色：黒 */
background-color: white; /* 文字色：白 */
}
/* Bボタン */
#b_btn{
color: black; /* 文字色：黒 */
background-color: white; /* 文字色：白 */
}
/* Bボタン active */
#b_btn.active{
color: white; /* 文字色：白 */
background-color: blue; /* 背景色：青 */
}
実際のサイトではこのような表示になります。
JavaScript の作成（切り替えボタン）
定数の設定
最初に「Aボタン」と「Bボタン」の定数を設定します。
const 定数名 = document.getElementById('HTMLで設定したID名');
で「Aボタン」を定数 buttonA 、「Bボタン」を定数 buttonB と設定します。
// Aボタン
const buttonA = document.getElementById('a_btn');
// Bボタン
const buttonB = document.getElementById('b_btn');
クリックした時の動作を記載
次に「Aボタン」「Bボタン」をそれぞれクリックした時の動作を記載していきます。
定数名.addEventListener('click',function(){ });
は定数がクリックされた時、という意味で
クリックされた後の処理は {} 内に記載します。
定数名.classList.remove('active');
は指定した定数から active を外す、という意味です。
「Aボタン」でいうと a_btn.active から active が外され、
a_btn のみの状態となります。
逆に 定数名.classList.add('active'); は
指定した定数から active を追加する、という意味です。
buttonA.addEventListener('click',function(){ // Aボタンをクリックした時
buttonA.classList.remove('active'); // 'buttonA' から 'active' が外される
buttonB.classList.remove('active'); // 'buttonB' から 'active' が外される
});
buttonB.addEventListener('click',function(){ // Bボタンをクリックした時
buttonA.classList.add('active'); // 'buttonA' に 'active' が追加される
buttonB.classList.add('active'); // 'buttonB' に 'active' が追加される
});
「Bボタン」をクリックすると active が追加され、ボタンが青色に変わりました。
「Aボタン」をクリックすると active が外され、ボタンが赤色に変わりました。
CSS の作成（切り替え画面）
ボタンが切り替わるようになったので、次は切り替え画面を整えていきます。
配置を整える
「A画面」「B画面」が同じ位置に配置されるよう、
screen を position: relative; を使って親要素に、
a_screen と b_screen を position: absolute; を使って子要素に設定します。
こうすることで、子要素は親要素を基準に配置を設定することができます。
今回の場合、子要素は 横幅：100％ 、 縦幅：100% としているため、
親要素と全く同じ範囲に設定されます。
要素の透明度
「A画面」が表示されている時は「B画面」を非表示に、
「B画面」が表示されている時は「A画面」を非表示にするため、
opacity を使って要素の透明度を調整します。
指定できる値は1.0〜0.0で、1が透明でない状態、0が透明の状態です。
（値を0.5にすると半透明の状態になります。）
/* ➂切り替え画面 */
.screen{
width: 100%; /* 横幅 100% */
height: 500px; /* 縦幅 500px */
position: relative; /* 親要素 */
}
/* ➃A画面 */
.a_screen{
position: absolute; /* 子要素 */
opacity: 1; /* 要素の透明度 */
pointer-events: auto; /* マウスイベントをオン */
width: 100%; /* 横幅 100% */
height: 100%; /* 縦幅 100% */
background-color: #febfbf; /* 背景色 */
}
/* ➃A画面 active */
.a_screen.active{
opacity: 0; /* 要素の透明度 */
pointer-events: none; /* マウスイベントをキャンセル */
}
/* ➄B画面 */
.b_screen{
opacity: 0; /* 要素の透明度 */
pointer-events: none; /* マウスイベントをキャンセル */
}
/* ➄B画面 active */
.b_screen.active{
position: absolute; /* 子要素 */
opacity: 1; /* 要素の透明度 */
pointer-events: auto; /* マウスイベントをオン */
width: 100%; /* 横幅 100% */
height: 100%; /* 縦幅 100% */
background-color: #b2d4f7; /* 背景色 */
}
デフォルトではこのように「A画面」が表示されるようになっています。
JavaScript の作成（切り替え画面）
定数の設定
最初に「A画面」と「B画面」の定数を設定します。
const 定数名 = document.querySelector('HTMLで設定したクラス名');
で「A画面」を定数 screenA 、「B画面」を定数 screenB と設定します。
// A画面
const screenA = document.querySelector('.a_screen');
// B画面
const screenB = document.querySelector('.b_screen');
クリックした時の動作を記載
先程「Aボタン」「Bボタン」をクリックした時の動作の処理に
画面の切り替え処理を追加します。
buttonA.addEventListener('click',function(){ // Aボタンをクリックした時
buttonA.classList.remove('active'); // 'buttonA' から 'active' が外される
buttonB.classList.remove('active'); // 'buttonB' から 'active' が外される
screenA.classList.remove('active'); // 'screenA' から 'active' が外される
screenB.classList.remove('active'); // 'screenB' から 'active' が外される
});
buttonB.addEventListener('click',function(){ // Bボタンをクリックした時
buttonA.classList.add('active'); // 'buttonA' に 'active' が追加される
buttonB.classList.add('active'); // 'buttonB' に 'active' が追加される
screenA.classList.add('active'); // 'screenA' に 'active' が追加される
screenB.classList.add('active'); // 'screenB' に 'active' が追加される
});
「Bボタン」をクリックすると active が追加され、「B画面」に変わりました。
「Aボタン」をクリックすると active が外され、「A画面」に変わりました。
JavaScript、HTML、CSSを使って画面を切り替える方法については以上です！
下記にJavaScript、HTML、CSSそれぞれのソースをまとめました。
ソースのまとめ
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>画面切り替え</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<!-- ➀切り替えボタン -->
<div class="buttons">
<!-- ➁ボタン単体 -->
<button class="button" id="a_btn">Aボタン</button>
<button class="button" id="b_btn">Bボタン</button>
</div>
<!-- ➂切り替え画面 -->
<div class="screen">
<!-- ➃A画面 -->
<div class="a_screen">
<p>Aの画面です</p>
</div>
<!-- ➄B画面 -->
<div class="b_screen">
<p>Bの画面です</p>
</div>
</div>
</body>
CSS
/* CSSのリセット */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ➀切り替えボタン */
.buttons{
margin: 50px auto; /* 上下 50px 空け、左右中央に配置 */
width: 210px; /* 横幅 210px */
}
/* ➁ボタン単体 */
.button{
width: 100px; /* 横幅 210px */
height: 30px; /* 縦幅 30px */
}
/* Aボタン */
#a_btn{
color: white; /* 文字色：白 */
background-color: red; /* 背景色：赤 */
}
/* Aボタン active */
#a_btn.active{
color: black; /* 文字色：黒 */
background-color: white; /* 文字色：白 */
}
/* Bボタン */
#b_btn{
color: black; /* 文字色：黒 */
background-color: white; /* 文字色：白 */
}
/* Bボタン active */
#b_btn.active{
color: white; /* 文字色：白 */
background-color: blue; /* 背景色：青 */
}
/* ➂切り替え画面 */
.screen{
width: 100%; /* 横幅 100% */
height: 500px; /* 縦幅 500px */
position: relative; /* 親要素 */
}
/* ➃A画面 */
.a_screen{
position: absolute; /* 子要素 */
opacity: 1; /* 要素の透明度 */
pointer-events: auto; /* マウスイベントをオン */
width: 100%; /* 横幅 100% */
height: 100%; /* 縦幅 100% */
background-color: #febfbf; /* 背景色 */
}
/* ➃A画面 active */
.a_screen.active{
opacity: 0; /* 要素の透明度 */
pointer-events: none; /* マウスイベントをキャンセル */
}
/* ➄B画面 */
.b_screen{
opacity: 0; /* 要素の透明度 */
pointer-events: none; /* マウスイベントをキャンセル */
}
/* ➄B画面 active */
.b_screen.active{
position: absolute; /* 子要素 */
opacity: 1; /* 要素の透明度 */
pointer-events: auto; /* マウスイベントをオン */
width: 100%; /* 横幅 100% */
height: 100%; /* 縦幅 100% */
background-color: #b2d4f7; /* 背景色 */
}
JavaScript
// Aボタン
const buttonA = document.getElementById('a_btn');
// Bボタン
const buttonB = document.getElementById('b_btn');
// A画面
const screenA = document.querySelector('.a_screen');
// B画面
const screenB = document.querySelector('.b_screen');
buttonA.addEventListener('click',function(){ // Aボタンをクリックした時
buttonA.classList.remove('active'); // 'buttonA' から 'active' が外される
buttonB.classList.remove('active'); // 'buttonB' から 'active' が外される
screenA.classList.remove('active'); // 'screenA' から 'active' が外される
screenB.classList.remove('active'); // 'screenB' から 'active' が外される
});
buttonB.addEventListener('click',function(){ // Bボタンをクリックした時
buttonA.classList.add('active'); // 'buttonA' に 'active' が追加される
buttonB.classList.add('active'); // 'buttonB' に 'active' が追加される
screenA.classList.add('active'); // 'screenA' に 'active' が追加される
screenB.classList.add('active'); // 'screenB' に 'active' が追加される
});