CSS 【 colors 】 ~ 色と透明度

colmun_main3662

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

目次

1.色指定の値
2.色指定を行うプロパティ
3.rgbaやhslaと、opacity

1.色指定の値

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

ウェブカラーネーム red、blue、grayなど
色を名前で指定する指定方法
古くからある指定方法で、どんなブラウザでも表示可
RGBの16進数 #FF0000(#F00 )
光の三原色R(red)、G (green)、B(blue)を、それぞれ16進数の2桁で指定する指定方法
1つの原色が同じ数字の2桁の場合は、1桁に省略することができる(#FF0000→#F00)
古くからある指定方法で、どんなブラウザでも表示可
RGBの10進数 rgb(255,0,0)(rgba(255,0,0,0.5) )
色を光の三原色 RGB を、それぞれ10進数の3桁(0~255まで)で指定する指定方法
古くからある指定方法で、どんなブラウザでも表示可
rgbの最後に「a(アルファ値=透明度)」を足す指定もできる(IE9から対応)
HSL hsl(0,100%,50%) (hsla(0,100%,50%,0.5) )
色相(Hue)を0から359までの数値で、彩度(Saturation)と輝度(Luminance)を%で指定する指定方法
CSS3からの新しい指定方法(IE9から対応)
hslの最後に「a(アルファ値=透明度)」を足す記述もできる

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

▲目次へ戻る

2.色指定を行うプロパティ

color、background、border、outline

●color、background-color、border-color

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

文字の色 : colorプロパティ
ボックスの背景色 : background-colorプロパティ
ボックスの枠線の色 : border-colorプロパティ

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

このテキスト領域は、テキストカラーをchocolate、背景を#FFCCCC、ボーダーカラーをhsl(262,29%,59%)で指定しています。

 
ソースは次の通りです。

(CSS)
div#sample {
color:chocolate;
background-color:#FFCCCC;
border-style:solid;
border-color:hsl(262,29%,59%);}
background: url(img/tile_xy.gif) repeat;}

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

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

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

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

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

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

こちらにマウスオーバーすると、outlineが付きます。

ソースは次の通りです。

(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」としています。

▲目次へ戻る

3.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との違いです。

OPACITY

親要素にopacityで指定(子要素も同じ透明度になる)

RGBA HSLA

親要素の背景を 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値は、部分的に透明にしたい場合に有効です。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です