【JavaScript入門】セレクトボックスで背景色を変更！イベントとスタイル操作の基本を解説

「セレクトボックスで背景の色を変える」──これもJavaScriptの基本だけでカンタンに実現できます。

この記事では、JavaScript入門として「セレクトボックスの値に応じて背景色を変更する方法」をわかりやすく解説します。
イベント処理やスタイルの変更など、JavaScriptの基本操作を実際に動かしながら学べる内容になっているので、ぜひ手を動かして試してみてください！

まずは実際に動かしてみましょう！
はじめに
コードを書いてみよう
Web開発を本格的に学ぶならこちら
関連リンク

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

「好きな色を選んでください」と書かれたセレクトボックスをクリックすると、いろいろな色の選択肢が表示されます。
その中から好きな色を1つ選んでみてください。すると、上のエリアの背景色が選んだ色に変わります。
別の色を選べば、その色に合わせて背景色も変わります。

背景色チェンジ

背景色を選択:

はじめに

JavaScriptと聞くと、「なんだかむずかしそう…」と思ってしまう方も多いかもしれません。
でも今回は、セレクトボックス（選択メニュー）を使って、背景の色を変えるだけの超シンプルなしくみを紹介します。

この記事は、HTMLとCSSの基本を理解し、VSCodeなどのエディタでコードを書ける方を対象にしています。
（HTMLやCSSにまだ自信がない方は、まずはUdemyなどの入門講座から始めてみるのがおすすめです）

「クリックするだけで色が変わった！」というちょっとした体験でも、プログラミングの楽しさを感じられるはず。
むずかしい専門用語はできるだけ使わず、わかりやすく解説していきます！

コードを書いてみよう

ここからは、実際にコードを書いていきましょう。

今回は、HTML・CSS・JavaScriptの3つに分けて紹介します。
まずは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>

.containerの中に、色が変わるエリア（#changeColorArea）と、色を選ぶセレクトボックスがあります。
セレクトボックス（<select>タグ）は、「赤」や「青」などの選択肢を用意していて、選んだ値によって後で背景色が変わるようにします。
最後の <script src="app.js"></script> で、JavaScriptのファイルを読み込んで、動きを追加します。

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 を使っています。
.colorSelectArea まわりで、ラベルとセレクトボックスのデザインを整えています。
最後の @media は、画面幅が広い場合に最大幅を固定するレスポンシブ対応です。

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');

意味：
ページ内にある、id="changeColorArea" を持つHTML要素を探して取得しています。
この要素が「背景色を変えるエリア」になります。
ポイント：
document.querySelector は、CSSセレクタ（今回は #changeColorArea）を使って最初に見つかった要素を取得するメソッドです。
const は変数宣言で、値を変えない定数を作ることを意味します。

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

意味：
ページ内の id="colorSelect" を持つセレクトボックス（<select>タグ）を取得しています。
ポイント：
この変数を使って、選択された色の値をJavaScriptで扱います。

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

意味：
セレクトボックスの中身が変わった（選んでいる色が変わった）ときに、括弧内の関数を実行します。
この仕組みを「イベントリスナー」といいます。
ポイント：
'change' イベントは、選択肢が変わった瞬間に起きます。
無名関数（function () { ... }）は、そのイベントが起きたときに実行される処理を表します。

4. changeColorArea.style.backgroundColor = colorSelect.value;

意味：
背景色を変更するエリアのCSSの background-color プロパティに、セレクトボックスで選ばれた色の値を代入します。
ポイント：
colorSelect.value は、今選ばれている色（例："red"や"blue"）の文字列を取得します。
それを背景色として適用することで、画面上の色が変わります。

まとめ

このコードは、

ページの中から「色を変える部分」と「色を選ぶ部分」を探し出し、
ユーザーが色を選ぶたびに、その色を背景に反映する

という動きをシンプルに実現しています。

Web開発を本格的に学ぶならこちら

今回のような「セレクトボックスで背景色を変える」シンプルな仕組みも、JavaScriptの基本を実感できる良い練習になります。

「もっとJavaScriptをしっかり学んでみたい」「自分でもプロっぽい動きを作ってみたい」──そんな気持ちが芽生えた方には、私が実際に学んだUdemy講座をおすすめします👇

【世界で90万人が受講】Web Developer Bootcamp（日本語版）

（HTML/CSSの基本から、JavaScriptやDOM操作までしっかり学べます）

気になる方は、セールのタイミングで講座ページをのぞいてみるのが◎です！