CSSで透明度を指定する方法｜opacityプロパティの基本と使い方
CSSで要素の不透明度（透明度）を設定するには、opacity プロパティを使用します。値は 0（完全に透明）から 1（完全に不透明）までの数値で指定します。
例えば、要素を30%の濃さで表示したい場合は次のように記述します。
opacity: 0.3;
なお、背景色だけを半透明にしたい場合は、rgba() 関数を使う方法もあります。rgba(0, 0, 255, 0.582) のように、最後の引数がアルファ値（透明度）になります。
サンプルコード
以下は、CSSを使って不透明度・透明度を表現するコード例です。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 200px;
height: 200px;
background-color: rgb(0, 0, 255);
color: white;
display: inline-block;
}
.transparent {
background-color: rgba(0, 0, 255, 0.582);
}
img {
width: 200px;
height: 200px;
}
.transparent-img {
opacity: 0.3;
}
</style>
</head>
<body>
<h1>透明度／不透明度のサンプル</h1>
<div class="transparent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, accusantium.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, nisi!
</div>
<hr>
<img src="https://i.picsum.photos/id/487/300/300.jpg">
<img class="transparent-img" src="https://i.picsum.photos/id/487/300/300.jpg">
</body>
</html>
コードのポイント
- rgba()関数： 背景色のみを半透明にします。テキストはそのまま不透明に保たれるため、可読性を維持できます。
- opacityプロパティ： 要素全体（背景・テキスト・画像など）がまとめて半透明になります。
- この例では、同じ画像に対して
opacity: 0.3;を適用し、通常表示との違いを比較できるようにしています。
実行結果
上記のコードを実行すると、次のような出力が得られます。
-
CSSで透明度を指定する方法｜opacityプロパティの基本と使い方
CSSで要素の不透明度（透明度）を設定するには、opacity プロパティを使用します。値は 0（完全に透明）から 1（完全に不透明）までの数値で指定します。 例えば、要素を30%の濃さで表示したい場合は次のように記述します。 opacity: 0.3; なお、背景色だけを半透明にしたい場合は、rgba() 関数を使う方法もあります。rgba(0, 0, 255, 0.582) のように、最後の引数がアルファ値（透明度）になります。 サンプルコード 以下は、CSSを使って不透明度・透明度を表現するコード例です。 <!DOCTYPE html> <html> <he
-
すべてのブラウザに対応するCSS不透明度（opacity）の設定方法
CSSのopacity（不透明度）プロパティは現在の標準的なソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。しかし、さらに古いブラウザにも対応させるには、各ブラウザ固有のプロパティをフォールバックとして併用する必要があります。ブラウザ別の不透明度プロパティopacity — モダンブラウザ向けの標準プロパティ（値は0〜1で指定）-moz-opacity — Firefox 0.9より前のバージョン向け-khtml-opacity — Safari 1以降の旧バ