CSSを学んでいて、レイアウトの組み方は見えてきたものの、なぜだかいい感じに仕上がらないと悩んでいる方。
一度ここで色の表現方法を総復習してみませんか。
[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]
【CSS初心者】色の表現方法をまとめてみた
基本
まずは単純に色キーワードを使った表現から入ります。
CSSでは様々な色キーワードが定義されています。
馴染みがあるのはこんな感じですね
「background: black;」や「background: red;」とした例ですね
この他にも色キーワードは色々とあります。
これらはほんの一例ですが、色キーワードだけでもバラエティに富んだ設定が可能です
RGBAによる設定
次に、RGBAと呼ばれる色表現の方法の説明に入ります。
Red、Green、Blue、Alphaの頭文字をとってRGBAと呼ばれています。
Alphaは透明度を意味します
赤、緑、青、を混ぜ合わせて様々な色を表現する仕組みですね。
具体的な色設定の方法ですが、
- RGBAのRGBについては0から255の数値で表し、
- Aについては0から1の数値で表します
例えば、「color: rgba(0, 0, 255, 1);」とすれば、（ ）内の数値がRGBAの順に相当し、この場合はbの数値だけがMaxの255となっています。
透明度のa＝1は「透明度無し」です
従ってこの場合は「color: blue;」と同じ指定ということになりますね。
なお、透明度の指定が無い場合は、つまり透明度が「1」の場合は、aを省略することができます。
その場合、「RGB」、と呼び方も最後の「A」が省略されます。
そうすると、先ほどの例だと「color: rgb(0, 0, 255,);」という記述でOKになります。
black なら「color: rgb(0, 0, 0);」、 white なら「color: rgb(255, 255, 255);」、 aquamarine なら「color: rgb(127, 255, 212);」といった感じです
これらの数値を詳細に組み合わせることで、RGBAを使うと、色キーワードによる指定よりも、より一層細かい色表現が可能になります。
16進数、カラーコード
RGBは16進数と呼ばれる表現方法で表すことも多いです。
カラーコードとかウェブカラーと呼ばれることもあります
具体的には、RGBの数値が0なら00、最大数値255ならffで表現します。
例えば、RGBで白を表すには、「255, 255, 255」でしたね。
これを16進数に変えると、最初に「#」を付けて、「#ffffff」と表現できます。
さらに、同じ数値が2個連続する場合は1個に省略できるので、「#fff」と表現しても同じく白を表すことになります。
黒なら、RGBでは「0, 0, 0」なので、16進数では「#000」、
赤は、RGBで「255, 0,0」なので、16進数では「#f00」となります。
やや細かいと思われるかもしれませんが、慣れるとこれらの記号の並びを見るだけで「赤っぽい感じだな」とか「青っぽい設定だな」とすぐにわかるようになります。
また、細かく記憶する必要もなく、実際はデザインツール的なものを使って処理することがほとんどですし、そうでなくても、カラーピッカーなどで瞬時にわかります。
ですので、細かいところまで覚えていなくても困ることはありません
HSLAによる設定
次にHSLAによる設定についてみていきます。
記述の仕方は次のとおりです。
- HはHueの頭文字で「色相」を意味し、0〜360の数値で設定します。
- SはSaturationのことで「彩度」を意味し、%で設定します。
- LのLightnessは「明度」で、%で設定します。
- AのAlphaは「透明度」で、0〜1の数値で設定します。
なお、透明度が「1」の場合は省略することができるので、以下のように記述しても同じことになります。
HSLAによる色表現は、初心者にとっては統一感を持たせることができるので大変便利です。
例えば、色相と彩度は固定して、明度だけを変化させると以下のようになります。
グラデーションの仕組みですね
同じように、色相だけを変化させて、彩度と明度を固定してみます。
トーンが揃います。この360度表示が「色相環」ですね。
今度は、彩度を変化させて、色相と明度は固定してみます。
鮮やかさの度合いです
色キーワードやRGBAと違って、一定の統一感を持って色表示をしたい場合には、HSLAで調整してみることがおすすめです。
透明度について
RGBAやHSLAでは、透明度を0〜1で設定できますが、「opacity」というプロパティでも設定できます。
color要素全体に透明度を当てられるので、どちらかというと透明度はopacityで一括して設定することの方が多いような気がします。
例えば、
p {
color: hsl(60, 100%, 80%, 0.8);
background: hsl(60, 100%, 20%, 0.8);
}
とするのではなく、
p {
color: hsl(60, 100%, 80%);
background: hsl(60, 100%, 20%);
opacity: 0.8;
}
といった形です。
「opacity」は「img」要素（画像）にも当てられます
まとめ
以上、CSSにおける色表現方法の基本をまとめてみました。
「変数」を使うと、より便利にスタイル調整をすることができます。
興味があれば以下の記事も参考にしてみてください。
皆さんのお役に立てれば幸いです！
自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！
