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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/52266f58-76a3-da8a-5689-84a1b9ef3951.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/66fc2200-907c-6ae6-022c-d82697354088.png)



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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/b7aea451-ff66-dbbc-5d4f-405cbf9d880e.png)

# HTML の作成
### ヘッダーの作成

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


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

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

```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>
```



### ボディの作成

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

```html: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/8768b28e-bb4f-1b30-db4c-4ed4901ea8f3.png)


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

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


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

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

### 切り替えボタン

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

```css: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/3ac11619-b206-62ac-a0a1-47f9cae7d72f.png)



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

### 定数の設定

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

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

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

```js: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/34d9951b-1ebb-bc15-78f0-dc2abd6778f7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/dda881d8-10ad-f8cb-0b47-00020cfda876.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にすると半透明の状態になります。）


```css: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/2bc4d801-2a04-7548-f3ad-5d25bb2eb915.png)



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

### 定数の設定

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


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

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

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


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

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

```js: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/66fc2200-907c-6ae6-022c-d82697354088.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726548/52266f58-76a3-da8a-5689-84a1b9ef3951.png)


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


# ソースのまとめ

### HTML

```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

```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

```js: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' が追加される
});
```