【コピペOK】セレクトボックスで背景色を変えるJavaScriptの実装

セレクトボックスは、選択肢の中から1つを選べる入力欄です。
選んだ色に合わせて、ページの背景色が変わります。
JavaScriptの基本的なコードを使えば、この操作を簡単に実装できます。

まずは実際に動かしてみましょう！
コードを書いてみよう

まずは実際に動かしてみましょう！

下のセレクトボックスから色を選ぶと、上のエリアの背景色が変わります。

背景色チェンジ

背景色を選択:

コードを書いてみよう

HTMLで骨組みを作り、CSSでデザインを整え、JavaScriptで動きを実装していきましょう。

HTMLの構成

<body>
  <div class="container">
    <div id="changeColorArea" class="changeColorArea">
      <p>背景色チェンジ</p>
    </div>

    <div class="colorSelectArea">
      <label for="colorSelect">背景色を選択:</label>

      <select id="colorSelect">
        <option value="" disabled selected>
          --好きな色を選んでください--
        </option>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="green">緑</option>
        <option value="yellow">黄色</option>
        <option value="purple">紫</option>
        <option value="orange">オレンジ</option>
        <option value="pink">ピンク</option>
        <option value="black">黒</option>
        <option value="white">白</option>
      </select>
    </div>
  </div>
  <script src="app.js"></script>
</body>

#changeColorArea (div) 色を反映させる対象。
#colorSelect (select) 色の値を取得する入力パーツ。
app.js (script) 操作を実行するプログラムの読み込み。

CSSの構成

.container {
  width: 90%;
  margin: 20px auto 0;
  padding: 20px;
  border: 1px solid #999;
  background-color: #fffff0;
}
.changeColorArea {
  width: 100%;
  height: 200px;
  border: 1px solid #999;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.changeColorArea p {
  font-size: 1.5em;
  padding: 10px 20px;
  margin: 0;
  background: white;
  border: 1px solid #ccc;
  box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.colorSelectArea label {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2em;
}
.colorSelectArea select {
  width: 100%;
  font-size: 1.1em;
  padding: 6px;
}

@media (min-width: 576px) {
  .container {
    width: 576px;
  }
}

.container：全体のレイアウト
.changeColorArea：背景色が変わるエリア（Flexboxで中央揃え）
@media：スマホ・PCのレスポンシブ対応

flexboxについての解説はこちら

Flexboxで中央寄せする方法【コピペOK】

Flexboxで中央寄せする方法。コピペで上下左右を真ん中に配置できます。うまくいかない原因と対処法も解説。

JavaScriptの構成

// 背景色を変更するエリアを取得
const changeColorArea = document.querySelector('#changeColorArea');

// セレクトボックスを取得
const colorSelect = document.querySelector('#colorSelect');

// セレクトボックスの値が変更されたら、背景色を変更
colorSelect.addEventListener('change', function () {
  changeColorArea.style.backgroundColor = colorSelect.value;
});

1. 背景色を変更するエリアを取得

const changeColorArea = document.querySelector('#changeColorArea');

背景色を変える対象の要素（#changeColorArea）を、document.querySelector で探して取得しています。
取得した要素は、後で操作しやすいように const（定数）に入れておきます。

2. セレクトボックスを取得

const colorSelect = document.querySelector('#colorSelect');

操作のきっかけとなるセレクトボックス（#colorSelect）を取得します。
この変数（colorSelect）を通して、ユーザーが今どの色を選んでいるかを確認できるようになります。

3. セレクトボックスの値が変更されたら

colorSelect.addEventListener('change', function () { ... });

セレクトボックスで選択が変わった瞬間に、特定の処理を実行させる仕組み（イベントリスナー）です。
'change' というキーワードを指定することで、「値が切り替わったとき」という条件を設定しています。

4. 背景色を変更

changeColorArea.style.backgroundColor = colorSelect.value;

セレクトボックスで選ばれた値（colorSelect.value）を、エリアの背景色に代入しています。
この一行が実行されることで、CSSの background-color が書き換わり、画面の色が即座に切り替わります。

基本の組み合わせ次第で、文字の色やサイズなども同じ仕組みで変更できます。ぜひ応用してみてください。