HTML/CSS：色と背景

p の色が赤

color: #ff0000; と書く。# を忘れない。

<style>
  p {
    color: #ff0000;
  }
</style>

<p>赤い文字</p>

16進数は「赤・緑・青」を2桁ずつ。ff（255）が最大、00 が最小。実務では最も多く使われる書き方。

解答 == B

alpha（アルファ値）という。

B

0で完全な透明、1で不透明。0.5なら半透明になり、下の背景が透けて見える。

body と p の背景色が正しい

background-color で指定する。color（文字色）とは別のプロパティ。

<style>
  body {
    background-color: #f5f5f5;
  }

  p {
    background-color: white;
  }
</style>

<p>白い背景の段落</p>

全体を薄いグレー、要素を白にすると立体感が出る。カードデザインの基本になる配色。

<style>
  p {
    ____: yellow;
  }
</style>

<p>黄色い背景</p>

p の背景が黄色

「背景の色」を意味する16文字のプロパティ（ハイフン含む）。

background-color

color は文字色、background-color は背景色。名前が似ているので混同しないよう注意する。

解答 == B

2桁ずつ同じ数字が並んでいる場合、1桁ずつに縮められる。

B

ff-ff-ff が f-f-f に縮まる。#000000 も #000 と書ける。ただし #ff5500 のように揃っていない場合は短縮できない。

背景が rgba(0,0,0,0.6)、文字が白

background-color: rgba(0, 0, 0, 0.6); と color: white; を組み合わせる。

<style>
  .overlay {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
  }
</style>

<div class="overlay">半透明の上の文字</div>

rgba なら背景だけ透ける。文字は不透明のままなので、写真の上に載せても読める——画像のキャプションでよく使う手法。

<style>
  .faded {
    ____: 0.5;
  }
</style>

<div class="faded">薄くなる</div>

opacity が 0.5

「不透明度」を意味する7文字のプロパティ。

opacity

opacity は要素全体（中の文字も）を透明にする。背景だけ透かしたいなら rgba を使う。

解答 == B

opacity は中の文字も薄くしてしまう。

B

opacity だと文字まで薄くなって読めなくなる。rgba なら背景だけが透け、文字はくっきり残る。

p の色が rgb(0, 128, 0)

rgb(赤, 緑, 青) の順で0〜255の値を書く。

<style>
  p {
    color: rgb(0, 128, 0);
  }
</style>

<p>緑の文字</p>

rgb は数値で調整しやすい。「もう少し明るく」といった微調整のとき、16進数より直感的に扱える。

linear-gradient が適用されている

background: linear-gradient(to right, 色1, 色2); と書く。

<style>
  .hero {
    background: linear-gradient(to right, #0066cc, #00aaff);
  }
</style>

<div class="hero">グラデーション背景</div>

to right で左から右へ変化する。to bottom なら上から下、角度（45deg）でも指定できる。

body と card の色が正しい

全体を薄いグレー、カードを白にすると浮かんで見える。

<style>
  body {
    background-color: #f5f5f5;
  }

  .card {
    background-color: #ffffff;
    color: #333333;
  }
</style>

<div class="card">
  <p>カードの中身です。</p>
</div>

背景に差を付けるだけで階層が生まれる。枠線を使わなくても「ここがひとまとまり」と伝えられる。

2つのボタンの色が正しい

それぞれのクラスに背景色と文字色を指定する。

<style>
  .btn-primary {
    background-color: #0066cc;
    color: #ffffff;
  }

  .btn-danger {
    background-color: #cc0000;
    color: #ffffff;
  }
</style>

<button class="btn-primary">保存</button>
<button class="btn-danger">削除</button>

色で意味を伝えるのがボタンの役割。青は安全な操作、赤は取り消せない操作——この慣習は世界共通に近い。

aはrgba背景、bはopacity

どちらも薄い赤に見えるが、中の文字の見え方が違う。

<style>
  .a {
    background-color: rgba(255, 0, 0, 0.3);
  }

  .b {
    background-color: red;
    opacity: 0.3;
  }
</style>

<div class="a">rgba：文字ははっきり</div>
<div class="b">opacity：文字も薄い</div>

背景の色は似ていても、文字の見え方が違う。rgba は背景だけ、opacity は要素全体——用途に応じて選ぶ。

2番目だけ背景が違う

section:nth-of-type(even) にグレーを指定する。nth-child だと style タグも数に含まれてしまう。

<style>
  section {
    background-color: #ffffff;
  }

  section:nth-of-type(even) {
    background-color: #f5f5f5;
  }
</style>

<section><p>1つ目</p></section>
<section><p>2つ目</p></section>
<section><p>3つ目</p></section>

nth-of-type は「同じタグの中で何番目か」を数える。一方 nth-child は親の中の全要素を数えるため、style タグが1番目に入ると順番がずれる——実務でハマりやすい落とし穴。

グラデーションと白文字が正しい

linear-gradient(135deg, 色1, 色2) と color: white を組み合わせる。

<style>
  .hero {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
  }
</style>

<div class="hero">
  <h1>ようこそ</h1>
</div>

135deg は左上から右下への斜め。同系色でグラデーションを作ると、派手にならず上品な印象になる。

すべての色指定が正しい

#fff は #ffffff と同じ。rgba の4つ目は透明度。グラデーションは background プロパティで指定する。

<style>
  body {
    background-color: #f5f5f5;
    color: #333333;
  }

  .hero {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
  }

  .card {
    background-color: #ffffff;
  }

  .card h3 {
    color: #0066cc;
  }

  .note {
    background-color: rgba(255, 200, 0, 0.2);
  }

  .btn {
    background-color: #0066cc;
    color: #fff;
  }
</style>

<div class="hero">
  <h1>ゼロカラカフェ</h1>
</div>

<div class="card">
  <h3>本日のおすすめ</h3>
  <p>季節のパンケーキをご用意しています。</p>
</div>

<p class="note">※ 数量限定です</p>

<button class="btn">予約する</button>

このページは、色だけで情報の階層を作っている。背景のグレー、カードの白、ヒーローの濃紺——枠線を1本も引いていないのに、どこがひとまとまりか分かる。これが配色設計の力だ。

.note の rgba(255, 200, 0, 0.2) にも意図がある。透明度0.2の薄い黄色なので、背景がグレーでも白でも、そこに馴染んだ「注意書きの色」になる。もし不透明な黄色を使っていたら、背景から浮いて目立ちすぎていた。

#fff という3桁の書き方も覚えておきたい。#ffffff と完全に同じ意味で、実務でもよく見かける。ただし #0066cc のように数字が揃っていない色は短縮できない。

ここまでで「文字」と「色」が整った。しかしまだ、要素同士がぴったりくっついていて窮屈に見えるはずだ。次章では余白を学ぶ——デザインで最も重要でありながら、最も見落とされやすい要素を扱う。