【CSS入門】Firefox・Safari・Chrome・Operaに対応した不透明度（opacity）の設定方法
Firefox、Google Chrome、Safari、Operaなど、あらゆるモダンブラウザで要素の不透明度を機能させるには、CSSのopacityプロパティを使用します。値は0から1までの範囲で指定でき、0に近づくほど透明に、1に近づくほど不透明になります。
基本的な使い方
CSSクラスの中でopacityプロパティを以下のように設定します。
transparent {
opacity: 0.3;
}
この例では、「transparent」というクラスが適用された要素の不透明度が30%（0.3）に設定され、半透明の状態で表示されます。
サンプルコード
以下は、モダンブラウザでopacityプロパティを実際に使ってみる完全なHTMLコードです。通常の画像と、半透明化した画像を並べて比較できるようになっています。
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
img {
width:270px;
height:200px;
}
.transparent{
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>
実行結果
上記のコードをブラウザで開くと、次のように表示されます。
左側の画像は通常のまま表示され、右側の画像にはopacity: 0.3;が適用されているため、背景が透けて見える半透明の状態になっていることが確認できます。
補足：ブラウザ対応について
現在主流となっているすべてのブラウザ（Firefox、Chrome、Safari、Edge、Operaなど）は、接頭辞なしの標準的なopacityプロパティに対応しています。かつて必要とされていた-moz-opacityや-webkit-opacityといったベンダープレフィックスは不要ですので、安心して使用できます。
-
どちらが速い？IE 11 対 Firefox 対 Google Chrome 対 Opera 徹底ベンチマーク比較
現代のインターネット社会において、Webブラウザは最も使用頻度の高いソフトウェアの一つといえます。ここでいうブラウザの「速度」とは、インターネットへの接続がどれだけ早く確立できるか、Webページが表示されるまでにどれくらい時間がかかるか、起動にかかる平均時間など、総合的な快適さを指します。 ブラウザの速度に影響する主な要素 ブラウザの体感速度は、さまざまな要因によって左右されます。主な要因は以下の通りです。 パソコンのスペック インターネット回線の速度 ブラウザの種類 自分が普段好んで使っているブラウザが、必ずしもあなたにとって最適な選択とは限りません。そこで今回は、主要な4つのブラウザに
-
【保存版】Mac の Safari・Chrome・Firefox で「要素を検証」する方法を徹底解説
Mac の Safari・Chrome・Firefox で「要素を検証(Inspect Element)」を使う方法 「我々は今や、巨大な脳の神経細胞(ニューロン)のように、インターネットへと接続されている」〜 スティーヴン・ホーキング まさにその通りです。現代においてインターネットの力は計り知れません。Web 上には何百万というサイトと膨大な情報があふれており、調査のための情報収集はもちろん、エンターテインメントの鑑賞や SNS の利用まで、私たちの毎日は Web サイトと切り離せないものになっています。 画像出典:YouTube Web サイトを見ているとき、「要素を検証(Inspect