LoginSignup
11
1
@Gakusyuin株式会社Crane＆I

JavaScript、HTML、CSSを使って画面切り替えをつくろう！

Last updated at Posted at 2024-07-03

はじめに

下記画像のように、「Aボタン」をクリックすると「A画面」が、
「Bボタン」をクリックすると「B画面」が表示されるような
画面切り替えをJavaScript、HTML、CSS を使って作成していきます。

image.png

image.png

JavaScript、HTML、CSS ファイルの作成

ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。

image.png

HTML の作成

ヘッダーの作成

次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。

<link rel="stylesheet" href="./style.css" />
で style.css に連携。

<script src="./script.js" defer></script>
で script.js に連携。

index.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>

ボディの作成

ボディには画面に表示させる「切り替えボタン」と
「切り替えた画面」を表す文言を記載します。

index.html
  <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>

実際のサイトではこのような表示になります。

image.png

CSS の作成（切り替えボタン）

次にCSSで画面を整えていきます。

CSSのリセット

まずはCSSのリセットを行います。

style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

切り替えボタン

デフォルトでは「A画面」が表示されるようにしたいので、
「Aボタン」を赤色にし、 active が追加された時に白色にします。
「Bボタン」はデフォルトでは白色ですが、 active が追加された時に青色にします。
※ active については次の JavaScript で説明します。

style.css
/* ➀切り替えボタン */
.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;  /* 背景色：青 */
}

実際のサイトではこのような表示になります。

image.png

JavaScript の作成（切り替えボタン）

定数の設定

最初に「Aボタン」と「Bボタン」の定数を設定します。

const 定数名 = document.getElementById('HTMLで設定したID名');
で「Aボタン」を定数 buttonA 、「Bボタン」を定数 buttonB と設定します。

script.js
// 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 を追加する、という意味です。

script.js
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 が追加され、ボタンが青色に変わりました。

image.png

「Aボタン」をクリックすると active が外され、ボタンが赤色に変わりました。

image.png

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にすると半透明の状態になります。）

style.css
/* ➂切り替え画面 */
.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画面」が表示されるようになっています。

image.png

JavaScript の作成（切り替え画面）

定数の設定

最初に「A画面」と「B画面」の定数を設定します。

const 定数名 = document.querySelector('HTMLで設定したクラス名');
で「A画面」を定数 screenA 、「B画面」を定数 screenB と設定します。

script.js
// A画面
const screenA = document.querySelector('.a_screen');

// B画面
const screenB = document.querySelector('.b_screen');

クリックした時の動作を記載

先程「Aボタン」「Bボタン」をクリックした時の動作の処理に
画面の切り替え処理を追加します。

script.js
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画面」に変わりました。

image.png

「Aボタン」をクリックすると active が外され、「A画面」に変わりました。

image.png

JavaScript、HTML、CSSを使って画面を切り替える方法については以上です！
下記にJavaScript、HTML、CSSそれぞれのソースをまとめました。

ソースのまとめ

HTML

index.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

style.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

script.js
// 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' が追加される
});
11
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
1