どうも!LSSです!!
今回は、CSSの様々な場面で出てくる「色の指定」について、書き方が何通りかあるものをまとめてみます。
- 1.色名(直感的にもっとも分かりやすい)
- 2.RGB形式 #で指定(HSLより短く書ける)
- 3.RGB形式 10進数で指定(16進数より分かりやすい?)
- 4.RGBA形式 #指定 透過つき
- 5.RGBA形式 10進数で指定 透過つき
- 6.HSL形式(Hはともかくとして、SとLは分かりやすいw)
- 7.HSLA形式 透過つき
- まとめ
1.色名(直感的にもっとも分かりやすい)
この文は赤色で表示されます。
<span style="color:red;">この文は赤色で表示されます。</span>
色の名前(英語)を直接書く指定です。
メリット
色の名前(英語)そのままなので、「ここどの色を指定してたんだっけ?」って時にもっとも分かりやすい指定ですね^^
デメリット
かなりの数の色名がありますが、微調整が効かない。
透過指定を付与する事もできず、そのまま表示するだけ。
2.RGB形式 #で指定(HSLより短く書ける)
この文は赤色で表示されます。
<span style="color:#ff0000;">この文は赤色で表示されます。</span>
この文は赤色で表示されます。
<span style="color:#f00;">この文は赤色で表示されます。</span>
#記号に続けて、6桁、または3桁の16進数を書いて指定します。
6桁の場合、赤2桁・緑2桁・青2桁という意味になり、#ff0000だと
「赤255(16進数ff)、緑0、青0」
の強さで混ぜ合わせた色、という事になります。
3桁の場合、赤1桁・緑1桁・青1桁という意味ですが、それぞれゾロ目で2桁指定したのと同じ事になります。
つまり、#f00 = #ff0000ですね^^
ちなみに、大文字小文字は問わないので、#FF0000でも同じ意味になります。
メリット
赤・緑・青の混合具合である事と、16進数の特徴が分かっていれば、
#ff0000のような極端な設定であれば「赤だけ最強=真っ赤って事だな」って察せますし、
#ff8888だと「緑・青が同じ割合で強められている…全色最強(#ffffff)は白なので、白に寄せた赤…ピンクだな!」
と察せるようになる…かも知れませんw
何より、少ない文字数で16,777,216色(約1677万色、256の3乗)を表現できるのが強みですね^^
デメリット
極端な場合を除いては、例えば#8a1f6bなど、どんな色になるのか想像がつかない、って事になります。
3.RGB形式 10進数で指定(16進数より分かりやすい?)
この文は赤色で表示されます。
<span style="color:rgb(255,0,0);">この文は赤色で表示されます。</span>
この文は赤色で表示されます。
<span style="color:rgb(100%,0%,0%);">この文は赤色で表示されます。</span>
#で指定と理屈は同じですが、扱い慣れない16進数ではなく、10進数で0~255の256段階の強さ、または0~100%を指定します。
※ちなみに、はてなブログのHTML編集画面に この形で書いた場合、勝手に#指定形式に修正されます^^;
メリット
#指定の場合に比べて、慣れない16進数より馴染みある10進数で指定できる点でハードルが下がりますね^^
デメリット
#指定のメリットだった「短く書ける」のが損なわれています。
4.RGBA形式 #指定 透過つき
この文は半透明の赤色で表示されます。
<span style="color:#ff000080;">この文は半透明の赤色で表示されます。</span>
#指定の6桁に加え、末尾にもう2桁「不透過度」を付与し、#FF000080のように書きます。
この末尾の2桁は「不透過度」を16進数で示したもので、
ffだと完全不透過(色がそのまま出ます)、
00だと完全透明(何も見えないw)
となります。
メリット
#での指定に慣れていれば、末尾に 00~ff を指定するだけで調節できます^^
デメリット
16進数なのであまり馴染みがないですよね^^;
ちなみにサンプルの「80」は中間(まんなかあたり)となります。
5.RGBA形式 10進数で指定 透過つき
この文は半透明の赤色で表示されます。
<span style="color:rgba(255,0,0,0.5);">この文は半透明の赤色で表示されます。</span>
この文は半透明の赤色で表示されます。
<span style="color:rgba(100%,0%,0%,0.5);">この文は半透明の赤色で表示されます。</span>
RGB形式10進数指定の冒頭の rgb を rgba に変えた上で、最後に , (カンマ)で区切って 0~1 の間で「不透過度」を指定します(小数が使用できます)。
メリット
10進数なので、16進数より分かりやすいですね^^
デメリット
透過指定をつけないrgb( )の時と同様、文字数はちょっと長くなります。
6.HSL形式(Hはともかくとして、SとLは分かりやすいw)
この文は赤色で表示されます。
<span style="color:hsl(0,100%,50%);">この文は赤色で表示されます。</span>
H(色相) S(彩度) L(明度)を指定します。
- ひとつめの数値は 0~360 の間で指定し、色の種類(赤とか青とか黄とか)はここで指定します。
- ふたつめの数値は 0~100%で指定し、彩度(鮮やかさ)を指定する事になります。
この数値を下げると色がくすんでいき、0%ではモノクロになります。 - みっつめの数値も 0~100%で指定し、明度(明るさ)を指定する事になります。ここを 0% にすると、色相・彩度がどんな値であっても黒に、100%にすると白になります。
メリット
彩度・明度が分かりやすく「くすんだ色にしたい・鮮やかにしたい」「このまま色を明るくしたい・暗くしたい」時の調整はしやすいです^^
デメリット
色相が分かりづらい^^;
0~360とみていくと、徐々に変化していく様子が分かりますが、
「青ってどのへんだっけ?」
みたいな時に探す事になります。
7.HSLA形式 透過つき
この文は半透明の赤色で表示されます。
<span style="color:hsla(0,100%,50%,0.5);">この文は半透明の赤色で表示されます。</span>
RGB→RGBAになったのと同様に、
HSL形式の冒頭の hsl をhsla に変えた上で、最後に , (カンマ)で区切って 0~1 の間で「不透過度」を指定します(小数が使用できます)。
メリット・デメリットはHSL形式と同様、ですね。
まとめ
ざっくり分けると、4種(色名・RGB形式2種類・HSL形式)+透過3種(RGBA形式2種類・HSLA形式)の合計7種類の指定方法について書きました。
個人的にはRGB形式が好きですw
最後にまとめとして、それぞれの形式のコードを一気に書いておきます。
コード
<span style="color:red;">色名</span>
<span style="color:#ff0000;">RGB 16進数6桁</span>
<span style="color:#f00;">RGB 16進数3桁</span>
<span style="color:rgb(255,0,0);">RGB 10進数</span>
<span style="color:rgb(100%,0%,0%);">RGB 10進数%指定</span>
<span style="color:#ff000080;">RGB 16進数 透過つき</span>
<span style="color:rgba(255,0,0,0.5);">RGB 10進数 透過つき</span>
<span style="color:rgba(100%,0%,0%,0.5);">RGB 10進数%指定 透過つき</span>
<span style="color:hsl(0,100%,50%);">HSL</span>
<span style="color:hsla(0,100%,50%,0.5);">HSL 透過つき</span>
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^