MENU

初心者でもわかるホームページの背景色設定完全ガイド

大規模情報サイト運営
ホームページ 背景色
2025/11/29
目次

はじめに

本ドキュメントの目的

このドキュメントは、ホームページの背景色設定に関する基本から応用までを分かりやすくまとめた入門書です。CSSのbackground-colorの使い方、グラデーションや透明度の応用、WordPressでの操作方法まで順を追って学べます。具体的なコード例や操作手順を多く載せていますので、すぐに実践できます。

対象読者

  • ホームページの見た目を整えたい初心者の方
  • HTMLやCSSの基本は知っているが背景設定に自信がない方
  • WordPressで簡単に背景を変えたい方

本書の構成と進め方

各章は実際に手を動かしながら学べるように作りました。第2章でCSSの基礎、第3章でWordPress、第4章でHTMLとCSSの使い分け、第5章でbackground-colorの細かな指定を扱います。まずは第2章の簡単な例から試すことをおすすめします。

準備するもの

テキストエディタ（メモ帳やVS Code）、ブラウザ、WordPressを使う場合は管理画面へのアクセスがあれば始められます。

【初心者向け】CSSでホームページの背景を完璧に設定する方法

基本は background-color

背景を単色で塗るには background-color を使います。指定方法は複数あり、用途に合わせて選べます。

例：

body {
  background-color: #f8f8f8; /* 16進数 */
  /* または */
  /* background-color: rgb(255,255,255); */
  /* background-color: rgba(0,0,0,0.5); 透明度あり */
  /* background-color: hsl(210,50%,95%); 色相で指定 */
}

rgba() は最後の値で透明度を指定できます。透過を使うとテキストや画像との重なりをやわらげられます。

背景画像を設定する

画像を背景にするには background-image を使います。繰り返しやサイズも合わせて指定します。

例：

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat; /* 繰り返さない */
  background-size: cover;       /* 画面に合わせて拡大縮小 */
  background-position: center;  /* 中央に配置 */
}

繰り返したい場合は repeat、横だけ繰り返すなら repeat-x を使います。

注意点とちょっとしたコツ

  • body 要素だけでなく html の高さも関係します。全画面に広げたいときは min-height:100vh を使うと安全です。
  • 背景色と背景画像は同時に使えます。画像が透明部分を持つ場合、下の色が見えます。
  • 複数の背景画像を重ねたいときはカンマ区切りで指定できます。

この章では基本の使い方を丁寧に説明しました。実際にコードを編集して表示を確認すると理解が早まります。

WordPressで簡単に背景色を設定・変更する方法

はじめに

WordPressでは管理画面から直感的に背景色を変更できます。初心者の方でも数ステップで反映できるため、まずはカスタマイザーを使う方法を説明します。

ダッシュボードからの設定手順

  1. WordPressにログインします。
  2. 左メニューの「外観」→「カスタマイズ」を選びます。
  3. カスタマイザーの中に「背景色」や「色」などの項目があれば選びます。
  4. カラーピッカーで色を選び、右側のプレビューで見た目を確認します。
  5. 問題なければ「公開」または「保存して公開」を押して反映します。

テーマによっては「背景色」項目が見つからない場合があります。その場合は次の方法をご利用ください。

カスタムCSSで細かく指定する方法

  1. 「外観」→「カスタマイズ」→「追加CSS」を開きます。
  2. 以下のように記述して保存します。
body {
  background-color: #f5f5f5;
}

透明度を使いたい場合はrgbaを使います。

body {
  background-color: rgba(255,255,255,0.8);
}

項目がない場合の対処

テーマに機能がないときは追加CSSを使うか、専用のプラグインで背景色を変更できます。プラグインは導入前に評価と更新状況を確認してください。

注意点

色を変えると文字やボタンの見え方が変わるため、コントラストを確認してください。特に文字色と背景色の組み合わせは見やすさを優先してください。

HTMLの背景色を変えるには？CSSとの使い分けと便利な指定

はじめに

HTMLだけでも背景を変えられますが、実務ではCSSを整理して使うと便利です。ここでは目的別に簡単な方法を例で示します。

ページ全体の背景

・bodyのstyle属性（簡単、テスト向け）

<body style="background-color: #f0f0f0;">
</body>

・head内のstyle（複数ページで共有しない小規模向け）

<head><style>body{background:#fff8e1;}</style></head>

部分的な背景（セクションやボックス）

のように要素にクラスを付けます。

<div class="box">内容</div>
<style>.box{background:#e6f7ff;padding:20px;}</style>

### 文字の背景を付ける
短い強調はspanで囲み、余白を作ると読みやすくなります。

<span style="background:#ffeb3b;padding:2px 6px;border-radius:3px;">注目</span>

### グラデーション背景
linear-gradient()で自然な移り変わりを作れます。

body{background:linear-gradient(180deg,#fff 0%,#cfe8ff 100%);}

### 透過色で重ねる（rgba）
rgba()で透過を指定すると重ね合わせができます。

.overlay{background:rgba(0,0,0,0.4);} /* 半透明の黒 */

### 実務上の使い分け
すぐ試したい時はinline、規模が大きい時は外部CSSにまとめると保守しやすいです。CSSファイルにまとめると全ページの変更が楽になります。

## CSSで背景色指定！background-colorの使い方

### 基本の書き方
background-colorは要素の背景色を指定します。記述はシンプルです。

.header { background-color: #3498db; }

この例は.header要素の背景を青にします。画面全体ではなく、その要素だけに適用されます。

### 色の指定方法（具体例）
– 16進数（Hex）: #RRGGBB や短縮形 #RGB
例: #ffcc00 または #fc0
– RGB: rgb(255, 204, 0)
– RGBA（透明度含む）: rgba(255,204,0,0.6)
– 色名: red, blue など（互換性は良いが細かい調整は不可）

### 透明度の扱い
背景だけを半透明にしたいときはRGBAを使います。opacityプロパティは要素全体（子要素含む）に影響しますので注意してください。

.box { background-color: rgba(0,0,0,0.5); }

### ページ全体の背景にするには
bodyやhtmlに設定すると画面全体に見えます。背景画像やグラデーションと組み合わせることも多いです。

### 注意点
background-colorは継承されません。要素ごとに指定するか、親要素に幅広く設定してください。色のコントラストを確認して可読性を保ちましょう。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
ホームページ 背景色
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次