要素を透明にする！CSSのopacityの使い方【初心者向け】現役Webデザイナーが解説
Webデザイン初心者向けにCSSのopacityの使い方について解説しています。画像や背景を透明にする際に役立つ知識です。実際の業務にも活用できるので、ぜひ覚えておきましょう。誰でも手軽に使えるはずです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
CSSで書くopacityの使い方をテックアカデミーのメンター（プロのWebデザイナー）が初心者向けに実際のコードを使って解説しています。
最近、画像上にテキストを表示するようなデザインが増えてきていますが、画像やテキストの透明度を変えることで大きく印象を変えることができます。
画像やテキストの透明度は、CSSのopacityプロパティを使うと簡単に設定することができるので、知っておくと今後役立つでしょう。
目次
田島メンター！！最近Webサイトのデザインで画像の上に文字が表示されてるのあるじゃないですか？
最近のサイトだと結構多いよね！
自分でもやってみてるんですが、ちょっと透明にして画像や文字を目立たせたいんですけど、どうすれば良いんですかー？
透明度を変えるのはopacityというものを使うんだけど、詳しく説明していくね！
ありがとうございます〜！
opacityとは
opacityプロパティを使用すると、テキストや画像などHTML内の要素の不透明度を設定することができます。
何も設定されていない場合、各要素は不透明100%の状態で表示されていますが、CSSでopacityプロパティを設定し値を変更することによって、それらの不透明度を調整し半透明にすることが可能になります。
opacityの書き方
opacityは以下のように記述します。
opacity:値;
値の部分には「0.0～1.0」までの数値で不透明度を指定します。数値が大きいほど不透明度が高くなり、よりはっきりと表示されます。
逆に数値が小さいほど不透明度は下がり、透明になります。また、値にinheritを入力すると親要素の値が継承されます。
-
- 不透明度: 1 ー 完全に不透明な状態となります。(初期値)
- 不透明度: 0 ー 完全に透明な状態となり、画面に表示されなくなります。
- 0.0～1.0の範囲外で設定した場合 ー この範囲内に収めて適用されます。(例：-1→0／2→1)
数字で透明度を決めるんですね！
では、実際に書いてみようか！
実際にopacityを書いてみよう
値が小数点の場合
以下のHTMLにopacityを適用します。
尚、以下は、HTMLとCSSファイルが同じディレクトリ内にあり、外部スタイルシートのファイル名が”sample.css”である場合の例です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div>
<p>小数点で指定した場合</p>
</div>
</body>
</html>
CSS
div {background-color:#b0e0e6; }
p {opacity:0.5; }
ここでは背景色が#b0e0e6の<div>領域の中に<p>段落でテキストを入力し、その<p>のopacityの値を0.5にしています。
画面ではこのように表示されます。
段落の文字の部分の不透明度が変更され、少し透けた表示になっています。また、<div>の領域にはopacityを設定していないため、背景色の不透明度は変わっていません。
値が0や1の場合
次に、一行目のテキストに「opacity: 0;」を指定し、二行目のテキストに「opacity: 1;」を指定した場合です。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div>
<p class="text1">0で指定した場合</p>
</div>
<div>
<p class="text2">1で指定した場合</p>
</div>
</body>
</html>
CSS
div {background-color:#b0e0e6; }
p.text1 {opacity:0; }
p.text2 {opacity:1; }
画面ではこのように表示されます。一行目のテキストは完全に透明な状態になり、画面では表示されなくなります。
二行目のテキストは完全に不透明な状態のため、そのまま表示されます。
値「1」は初期値のため、親要素でopacityが指定されていない場合は全てこの状態になります。
画像にopacityを適用してみよう
下のコードを実行すると、以下のようにバナーが表示されます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<div class="cover">
<h2 class="cover-title">
<span class="inline">
<i class="fa fa-code fa-l"></i>
フロントエンドコース</span>
</h2>
<p class="cover-caption">jQueryを使いこなしリッチなWebサービスを開発しよう</p>
</div>
</body>
</html>
CSS
.cover {
background-image url("../background.png");
width: 100%;
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
値が1の場合
ここで「opacity: 1;」をCSSに追加しても、初期値のため以下のバナー表示には変化はありません。
CSS
.cover {
background-image url("../background.png");
width: 100%;
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
}
値が0.5の場合
ここで<「opacity: 0.5;」をCSSに追加すると、以下のようにバナーは透過された状態で表示されます。
CSS
.cover {
background-image url("../background.png");
width: 100%;
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.5;
}
値が0.8の場合
ここで「opacity: 0.8;」をCSSに追加すると、以下のようにバナーは更に透過された状態で表示されます。
CSS
.cover {
background-image url("../background.png");
width: 100%;
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.8;
}
値が10の場合
ちなみに「opacity: 10;」をCSSに追加しても、先に説明した通り範囲内（0 〜 1）に収めて適用されるため「1」として処理され、以下のバナー表示には変化はありません。
CSS
.cover {
background-image url("../background.png");
width: 100%;
position: relative;
overflow: hidden;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 10;
}
以上、CSSで書くopacityの使い方について解説しました。
簡単に設定でき、画像などに設定することでページ全体の印象をガラリと変えることもできます。
ぜひ活用してみてください。
執筆してくれたメンター
| メンターOM
Webデザインの勉強のためロサンゼルスに留学。 現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、 |
こんなに簡単にできるんですね！
他にもCSSの書き方で分からないことがあれば何でも聞いてね！
ありがとうございます！近くに聞ける人がいるの有難いです。
1つ1つクリアしていって良いWebサイトを作ろうね♪
はいっ！頑張ります！
CSSを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
CSSを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
