色と背景

導入

色は Web デザインの基本です。文字色・背景色を指定して、ページに表情を付けましょう。

説明

• color … 文字の色
• background-color … 背景の色
• 色の指定 … 色名（red）／16進数（#ff0000）／rgb(255,0,0)

<p class="box">色のついた箱</p>

<style>
  .box {
    color: white;
    background-color: #2563eb;
  }
</style>

#2563eb のような16進数は、赤・緑・青の強さを2桁ずつで表す書き方です。色名より細かく色を指定できます。

やってみよう

上の例を打ち込み、青い背景に白い文字の箱が出ることを確かめましょう。background-color の値を #dc2626 などに変えて、色の変化を観察してください。

演習

class="alert" の要素に、背景色 yellow を指定する CSS を書いてください。