CSS【colors】～色と透明度

今回は、CSSでの色の指定と透明度の指定についてまとめたいと思います。
CSSで色指定を行う際の基本的な指定方法についてはHTML 【 色指定 】 ～ colorの指定方法をご覧ください。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．色指定の値

色指定を行う際に使用する値には、次のような種類があります。

新しい指定方法を使う場合は、古いブラウザの対策を考えた方が親切ですが、基本的にどの方法で指定してもOKです。

▲目次へ戻る

２．色指定を行うプロパティ

color、background、border、outline

●color、background-color、border-color

colorプロパティ、background-colorプロパティ、border-colorプロパティは、Webサイトを作る際によく使います。

それぞれ決められたプロパティで色を指定します。

　
ソースは次の通りです。

<!-- CSSファイル -->

div#sample {
    color:chocolate;
    background-color:#FFCCCC;
    border-style:solid;
    border-color:hsl(262,29%,59%);}

<!-- HTMLファイル -->
<div id="sample">
    このテキスト領域は、テキストカラーをchocolate、背景を#FFCCCC、ボーダーカラーをhsl(262,29%,59%)で指定しています。
</div>

上のCSSソースを、CSSのショートハンドを使って書くこともできます。

div#sample {
    color:chocolate;
    background:#FFCCCC;
    border:solid hsl(262,29%,59%);}

backgroundとborderのショートハンドを使って書いています。
このように、ショートハンドは、値を半角スペースで区切って、まとめて指定することができます。
　
●outline

outlineプロパティは、borderプロパティに似ています。
フォームの部品（input要素のテキストフィールド、ラジオボタン等）のフォーカス時に付く枠線や、a要素のa:visited、a:focusの時に付く点線の枠がoutlineプロパティです。
これらのoutlineプロパティはブラウザのデフォルトスタイルで設定されています。

ブラウザのデフォルト設定をリセットしたい時には、outlineプロパティを編集します。
outlineプロパティは、上下左右の線を全部一括で指定します。この点が、borderプロパティとの違いです。

ソースは次の通りです。

<!-- CSSファイル -->
a.sample:hover {outline:dotted 2px rgb(0,102,255); text-decoration:none;}
<!-- HTMLファイル -->

<div">
    <a href="#" class="sample">こちらにマウスオーバーすると、outlineが付きます。</a>
</div>

outlineプロパティは、ショートハンドを使っています。
outline-style、outline-width、outline-color の値を、半角スペースで区切って、まとめて指定しています。
　
●グラデーションやシャドウ

CSS3から使えるようになったグラデーションやシャドウにも、色指定の値を使います。
特にグラデーションでは、rgbaやhslaを使うと、透明度のグラデーションもできます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    padding:1em;
    border:solid 1px #ccc;
    background: url(img.jpg) repeat;}
div#sample p {
    margin:0;
    padding:2em;
    color:#fff;
    font-weight:bold;
    text-align:center;
    background: linear-gradient(to right, hsla(330, 100%, 80%, 0.2), hsla(330, 100%, 80%, 1) 50%, hsla(330, 100%, 80%, 0.2));}

<!-- HTMLファイル -->
<div id="sample3">
<p>透明度のグラデーション</p>
</div>

親要素（div要素）に背景画像を指定しています。
そして、その子要素（p要素）の背景の線形グラデーション（linear-gradient）で、同じ色の透明度を、左から「0.2、1、0.2」としています。

▲目次へ戻る

３．rgbaやhslaと、opacity

透明度を指定する値では、rgbaやhslaが使われますが、CSS3から、値ではなくプロパティで透明度を指定するものとして、opacityプロパティが登場しました。
opacity（オパシティ）は、不透明度という意味です。

opacityプロパティは、opacity:0.5のように、0 ～ 1までの数値で指定します。
0が透明、1で不透明です。
CSSでは、値が小数点以下の場合、一の位の0が省略可能なので、「opacity: 0.5」は「opacity: .5」とも書けます。

opacityプロパティは、中の子要素も含めて全部一括して透明度が変わります。
rgba や hsla は値なので、透明度を使いたいところに、それぞれ値を指定できます。
この点が、プロパティであるopacityと、値であるrgbaやhslaとの違いです。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {
    padding:2em;
    border:solid 1px #ccc;
    background: rgb(156,100,210) url(img.jpg) no-repeat center bottom;}
div#sample div {
    padding:1em;
    text-align:center;
    background:rgb(156,100,210);
    color:#fff;}
div#sample div h4 {
    font-size:3em;
    line-height:1em;}
div#sample div p {
    margin:1em 0 0;
    padding:0.5em;
    background:#fff;
    color:rgb(93,59,186);}
div#sample div#sample_1 {
    opacity:0.7;       /*全部一括で 0.7の透明度に指定*/
    margin:0 0 2em;}
div#sample div#sample_2 {
    background:rgba(156,100,210,0.5);}  /*背景だけを透明度 0.5に指定*/

<!-- HTMLファイル -->
<div id="sample">
    <div id="sample_1">
        <h4>OPACITY</h4>
        <p>親要素にopacityで指定（子要素も同じ透明度になる）</p>
    </div>
    <div id="sample_2">
        <h4>RGBA　HSLA</h4>
        <p>親要素の背景を rgba や hsla で指定（子要素には影響しない）</p>
    </div>
</div>

opacityプロパティは、マウスオーバー時の変化、未選択のタブなど、要素全体の透明度を変えたい場合に有効です。
rgba値やhsla値は、部分的に透明にしたい場合に有効です。

▲目次へ戻る