CSSで文字や要素に色を付ける・変更する方法をわかりやすく解説

こんにちは、Mochiです。

CSSで要素に色をつけるにはどうしたらいいんだろう？CSSで色を変えるプロパティを忘れてしまった…🤔

そんな方に向けて、CSSで文字や要素の色をつけたり、変更する方法をわかりやすく解説します。学んでいきましょう！

🎨CSSの色の指定方法

まずCSSで色を指定する方法は複数あります。それぞれの仕組みとどれを使うべきかを解説します。

RGB値

RGB値とは、赤、緑、青を組み合わせた色の表現モデルです。0〜255までの数値で色の強さを指定し、組み合わせることで様々な色を表現します。数値が大きいほど色が強いです。

色ごとにこれらの値を覚える必要はありません。カラーピッカーと呼ばれるような色を選択するツールを使うことで、値は勝手に決まります。VSCodeというエディターでは以下のようなカラーピッカーがあります。


CSSでRGB値を指定する書き方は

rgb(<red>, <green>, <blue>)

のように、赤、緑、青の数値を指定します。

RGBA

RGBAとは、RGBに透明度（alpha: アルファ）を加えた色の表現モデルです。RGB値に加えて、透明度を0〜1で表します。値が小さいほど透明度が上がります。

CSSでRGB値を指定する書き方は

rgba(<red>, <green>, <blue>, <alpha>)

のように、赤、緑、青、透明度の数値を指定します。

カラーコード

カラーコードとは、0〜ffまでの値で色の強さを指定する色の表現方法です。ffという値は16進数法の表現で、私たちが普段使う10進数法の255を表します。1~9の数字に加えてa(10)、b(11)、c(12)、d(13)、e(14)、f(15)を使うことで、本来3桁の255までの数字を2桁で表すことができます。とりあえず「255を短くしたやつ」という認識を持っておけば大丈夫です！

CSSでカラーコードの書き方は

#00ff00

のように赤、緑、青の順で2桁ずつ値を指定します。

また、特徴として白や黒、グレーといった無彩色は同じ数値が赤緑青に3つ並びます。そして、2桁が同じ値の場合は1桁に省略できます。

RGB値とRGBA、カラーコードについて学びました。このうちどれを使うべきかについて、通常の色の時は一般的によく使われるカラーコードを使うと良いでしょう。また、透明度を扱いたい場合にはRGBAを使うと良いです。

では学んだカラーコードを使って、実際に色をつけるプロパティについて学んでいきましょう！

✍️色をつけるプロパティの種類と使い方

color：文字の色

colorプロパティは文字の色をつけることができます。

colorプロパティの使い方は

<selector> {color: <value>};

のようになります。
値<value>には以下のいずれかを指定します。

• キーワード：主要な色の名前
  • 例：red, blue, green
• カラーコード
  • 例：#ff0000、#ddd
• RGB値
  • rgb(<red>, <green>, <blue>)
• RGBA
  • rgba(<red>, <green>, <blue>, <alpha>)

例えば次のように使います。

background-color：背景の色

background-colorプロパティは背景の色をつけることができます。

background-colorプロパティの使い方は

<selector> {background-color: <value>};

のようになります。
値<value>には以下のいずれかを指定します。

• キーワード：主要な色の名前
  • 例：red, blue, green
• カラーコード
  • 例：#ff0000、#ddd
• RGB値
  • rgb(<red>, <green>, <blue>)
• RGBA
  • rgba(<red>, <green>, <blue>, <alpha>)

例えば次のように使います。

border：要素の境界線

borderプロパティは要素の境界線を作成し、色をつけることができます。

borderプロパティの使い方は

<selector> {border: <width> <type> <color>};

のようになります。

値(value)には太さ、タイプ、色を指定します。

• <width>：線の太さ
  • 値
    • 単位：px, em, remなど
  • キーワード
    • thin：細い
    • medium：通常
    • thick：太い
• <type>：枠線のタイプ
  • none：なし
  • solid：実線
  • dashed：波線
  • dotted：点線
  • double：二重線
• <color>：枠線の色
  • キーワード
  • カラーコード
  • RGB値 / RGBA

例えば次のように使います。

border-direction

borderプロパティは、左右上下の境界線の位置ごとに、別々の色や形式を指定することもできます。

• 種類
  • border-top：境界線の上
  • border-bottom：境界線の下
  • border-left：境界線の左
  • border-right：境界線の右

指定できる値(value)はborderプロパティと同じです。

例えば次のように使います。

🎉まとめ

今回は色の指定方法や文字、背景、枠線の色を変えるプロパティについて学びました。皆さんは今回学んだ内容によって、さまざまな部分に色をつけることができるようになりました！素晴らしいです👏

デザインにおいて色は非常に重要な要素です。今回学んだことをもとに、素敵な色を持つウェブサイトやアプリケーションを作成してみてください！