要素を透明にする!CSSのopacityの使い方【初心者向け】

Webデザイン初心者向けにCSSのopacityの使い方について解説しています。画像や背景を透明にする際に役立つ知識です。実際の業務にも活用できるので、ぜひ覚えておきましょう。誰でも手軽に使えるはずです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで書くopacityの使い方を紹介しています。

最近、画像上にテキストを表示するようなデザインが増えてきていますが、透明度を変えることで大きく印象が変わってきます。
そんなときに調整できるのがopacityですが、使い方は非常に簡単なので知っておくと今後役立つでしょう。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
 

大石ゆかり

田島メンター!!最近Webサイトのデザインで画像の上に文字が表示されてるのあるじゃないですか?

田島悠介

最近のサイトだと結構多いよね!

大石ゆかり

自分でもやってみてるんですが、ちょっと透明にして画像や文字を目立たせたいんですけど、どうすれば良いんですかー?

田島悠介

透明度を変えるのはopacityというものを使うんだけど、詳しく説明していくね!

大石ゆかり

ありがとうございます〜!

 

opacityとは

opacityプロパティを使用すると、要素の不透明度を設定することができます。

通常各要素は100%不透明な状態で表示されていますが、opacityの値を変更することによってそれらを薄く表示させることが可能になります。

opacityの書き方

opacityは以下のように記述します。

opacity:;

値の部分には0.0~1.0までの数値で不透明度を指定します。数値が大きいほど不透明度が高くなりよりはっきりと表示されます。逆に数値が小さいほど不透明度は下がり、薄く表示されます。また、値にinheritを入力すると親要素の値が継承されます。
0.0~1.0の範囲外で設定した場合でもこの範囲内に収めて適用されます。(例:-1→0/2→1)
不透明度を0にすると完全に透明な状態となり、画面に表示されなくなります。
不透明度を1にすると完全に不透明な状態となります。(初期値)
 

大石ゆかり

数字で透明度を決めるんですね!

田島悠介

では、実際に書いてみようか!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に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を設定していないため、背景色の不透明度は変わっていません。
opac_p_1

 

値が0や1の場合

次に、一行目のテキストに値0を指定し、二行目のテキストに値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が指定されていない場合はすべてこの状態になります。
opac_p_2

画像に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;
}

opacity: 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;
}

opacity: 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;
}

opacity: 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;
}

opacity: 10;の場合

ちなみにopacity: 10;を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: 10;
}

以上、CSSで書くopacityの使い方について解説しました。

手軽に使えると思いますので、ぜひ活用してみましょう。画像などに指定してみるとページ全体の印象もガラリと変わるので、ぜひ自分でも書いてみてください。
 

大石ゆかり

こんなに簡単にできるんですね!

田島悠介

他にもCSSの書き方で分からないことがあれば何でも聞いてね!

大石ゆかり

ありがとうございます!近くに聞ける人がいるの有難いです。

田島悠介

1つ1つクリアしていって良いWebサイトを作ろうね♪

大石ゆかり

はいっ!頑張ります!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。思い描いた通りのデザインを作りたい、デザイナーとして仕事をしたいと考えている人はぜひご覧ください。