【CSS入門】opacityで要素を透明にする方法と活用例まとめ │ TechMania

WEBサイトを作成する際に、特定の要素を透過させたい場面が中にはあると思います。
背景画像の前面に置いたテキストを読みやすくするために画像を透過させたり、ボタンや要素の選択状態を分かりやすくするために変化させたりなど、ケースは様々です。

CSSで特定の要素を透過させる方法はいくつかありますが、今回はその中の1つである「opacity」の使用方法について解説していきたいと思います。

1. opacityとは？
2. opacityの使い方
3. opacityの活用例
4. まとめ
5. HTML/CSSの学習方法は？
6. HTML/CSSの関連記事

opacityとは？

opacityは、要素の不透明度を指定することができる CSSプロパティです。
使用すると、以下の例のように要素を透過させることができます。

【使用例】

opacityプロパティは古いブラウザでも問題なく動作してくれるため、ブラウザの違いを考えることなく気軽に使用することができるのが利点の１つです。

参考: Can I use: CSS3 Opacity

https://caniuse.com/css-opacity

opacityの使い方

opacityを使用する際は、以下の構文でコードを記述します。

【基本構文】

セレクター {
    opacity: 数値（0～1.0）もしくはパーセンテージ;
}

数値の場合は 0.0 以上 1.0 以下、パーセンテージの場合は 0% 以上 100% 以下の範囲で、要素の不透明度を指定します。
０に近づくほど透明になり、１に近づくほど不透明となります。

【実装例】

<style>
    .container {
        display: flex;
        gap: 10px;
    }

    .square {
        width: 60px;
        height: 60px;
        background-color: coral;
    }
</style>
<div class="container">
    <div class="square" style="opacity: 0.3">30%</div>
    <div class="square" style="opacity: 0.5">50%</div>
    <div class="square" style="opacity: 0.7">70%</div>
    <div class="square" style="opacity: 1.0">100%</div>
</div>

30%

50%

70%

100%

先ほどの解説時に見せた一例をもとに、実際のコードを見てみましょう。

【サンプルコード（HTML）】

<div class="sample">
    <div class="sampleOpacity">

    </div>
    <div class="sampleOpacity2">

    </div>
</div>

【サンプルコード（CSS）】

.sample {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    position: relative;
}
.sampleOpacity {
    height: 200px;
    width: 200px;
    position: absolute;
    top: 120px;
    left: 100px;
    background-color: #dc143c;
}
.sampleOpacity2 {
    height: 200px;
    width: 200px;
    background-color: #00ffff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: 2;
}

【実装結果】

上に重ねた方の要素が少し透明になっているのが分かりますね。
上記の例を、パーセンテージを使用して同じ透過度合いにする場合は、70％と指定することで実現できます。

opacityの活用例

opacityプロパティの基本的な使い方について解説したところで、続いては実際のWebサイトでも使用できるいくつかの実装例について紹介していきたいと思います。

順にサンプルコードを見ていきましょう。

マウスカーソルを重ねたときに少し透明にする

１つ目は、マウスカーソルを重ねた際に要素を半透明にする使用例です。
よくある例としては、ボタンにカーソルを合わせた時の状態変化などに使用されています。

【サンプルコード（HTML）】

<div class="sample">
    <a class="sampleButton" href="">
        sample
    </a>
</div>

【サンプルコード（CSS）】

.sample {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.sampleButton {
    text-decoration: none;
    width: 200px;
    border-radius: 100vmax;
    padding: 15px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    background-color: #ff007f;
    box-shadow: 0 5px 15px 0 #9E9E9E;
}
.sampleButton:hover {
    opacity: 0.6;
}

【実装結果】

sample

疑似クラスの「:hover」に opacityプロパティを適用することで、マウスオーバー時にボタンを透過させることができます。
このように状態を変化させることで、ボタンにカーソルが合わさっていることが視覚的にも分かりやすくなるため、効果的な演出方法の１つです。

ゆっくりと浮かび上がらせる

２つ目は、アニメーション動作に適用する使用例です。
文字や画像などの要素に動きを加えたい際に、opacityプロパティを活用することができます。

【サンプルコード（HTML）】

<div class="sample">
    <img class="sampleLogo.png">
</div>

【サンプルコード（CSS）】

.sample {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.sampleAnimation {
    display: block;
    width: 250px;
    height: 250px;
    position: relative;
    animation: sampleAnime 2s ease-out;
}
@keyframes sampleAnime {
    from {
        opacity: 0;
        bottom: 50px;
    }
    to {
        opacity: 1;
        bottom: 0px;
    }
}

【実装結果】

animationプロパティと opacityプロパティを組み合わせることで、このようなアニメーションを作成することができます。

画像を透過させて背景として使用する

３つ目は、画像を背景として使用する際に透過させるケースです。
透過しないまま背景に適用しようとすると、画像によってはテキストなどが見えづらくなる場合があるため、opacityプロパティを使用して不透明度を調整します。

【サンプルコード（HTML）】

<div class="sample">
    <div class="sampleBackground">
    </div>
    <div class="sampleText">
        <p>sample</p>
    </div>
</div>

【サンプルコード（CSS）】

.sample {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(102 205 170 / .6);
  height: 100vh;
  margin: 0;
}

.sampleBackground {
    height:  60%;
    width:  90%;
    background-image:  url(sampleImage.jpg);
    background-size:  cover;

    position:  absolute;
    left: 20px;
    top: 20px;
    z-index:  -1;
    opacity:  0.8;
}

.sampleText {
    position: absolute;
    font-size:  50px;
    color:  rgb(255 255 255);
    top: 10%;
    left: 35%;
    z-index:  99;
}

【実装結果】

sample

前述の通り、rgb関数では画像の透過を行うことはできないため、このように opacityプロパティを使用して不透明度を調整します。

上記のサンプルコードでは画像自体を透過させていますが、画像の不透明度は変更せずに上から透過した背景色を被せることで、似たような効果を得る方法もあります。

【サンプルコード（CSS）】

.sampleBackground {
    height:  60%;
    width:  90%;
    background-image: url(sampleImage.jpg);
    background-size: cover;

    position: absolute;
    left: 20px;
    top: 20px;
    z-index: -1;
}

.sampleBackground2 {
    height: 100%;
    width: 100%;
    background-color: rgb(102 205 170 / .4);
}

.sampleText {
    position: absolute;
    font-size:  50px;
    color:  rgb(255 255 255);
    top: 10%;
    left: 35%;
    z-index:  99;   
}

【実装結果】

sample

どちらの方法を採用するかは実装したい内容やデザインにもよるため、両方覚えて使い分けできるようにしておくと便利です。

まとめ

いかがでしたか？今回は、opacityプロパティの使い方について解説しました。
様々な場面で使える便利な機能なので、ぜひ活用してみてくださいね！

HTML/CSSの学習方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、HTML/CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。