要素の透明度を指定する（CSS:opacity）

CSS
HTML/CSS

この記事にはプロモーションが含まれています。

投稿：2021・07・05

更新：2022・02・26

positionプロパティなどを使って、要素の上に要素を重ねると、重なりの下にある要素は上の要素に隠されて見えなくなってしまいます。
そこで上の要素を少し透明に設定すると、下の要素も見えるようになり、スクリーンをかけたような表現をすることも可能となります。
今回は、要素に透明度を指定できるopacityプロパティを紹介していきます。

– 目次 –

▼透明度の指定
要素に透明度を指定する
透明度を指定する際の注意点

▼透明度指定の活用
透明度を指定すると効果的なシーン
display:none;との違い

動画内容：透明度を指定する方法

画像を半透明にしたり、マウスオーバーでメニュー項目が不透明から半透明に切り替わるようにしたり。あるいは、非表示にしたい要素を100％透明にして隠したり。
要素に対する透明度の指定をマスターすることで、Web制作でできることの幅がグッと広がります。

まずは具体例です。不透明の画像と半透明の画像を用意してみました。見た目の印象が随分と変わるのがわかるかと思います。

＊不透明の画像＊

＊半透明の画像＊

ご覧のように、半透明の設定を施した画像は、スクリーンがかかったように薄く表示されています。
不透明の画像と比べて、さりげない感じになり、良い意味で目立たなくなっていると言えますね。

一番目立たせたいコンテンツを目立たせるためには、そのコンテンツを目立たせると同時に、他の部分が目立ってしまわないようにすることが重要です。

たとえば画像とテキストを重ねる場合、画像の主張が激しかったらそっちに目がいってしまい、肝心のテキストが注目されないということになってしまいます。

今回紹介するopacityプロパティは、要素を目立たなくさせることができる、とても便利なCSSプロパティです。

要素に透明度を設定する

要素に透明度を設定するには、opacityプロパティの値に０〜１までの数値を指定します。

この際、１が最大値で完全不透明（透明度0％）、0が最小値で完全透明（透明度100％）となります。

中途半端な透明度にするには、０〜１までの範囲（小数点を含んだ数値）で指定します。
察しが良い方ならお気づきの通り、ちょうど半透明（透明度50％）にするには、opacity: 0.5;と指定すれば良いということです。

また、opacityプロパティだけでなく数値指定が可能なCSS全般に言えることですが、小数点前の０（ゼロ）は省略できるので、opacity: .5;というふうに記載することもできます。

また、0〜100の数値の範囲で％による指定を行うこともできます。
％指定の場合も、0％が最小値で完全透明（透明度100％）。100％が最大値で完全不透明（透明度0％）です。
＊opacityプロパティは透明度を指定するというよりは、「不透明度を指定」するプロパティです。

opacityプロパティの基礎がわかったところで、サンプルコードと表示結果を見ていきましょう！表示結果はopacityの値を変えられるようにしています。（０〜１の値）

    <div class="opacity_change">
      <img src="https://web-de-asobo.net/wp-content/uploads/2021/06/neko.jpg" alt="猫の写真">
    </div>

      .opacity_change img {
        opacity: 0.5;
      }

opacityプロパティの設定の仕方自体はとても簡単ですね。

ただし、いくつか重要な注意点もあります。
それを知らなければ、透明化させたくない要素まで透明化してしまうということになるため、次の章では注意点を確認していきましょう！

POINT!

・opacityプロパティで、要素の透明度（不透明度）を指定できる！
・0～1までの数値（単位なし）か、0～100％で指定できる！
・0（％）だと完全透明（透明度100％）、1（100％）だと完全不透明（透明度0％）！

透明度を指定する際の注意点

要素に透明度を指定するにはopacityプロパティを適用させるだけなのですが、opacityプロパティを適用させると子孫要素もひっくるめて透明（あるいは不透明）になります。

値が子孫要素に継承されるというわけではなく、仕様上、親要素に適用させると全体的に透明度が同じになるという感じです。

このopacityプロパティの仕様はどういうところで困るかというと、たとえば親要素の背景画像だけを透明化させたい場合です。

親要素のdivタグに、background-imageプロパティで背景画像を指定したとします。そして背景画像を指定したdivタグの上に、子要素としてpタグでテキストを配置します。
この時、背景画像を透明化させてテキストを目立たせたいからといって、親要素であるdivタグにopacityプロパティを設定してしまうと…？

このテキストも半透明になってしまう
※本来のテキストカラーは不透明の黒

ご覧の通り、子要素として配置したopacityプロパティを設定していないpタグも半透明になってしまっています。
ちなみに、上のサンプルのコードは下記のようになっています。

    <div>
      <p>このテキストも半透明になってしまう<br>※本来のテキストカラーは不透明の黒</p>
    </div>

    div {
      opacity: 0.5;
      width:100%;
      height:200px;
      margin:2rem auto;
      background-image:url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      display:flex;
      justify-content: center;
      align-items: center;
    }

この場合、opacityプロパティの値が継承されているわけではないので、子要素のpタグに、opacity: 1;と設定しても意味がありません。

子要素のテキスト（pタグ）が親要素（divタグ）と一緒に透明にならないようにするにはいくつか方法があるのですが、今回は透明度を変えたい要素同士は、そもそも親子関係にしないという根本的な解決方法を紹介します。手順は以下の通りです。

１透明化させたいdivタグと、透明化させたくないpタグを親子関係にせずに並列にし、divタグとpタグの親として、新たにdivタグを追加する

２親要素のdivタグにはposition: relative;を設定する

３子要素のdivタグに、幅や高さ、背景画像、および透明度を指定

４テキストの位置をposition: absolute;で調整

このテキストは透明になりません

    <div class="parent_box">
      <div class="child_box"></div>
      <p>このテキストは透明になりません</p>
    </div>

    .parent_box {
      position: relative;
    }
    .child_box {
      opacity: 0.5;
      width:100%;
      height:200px;
      margin:2rem auto;
      background-image:url(https://web-de-asobo.net/wp-content/uploads/2021/06/aozora.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    .parent_box p {
      width: fit-content;
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      margin: auto;
    }

上記のコードのようにHTMLとCSSを工夫することで、divタグに指定した背景画像にのみ、opacityプロパティによる透明化ができました。
このように、「重ね合わせた要素の片方だけを透明化させたい」という場合、一工夫する必要があるので注意が必要です。

ちなみに、背景画像ではなく背景色を指定する場合は、わざわざopacityプロパティを使わなくても、カラーをrgba値で指定して、アルファ値で色の透明度を指定すればOKです。

POINT!

・opacityプロパティは値が継承されないが、親要素に指定すると子孫要素も含めて全て透明度が指定される！
・重なり合わせた要素同士の透明度を変えたい場合、親子関係にしないことで解決できる！
・色の透明度だけを変える場合は、カラーをrgba値で指定すれば簡単！

透明度を変えるのが効果的なシーン

透明度を変更するのが効果的なシーンとして、マウスオーバー時に要素の透明度を変化させるというテクニックがあります。

クリックできる対象物には、マウスオーバーで要素の見た目に変化を加えることで、「これはクリックできるもの」ということが分かりやすくなります。

しかし見た目を変えるといっても、たとえばカラーを大幅に変えてしまうと違和感が強くなります。
できれば、さりげないけど分かりやすい変化を加えたいものです。

そのようなケースでは要素の透明度を変えると、違和感を与えることなく見た目の変化が分かりやすくなるため、クリックできる画像やボタンを設置したい場合に便利です。

PCよりもスマホページが重視されるようになった今となっては、マウスオーバーで見た目を変化させる手法は昔ほど効果的ではなくなっていますが、それでもPCページでは欠かせません。
設定方法も簡単で、マウスオーバーの疑似クラス（:hover）でopacityの値を変化させるだけなので、ぜひマスターしていきましょう！

▼下はマウスオーバー（スマホの場合はタップ）で透明度が変化する、ホームボタンのサンプルとコードです。

ホームへ戻る

    <p class="hover_but" style="">ホームへ戻る</p>

      .hover_but {
        margin-top: 1.5rem;
        width: fit-content;
        margin: 2rem auto;
        background-image: linear-gradient(to right,darkred,red);
        color: white;
        padding:10px;
        border-radius: 10px;
        cursor: pointer;
        box-shadow:0px 2px 2px #ff8e8e inset,2px 2px lightgrey;
      }
      .hover_but:hover {
        opacity: .8;
      }

ポイントは、透明にし過ぎないことです。

当然ですが透明化し過ぎると視認性が落ちるため、単純に見づらくなってしまうというのが最も大きな理由です。
ただ、opacity: 0.9;に抑えてしまうと見た目の変化がわかりづらいので、0.7～0.8ぐらいにしておくと良いでしょう。

POINT!

・クリックできるボタンなどには、マウスオーバーで透明度を変化させると良い！
・ただし、透明化し過ぎると見づらくなるので注意！
・マウスオーバーによるopacityプロパティの値の設定は、0.7～0.8が目安！

display: none;との違い

opacityプロパティの値を０（ゼロ）にすると完全に透明になり、要素が見えなくなります。

これを利用することで、要素を完全に隠す（非表示にする）こともできるのですが、要素を見えなくするには、他にもdisplayプロパティの値をnoneにするという方法があります。

この章では、opacity: 0; と、display: none; の違いを簡単に説明していきます。
と言っても、ほとんど一言で片付いてしまうのですが…笑。次の表をご覧下さい。

CSS設定	特徴
opacity: 0;	あくまで完全に透明になるだけであり、そこに存在するように処理される。 →要素の幅（width）と高さ（hegiht）は確保されたままで、クリックできるもの（aタグのリンクなど）でればクリックもできる
display: none;	存在していないものとして扱われる。 →要素の幅と高さもなくなる（消える）。クリックもできない

ということで、見えなくなっても幅が残ってしまうと困る場合や、クリックできるものでクリックされてしまうと困る場合は、display: none;と指定した方が良いということになります。

ただし、表示⇔非表示をパッと切り替えるのではなく、フワッと現れるようなアニメーションをつけたい場合は、opacityプロパティとwidth・heightプロパティ等で隠す必要があります。

▼opacityプロパティと、displayプロパティで隠す違いを確かめられるサンプルを用意しました！幅が確保されるorされないなど、実際に確認してみて下さい。

▲「opacity:0」の場合は枠線がそのまま残るのに対し、「display:none」の場合は、枠線ごと要素が消えてしまうのが確認できたかと思います。

また、画像要素（imgタグ）には、transitionプロパティを設定しているので、opacityプロパティの場合はフワッと消えたり現れたりします。
ですが、displayプロパティの場合はパッと消えたり現れたりする…という違いもあります。

このように、同じ非表示でもCSSプロパティによって違いがあるので、目的によって使い分けることが重要です。

POINT!

・要素を非表示にするには、opacityプロパティの値を0にする他、displayプロパティの値をnoneにする方法などがある！
・どちらとも要素が完全に見えなくなるが、opacity: 0;は透明になるだけなので、幅や高さは残る！
・また、displayプロパティによる表示⇔非表示の場合は、transitionプロパティが無効になる！

ワンポイントチェック

今回紹介したopacityプロパティは、全ての要素に適用可能です。
なので変わった使い方では、progressタグのプログレスバーを半透明にすることもできます。

▼上がopacity: .7; 下は完全不透明（opacity: 1;）です。

80% 80%

progressタグやinputタグなど、こういった系統のタグはブラウザごとに表示のされ方が大きく違いますし、特定のCSSが効かないことも多いです。
加えて、CSSでinput系のタグにアレンジを加えると、特定のブラウザでは狙った表示になってくれないなど、CSSで手を加えることによるリスクがそれなりにあります。

しかし、opacityプロパティは要素の透明度を変えるだけなので、表示崩れなどのリスクが限りなく低いというメリットがあります。

もちろん、入力フォームなどを透明化させ過ぎると視認性が悪くなって入力しづらくなり、本末転倒なのですが、何らかのアクションが起こった時に少しだけ透明度を変えるというような使い方であれば、入力フォームなどでも有効です。

参考までに、チェックボックスでチェックの有無によって透明度が変化するサンプルを下に用意しました。

未チェック状態では半透明、チェックを入れると不透明になります

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      div {
        padding: 10px 0  20px;
        background-color: darkblue;
        color: white;
        margin: 2rem auto;
        text-align:center;
      }
      p {
        width: fit-content;
        margin: 1rem auto;
        text-align: left;
        padding: .5rem;"
      }
      input {
        opacity: .7;
        font-size: 40px;
        width: 20px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>未チェック状態では半透明、チェックを入れると不透明になります</p>
      <input class="sample_check" type="checkbox">
    </div>

    <script type="text/javascript">
        {
          const sample_check = document.querySelector('.sample_check');

          sample_check.addEventListener('click', () => {
            if (sample_check.checked) {
              sample_check.style.opacity = 1;
            }
            else {
              sample_check.style.opacity = .7;
            }
          });
        }
    </script>
  </body>
</html>

他にも、初期状態では入力フォームにopacity: 0;（完全透明）を設定しておき、スクロールと同時にふわっと出現させる（opacity: 0; →　opacity: 1;へのアニメーション）というような表現も考えられます。

アレンジしにくいinput系統のタグを、ほとんどリスクなくアレンジできるというのは、opacityプロパティならではの強みかと思います。

opacityプロパティの扱いをマスターすることで、細部にまでこだわった個性的なWebサイトにすることができますよ！

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

    <title></title>
    <style>
      .box {
        font-family: sans-serif;
        background-color: darkblue;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 200px auto;
        height: 100px;
        width: 100%;
      }
      .max_width1 {
        width: 100%;
        max-width: 500px;
      }
      .min_width1 {
        width: 100%;
        min-width:  800px;
      }
      .minmax_width1 {
        width: 100%;
        min-width: 800px;
        max-width: 1000px;
      }
      .grid_minmax {
        font-family: sans-serif;
        width: fit-content;
        margin: 200px auto;
        display: grid;
        grid-template-columns: minmax(800px,1000px);
      }
      .grid_minmax div {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: darkblue;
        color: white;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box max_width1">
      max-width:500px
    </div>

    <div class="box min_width1">
      min-width:800px
    </div>

    <div class="box minmax_width1">
      min-width:800px;<br>max-width:1000px
    </div>

    <div class="grid_minmax">
      <div class="">
        gridレイアウト<br>minmax(800px,1000px)
      </div>
    </div>
  </body>
</html>

記事のトップへ戻る