こんにちは朱夏です。
今回は、背景やテキストに色を付ける方法をまとめてみました。
テキストや背景の色を指定する時、どの数値をいじったらどんな色になるか良く解らない。
基本的な部分ですが、躓きやすいポイントだと思います。
私も最初に手間取った記憶があります。
そんな過去の私が迷わない様に記事を書いてみます。
それではいってみましょう。
色を付ける時のプロパティ
色を指定する3つの方法
1.10進数指定(rgb)
2.16進数指定(カラーコード)
3.カラーネーム指定
あとがき
色を付ける時のプロパティ
色を付けるための基本的なプロパティは2つです。
- 文字に色を付ける「color」プロパティ
- 背景に色を付ける「background-color」プロパティ
使用したサンプルはこちらです。
See the Pen
poJGjvV by 朱夏 (@syunatsu1)
on CodePen.
プロパティの書き方は以下になります。
color: 指定の色;
background-color: 指定の色;
次は「色の指定」の部分をまとめていきます。
色を指定する3つの方法
色を指定するには3つの方法があります。
- 10進数指定(rgb)
- 16進数指定(カラーコード)
- カラーネーム指定
一つずつ書き方を解説したいと思います。
1.10進数指定(rgb)
10進数で指定する方法は、俗にいうRGBで指定する方法です。
コードの書き方はこんな感じになります。
以下のサンプルはテキストに色を付ける場合でやっていきます。
このサンプルだとテキストの色は白色になります。
赤、緑、青はそれぞれ0～255で指定することができます。
3つの中では自由度と解りやすさを兼ね備えた指定方法かと思います。
以下にカラーサンプルをいくつか用意しました。
See the Pen
XWbOmxW by 朱夏 (@syunatsu1)
on CodePen.
2.16進数指定(カラーコード)
RGBで指定した10進数を16進数に変換したものです。
これをカラーコードと呼びます。
カラーコードは10進数で指定するよりも少ない文字数で同じ色を表現する事が出来るので便利です。
コードの書き方はこんな感じです。
10進数と同じくテキストに色を付ける場合のサンプルです。
今回も白色を指定しました。
16進数で指定する場合、#の後ろの2桁ずつが赤、緑、青に対応しています。
10進数と同じカラーパターンでサンプルを作りました。
比較してイメージを掴んでもらえればと思います。
See the Pen
PoqVPMe by 朱夏 (@syunatsu1)
on CodePen.
3.カラーネーム指定
redやgreenなど、色の名前を使って指定する方法です。
予め準備された色の名前で指定できるので、解りやすい反面、細かい色の調節は出来ない指定方法になります。
書き方は以下の様な感じです。
サンプルも前２つと同じ色のパターンで作ってみました。
See the Pen
zYGerrq by 朱夏 (@syunatsu1)
on CodePen.
あとがき
というわけで今回は、テキストや背景に色を指定する方法をまとめてみました。
今回のまとめはこちら。
- テキストの色は「color」プロパティ
- 背景の色は「backgroundo-color」プロパティ
- 色の指定方法は3種類
因みに、カラーコードには「#fff」といった省略版の指定方法があります。
これは「#ffffff」と同じ意味です。
最後に、色の指定方法はどれか一つに統一しておくことをお勧めします。
色の指定方法がばらばらだと、メンテナス性が悪くなるからです。
色を変更するのに手間取ったり、微妙な色の違いに悩まされたりすることが良くあります。
今回は以上です。
次回もよろしくお願いします。
