こんにちは、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プロパティと同じです。
例えば次のように使います。
🎉まとめ
今回は色の指定方法や文字、背景、枠線の色を変えるプロパティについて学びました。皆さんは今回学んだ内容によって、さまざまな部分に色をつけることができるようになりました!素晴らしいです👏
デザインにおいて色は非常に重要な要素です。今回学んだことをもとに、素敵な色を持つウェブサイトやアプリケーションを作成してみてください!