この記事で分かること
- JavaScriptで使える色指定の種類
- 16進数（#rrggbb）の仕組みと基本色
- 色名（color name）の一覧と特徴
- JavaScriptからCSSの色を変更する方法
- 初心者がつまずきやすいポイント
JavaScriptでは、HTML/CSS と同じように複数の方法で色を指定できます。
特に次の2つがよく使われます。
- 16進数（#rrggbb）で指定する方法
- 色名（red、blue など）で指定する方法
この記事では、それぞれの指定方法と、JavaScriptからCSSの色を変更する方法を初心者向けにわかりやすく解説します。
#rrggbb（16進数）で指定する
# に続けて、赤（r）、緑（g）、青（b）の値を 00〜ff の16進数6桁 で表します。
RGB の各値は 0〜255 を 16進数に変換したものです。
例：
- 黒：
#000000 - 白：
#ffffff - 赤：
#ff0000
基本的な16色は以下の表を参考にしてください。
色名（色の名前）で指定する
色名を直接指定する方法です。
大文字・小文字は区別されません（例：Red も red も同じ）。
HTML4.01 では基本16色が定義されています。
| red | #ff0000 | navy | #000080 | green | #008000 | black | #000000 |
| fuchsia | #ff00ff | blue | #0000ff | lime | #00ff00 | gray | #808080 |
| purple | #800080 | aqua | #00ffff | olive | #808000 | silver | #c0c0c0 |
| maroon | #800000 | teal | #008080 | yellow | #ffff00 | white | #ffffff |
JavaScriptでCSSの色を変更する
JavaScriptでは、CSSのスタイルを操作して色を変更できます。
以下は、midashi という要素の文字色を赤に設定する例です。
midashi.style.color = "#ff0000";
midashi.style.color = "#f00";
midashi.style.color = "rgb(100%,0%,0%)";
midashi.style.color = "rgb(255,0,0)";
midashi.style.color = "red";
CSS2.1 では、HTML4.01 の基本16色に orange（#ffa500） が追加され、合計17色になっています。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
色指定は JavaScript の基礎の一部であり、書籍ではこれらの基礎を体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
色指定・スタイル操作など、この記事で扱った基礎を実際に動くサンプルとともに理解できます。
この本で解決できること：
- JavaScriptの基本文法をやさしく理解できる
- 手を動かしながら学べるため、挫折しにくい
- 「まず動くものを作ってみたい」が実現できる
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
初心者がつまずきやすいポイントを丁寧に解説しており、色指定・スタイル操作の理解をさらに深められます。
この本で解決できること：
- JavaScriptの基礎を体系的に学び直せる
- 実務で使えるレベルの基礎力が身につく
- 現代的なコードの書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
色指定は JavaScript の基礎ですが、実際に手を動かして学ぶと理解が一気に深まります。
Udemy の動画講座では、画面の動きを見ながら学べるため、初心者でもスムーズに理解できます。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
色指定・スタイル操作など、この記事で扱った内容を実際のコード操作とともに理解できます。
この講座で解決できること：
- JavaScriptの基本文法を体系的に理解できる
- スタイル操作やDOM操作の基礎が身につく
- 初心者がつまずきやすいポイントを動画で理解できる
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
JavaScriptの基礎〜応用まで幅広く学べる講座です。
色指定だけでなく、DOM操作・イベント処理・非同期処理までカバーしており、次のステップに進みたい方に最適です。
この講座で解決できること：
- JavaScriptの基礎〜応用を体系的に理解できる
- 現代的なコードの書き方が身につく
- 実務で必要な知識をまとめて習得できる
体系的に学びたい方へ（スクールという選択肢）
色指定のような基礎は理解できても、DOM操作・イベント処理・非同期処理に進むと、独学では急に難しく感じることがあります。
こうした段階で「質問できる環境」があると、理解スピードが大きく変わります。
独学でつまずきやすいポイント
- コードの意図が理解できない
- イベント処理や非同期処理で混乱しやすい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。
「効率よく学びたい」「質問しながら進めたい」という方に向いています。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成してくれる
- 独学でつまずきやすい部分を事前に教えてくれる
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
色指定に関するよくある質問（FAQ）
16進数と色名はどちらを使うべき？
プロジェクトのルールに合わせればOKです。厳密な色を指定したい場合は16進数が向いています。
#fff と #ffffff の違いは？
どちらも白を表します。#fff は省略表記で、#ffffff と同じ意味です。
JavaScriptで背景色を変えるには？
element.style.backgroundColor = "red"; のように指定します。
rgb と rgba の違いは？
rgba は透明度（alpha値）を指定できます。例：rgba(255,0,0,0.5)
まとめ｜JavaScriptの色指定はCSSと連携して理解しよう
JavaScriptで色を指定する方法は、16進数・色名・CSS操作など複数あります。
特に、CSSと組み合わせて動的に色を変更できる点は、Web制作において非常に便利です。
まずは基本16色や16進数の仕組みを理解し、実際にコードを書きながら試してみるのがおすすめです。
