色を付けてみよう

2020.01

ここを目立たせたい、背景に色を付けたいというときがWEBサイトを作成していると出てくるかと思います。

この記事ではCSSで文字の色や背景色を指定する方法を記載します。

背景色を付ける

背景に色を付ける場合はbackground-colorプロパティを使用します。

.haikei{
  background-color:#aaa;
}

background-colorプロパティの値にはカラーコードやカラーネームを指定します。こちらに関しては後程説明しますが、値を変えることによって付けたい色を指定することができます。

背景色を指定

カラーピッカーでサンプルの色を変えてみよう（background-color）

このようにbackground-colorプロパティを使用することで色を変えることができます。また、省略型のbackgroundプロパティでも同様のことが可能です。

.haikei{
  background:#aaa;
}

背景の次は枠線の色を変えてみましょう。枠線の色を変える場合は、border-colorプロパティを使用します。指定の仕方はbackground-colorプロパティと同じです。

.border{
  border-width:3px;
  border-style:solid;
  border-color:#aaa;
}

枠線の色を指定

カラーピッカーでサンプルの色を変えてみよう（background-color）

文字の色はcolorプロパティを使用します。

.moji{
  color:#aaa;
}

文字の色を指定

カラーピッカーでサンプルの色を変えてみよう（background-color）

HTMLやCSSでは色を指定するときにカラーコードやカラーネームといった値で指定します。

カラーコードとはコンピュータで色を表示するにあたりRGBを16進法で表記したものです。シャープ（＃）から始まり0~9、A~Fの文字を使って6桁で記載します。先頭の2文字でレッド（R）、次の2文字でグリーン（G）、最後の2文字でブルー（B）を表しています。

無理に覚える必要はありません。原色大辞典を参考にするとコピペで済みます。

また、RGBのほうが簡単という方は、RGBでも記載をすることが可能です。

.haikei{
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0);
}

上記のようにrgb()というのを用いて記載することができます。また、透過したい場合はrgba()を使用して、第4引数に０~1の数字を当ててあげる可能です。

その名の通り文字の色の名前で指定することができます。

background-color:green;
background-color:coral;

こちらも上記で紹介した原色大辞典を使用すると一目瞭然です。