現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

DOM / Document(ページ操作)

【JavaScript入門】document.bgColorとは?背景色の取得・変更方法と注意点を初心者向けに解説

投稿日:2019年4月28日 更新日:

JavaScriptのdocument.bgColorとは?背景色の取得・変更方法を初心者向けに解説

document.bgColor は、HTML ドキュメント全体の背景色を取得・変更するためのプロパティです。
現在ではあまり使われませんが、JavaScript の基礎を理解するうえで知っておくと役立ちます。



document.bgColorとは?

document.bgColor は、ページ全体の背景色(background color)を参照・設定するためのプロパティです。

document.bgColor = “darkblue”;
document.bgColor = “#ffcc00”;
bgCol = document.bgColor;

指定できる色の形式:

  • 色名(例:"darkblue""red"
  • 16進数カラーコード(例:"#ffcc00"
  • RGB値(例:"rgb(0,128,255)")※一部ブラウザでは非対応

ユーザーの選択やアクセス時間に応じて背景色を変えるなど、簡単な演出に利用できます。



使用例

例1:背景色をダークブルーに変更する

document.bgColor = “darkblue”;

→ ページ全体の背景色がダークブルーになります。

例2:現在の背景色を取得する

bgCol = document.bgColor;

→ 現在設定されている背景色が変数 bgCol に代入されます。

背景色(background color)とは?

背景色は、文字色(前景色)と対になる概念です。

  • 前景色(foreground color)=文字色
  • 背景色(background color)=ページの背景色

bgColorbackground color の略です。

現代では非推奨のプロパティ

document.bgColor は古い仕様で、現在の Web 開発ではほとんど使用されません。

代わりに、CSS を使って背景色を変更するのが一般的です。

document.body.style.backgroundColor = “darkblue”;

→ こちらの方が現代的で推奨される方法です。

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • 紙の本でじっくり読み込みたい
  • 体系的にまとまった教材で学びたい
  • ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

いちばんやさしい JavaScript の教本

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

この本で解決できること:

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

いちばんやさしい JavaScript の教本

確かな力が身につくJavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

この本で解決できること:

  • JavaScriptの基礎を体系的に学び直せる
  • 初心者がつまずきやすい部分を重点的に理解できる
  • 実務で使えるレベルの基礎力を身につけられる

確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • エラーの原因が分からず、調べても解決できない
  • 学習の順番に自信が持てない
  • モチベーションが続かず、途中で止まってしまう
  • 実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

  • あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
  • 独学で詰まりやすいポイントを事前に教えてくれる
  • 学習方法の改善点をプロがアドバイスしてくれる
  • エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

DMM WEBCAMP 学習コース(無料相談はこちら)



まとめ

  • document.bgColor はページ全体の背景色を取得・変更するプロパティ
  • 色名・16進数カラーコードなどで指定できる
  • background color(背景色)の略
  • 現在は CSS を使う方法が推奨される

関連記事

【JavaScript入門】document.writeとdocument.writelnの使い方|違い・注意点・HTML出力の仕組みを解説

JavaScriptのdocument.writeとdocument.writelnとは?使い方・違い・注意点を初心者向けに解説 document.write() と document.writeln …

【JavaScript入門】document.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説

JavaScriptのdocument.applets・embeds・pluginsとは?アプレットやプラグイン数の取得方法を解説 document.applets、document.embeds、d …

【JavaScript入門】document.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説

JavaScriptのdocument.getSelectionとは?選択中の文字列を取得する方法を初心者向けに解説 document.getSelection() は、ユーザーがマウスやキーボード操 …

【JavaScript入門】linkColor・alinkColor・vlinkColorとは?リンク色の変更方法と注意点を初心者向けに解説

JavaScriptのlinkColor・alinkColor・vlinkColorとは?リンク色の変更方法を初心者向けに解説 document.linkColor、document.alinkCol …

【JavaScript入門】documentとは?HTMLを操作する基本オブジェクトを初心者向けに解説

JavaScriptのdocumentとは?役割・使い方・基本例を初心者向けにわかりやすく解説 document は、JavaScript で HTML ページを操作するための最も重要なオブジェクトで …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-DOM / Document(ページ操作)

執筆者: