継続は力なり＃４

2020年3月2日 00:00

色の指定方法

色の指定方法として「red・black・white」の様な色そのものの名前指定する
方法もあるが、他にもある

#ff0000 形式
記号「＃」に続けてREG(Red・Green・Blue)それぞれの値を、「２」桁ずつの16進数(計6桁)で指定する
例
RedのRGB値は10進数だと「RED＝255・Green＝０・Blue＝０」
ここでの255は2桁の16進数だと「ff」、０は「00」となる
よって、ここでの赤は「#ff0000」になる

この形式はWebページの色指定では一般的である
（グラフィック系ソフト・ツール→この形式を使われる）

#f00 形式
記号「＃」に続けてRGBそれぞれの値を「１」桁ずつの16進数(計3桁)で指定する
各桁の数字の直後に同じ数字をもう1つずつ追加した値に変換されて使用する
(そのまま色の値を使用されるのではない)
例
#123 →#112233

#f00 →#ff0000

この様に、
※6桁のRGBの各２桁がそれぞれ同じ数字になっている色だけないと使えない

rgb(255,0,0) 形式

RGBの各値を10進数で指定する
rgb(　)のカッコ内にRGB値をカンマで区切って順に入れるだけ

rgba(255,0,0,0.5)　形式

rgb(　)の形式に透明度を示す「alpha」(a)の値を追加した形式
grba(　)のカッコ内にRGB値に続けて透明度を指定
透明度は「０〜１」で表し、
０→完全に透明
１→完全に不透明

例
半透明の赤→rgba(255,0,0,0.5)

となる

色に関するプロバティ

colorプロバティ
テキストの色を指定できる
ここで指定する色を初期値するプロパティもある（テキストの影の色はこの値が初期値となる）
指定できる値は

・色
任意の文字色を指定

・trnsparent
文字色を透明化する

opacitiyプロバティ
背景を含む要素全体の透明度を指定
次の値が指定でき、初期値は１（不透明）となる

・実数
透明度を０.０（透明）〜１.０（不透明）の範囲の実数で指定

例

HTML

<body>
<h1>要素全体の透明度をopacityプロバティで指定している
</h1>
</body>

CSS

body {
 background-image: url(image/photo.jpg);
}
h1 {
  color: white;
  background-color: black;
  opacity: 0.5;
}