要素の背景色を指定するプロパティです。色名、16進数カラーコード、RGB、RGBA、HSLなど様々な色形式で指定可能です。透明度も指定でき、デザインの基礎となる重要なプロパティです。
background-color: <color> | transparent| bg-white | background-color: #fff |
| bg-red-500 | background-color: パレットのred-500 |
| bg-transparent | background-color: transparent |
一般形: bg-{color}-{shade}（/nで透明度）
任意値: bg-[#fdfaf3]
.element {
background-color: #3b82f6;
}background-color: #f8fafc;薄いグレーの背景色を設定
background-color: rgba(59, 130, 246, 0.1);透明度10%の青い背景色
透明度を使うことで、重なった要素との調和を図れる。
backgroundショートハンドは指定しなかった項目をすべて初期値にリセットします。AIがbackground: url(...)と別の場所のbackground-colorを混在させると、順序次第で色が消える事故が起きます。ショートハンドと個別プロパティの混在は方針を決めて統一するのが安全です。
backgroundショートハンドとbackground-colorの混在で背景色が消えるバグを調査して、書き方を統一して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。