CSS

[CSS]”CSS3”要素を透明にできるプロパティの使い方”Opacity””RGBa”

2016年7月31日

今回は要素の透明度をコントロールする方法として、
Opacity と RGBa についての解説になります。

まず Opacity についてですが、これは不透明度を設定する値になります。
値は0から1までの値で設定し、小数点で設定することになります。
0が透明で1が不透明となります。

半透明にしたい場合には

opacity:0.5;

というように設定します

次にRGBa ですが、こちらは、
Red 赤
Green 緑
Blue 青
Alpha 透明度
の略で

rgba(赤, 緑, 青, 透明度)

という構文になります

赤、緑、青の値は0から255で設定し、透明度は Opacity と同じく0から1で設定します。

カラーコードについて調べたい場合は
HTML,CSS ホームページの背景色や文字色 (フォントカラー)
を参考にするとわかりやすく載っています。

rgba(255,255,255,1)

とすると白になります。

また、

rgba(0,0,0,1)

とすると黒になります。

Opacity と RGBa の違いについてですが、
Opacity はプロパティで画像などの透明度の調整に使います。

これに対して、RGBa は背景色など色の指定に使います。

ここまでが概要となります。

それでは実践してみましょう。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

html:5

として展開すると

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
 
</head>
<body>
</html>

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

次に、style.css を読み込む設定をします。

link:css

を展開すると

<link rel="stylesheet" href="style.css">

となります。

次に style.css を作成し、内容を記述します。

まずは opacity について実践してみましょう。

#opacity-test1{
	background: #0F0;

}
#opacity-test2{
	background: #0F0;
	opacity: 0.5;
}

として保存します。

次に、html ファイルのほうで、div で opacity を試す領域を設定します。

今回もEmmet で簡単に記述します。

div#opacity-test${opacityのテスト}*2

これを展開すると

  <div id="opacity-test1">opacityのテスト</div>
  <div id="opacity-test2">opacityのテスト</div>

となります。

Emmet で連番をつけるときには $ をつけることで簡単にできます。

これで ctrl + shift + h でプレビューを見てみましょう。

Screenshot from 2016-07-29 23:21:58

opacity をつけた場合、背景色だけでなく文字も薄くなってしまっているのがわかります。

次に、RGBa で設定してみましょう。

style.css の最後に以下のコードを追記します。

#rgba-test1{
	background: #FF0;
}
#rgba-test2{
	background: rgba(255, 255, 0, 0.2);
}

次にhtmlファイルのほうで rgba を試す領域を設定します。

div#rgba-test${rgba のテスト}

これを展開すると

  <div id="rgba-test1">rgba のテスト</div>
  <div id="rgba-test2">rgba のテスト</div>

となります。

これで ctrl + shift + h でプレビューを見てみましょう。

Screenshot from 2016-07-29 23:30:28

このように背景色の黄色が薄くなっても文字色はそのままであるのが確認できます。

それでは、今回の要点をまとめてみましょう。

・Opacity や RGBa を設定することで透明度の設定ができる。
・Opacity はプロパティ、RGBa は値で設定する。
・透明度は0から1で設定し、0が透明となり、1で不透明となる。
・領域の透明度を設定するときには opacityを使い、背景などの透明度を指定するときには rgba を使用する。

写真や文字のみなど、各パーツごとに透明度を操作したり、領域そのものの透明度を操作するという使い分けることが多いので、違いを覚えておきましょう。

Page Top