JavaScriptで背景色をランダムにRGBで表示させる方法 – R.P.BLOG

JavaScriptで背景色をランダムにRGBで表示させる方法

2020/10/23

2020/10/23

今回はボタンがクリックされると要素の背景色が変わるというものをJavaScriptで作る方法を紹介します。
サンプルコードは以下のようになります。

!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #box {
            width: 200px;
            height: 200px;
            margin-bottom: 50px;
            border: 1px solid #000;
        }

        button {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="box">
    </div>
    <button id="change_c">色を変更</button>
    <script>
        let change = document.getElementById('change_c');

        change.addEventListener('click', function () {
            let num1 = Math.floor(Math.random() * 256),// R:乱数1
                num2 = Math.floor(Math.random() * 256),// G:乱数2
                num3 = Math.floor(Math.random() * 256),// B:乱数3
                color = "rgb(" + num1 + "," + num2 + "," + num3 + ")";//RGB
            console.log(color);
            console.log(num1);
            console.log(num2);
            console.log(num3);
            document.getElementById('box').style.backgroundColor = color;
// #boxのbackground-colorに変数colorを代入
        });
    </script>
</body>

</html>

<解説>

<HTML>

<div id="box"></div>

この部分は色が変わる部分(四角形)です。

<button id="change">色を変更</button>

この部分はクリックされると”box”の背景色を変更するボタンです。
 

<CSS>

body {
       display: flex;
       flex-direction: column;
       align-items: center;
     }

この部分はbody全体を中央に配置するというものです。

#box {
       width: 200px;
       height: 200px;
       margin-bottom: 50px; //
       border: 1px solid #000;
     }

この部分は”box”を正方形にするものです。(margin-bottomの部分は削除しても大丈夫です。)

button {
         width: 100px;
         text-align: center;
        }

これはボタンの見た目を変更するものです。

<JavaScript>

<script>
        let change = document.getElementById('change_c');

ここでは”change”という変数を宣言しています。宣言の内容は”change_c”要素を取得するというものです。

change.addEventListener('click', function () {

これは”change_c”要素がクリックされた時{}の中のコードを実行するというものです。

let num1 = Math.floor(Math.random() * 256),// Rに代入
    num2 = Math.floor(Math.random() * 256),// Gに代入
    num3 = Math.floor(Math.random() * 256),// Bに代入

これは0~255のランダムな値を計算させる変数です。
今回はRGBで背景色を指定するのでこの変数が3つ必要です。

color = "rgb(" + num1 + "," + num2 + "," + num3 + ")";//RGB

これは先程の変数3つをRGBに代入させる変数です。
以降、背景色を指定する時はこの変数を記述します。

console.log(color);
console.log(num1);
console.log(num2);
console.log(num3);

これは先程の変数が正常に機能しているか確認するためコンソールに3つの乱数とRGBを表示するものです。
使用しているブラウザがGoogleChromeの場合は

  • ⌘(command)+⌥(option)+i(Mac)
  • F12キー (Windows)

でコンソールを表示出来ます。正常に機能していれば

と表示されます。(確認出来たらこの部分を削除しても大丈夫です。)

document.getElementById('box').style.backgroundColor = color;
});

これは”box”要素を取得して背景色を先程記述した変数”color”に変更するという変数です。

これで完成です。

今回はこれでおしまいです。この記事が皆さんのお役に立てれば幸いです。

この記事をシェアする

コメントは受け付けていません。

自己紹介

髙橋

WEBデザイン学科

HTMLとCSS、PHPを勉強中

カテゴリー

アーカイブ

© 2020 Takahashi