CSS基本講座2 色や背景

こんにちは！
今回は、CSSを使った 「色」と「背景」 に関するスタイルの付け方を解説します！

Webページの見た目を決める中でも、「色」はとても大切です。
文字の色や背景色を変えるだけで、印象はぐっと変わります！

CSS基本講座2 色や背景

色を変える color プロパティ

📌 使いどころ
文字の色を変更したいときに使います。

📖 書き方

セレクタ {
  color: 色の値;
}

💡 例：文字を赤くする

色の指定方法

上の例では、redのようにシンプルに色名で指定をしましたが、実は色の指定方法にはいくつか種類があります。

色の指定方法	書き方例	特徴
色名	red, blue, black	わかりやすい、初心者向け
16進数	#ff0000, #00ff00	デザインツールとの連携に便利
RGB関数	rgb(255, 0, 0)	赤・緑・青を数値で指定できる
RGBA関数	rgba(255, 0, 0, 0.5)	透明度（アルファ）も指定可能

結構色々ありますよね...

とは言っても、最初のうちはあまり難しく考えず、グーグルなどで「HTML カラーコード」と検索すると以下のようなサイトがヒットしますので、指定したい色のカラーコードをコピペしてあげればOKです。
原色大辞典

開発チームの中では、色は「16進数で指定する」や「RGB関数」で指定するなどのルールが決まっていることもあるので、その際はルールに従いましょう。

背景色を変える background-color

📌 使いどころ
要素の背景に色をつけたいときに使います。

📖 書き方

セレクタ {
  background-color: 色の値;
}

💡 例：見出しの背景を黄色にする

背景画像を設定する background-image

📌 使いどころ
画像を背景として表示したいときに使います。

📖 書き方

セレクタ {
  background-image: url("画像のURL");
}

まとめ

プロパティ	内容	よく使う値の例
color	文字の色を指定する	red, #333, rgb(0,0,0)
background-color	背景色を指定する	yellow, #f0f0f0
background-image	背景に画像を設定する	url("画像のURL")

CSSで色や背景を指定できるようになると、
Webページに自分らしいデザインを取り入れる第一歩になります！

最初はシンプルな色名からでもOKです！
少しずつ「16進数」や「背景画像」などにも挑戦してみてくださいね。