CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで透明なボックスを作成する方法【opacityプロパティの使い方】

CSSでは、opacityプロパティを指定するだけで、要素を半透明にした「透明なボックス」を簡単に作成できます。以下のコードを実行して、実際の表示結果を確認してみましょう。

実装例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: #808000;
            padding: 20px;
         }
         div.myopacity {
            opacity: 0.4;
            filter: alpha(opacity=80);
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>下のボックスで透明度を確認できます：</p>
      <div class = "myopacity">
         <p>opacity 0.4</p>
      </div>
      <div>
         <p>opacity 1</p>
      </div>
   </body>
</html>

コードの解説

opacityプロパティとは

opacityは要素の不透明度を指定するCSSプロパティです。0（完全に透明）〜1（完全不透明）の範囲で数値を設定でき、値が小さいほど透明になります。この例ではopacity: 0.4;と指定しているため、ボックスは40%程度の濃さで表示され、背後のコンテンツが透けて見えます。

filterプロパティ（旧IE対応）

filter: alpha(opacity=80);は、古いバージョンのInternet Explorer向けに書かれた記述です。旧IEでは0〜100の数値で透明度を指定していました。現在の主要ブラウザではopacityだけで十分に機能するため、レガシーブラウザをサポートしない場合はこの行は不要です。

使用時の注意点

  • opacityはボックス全体（テキストなどの子要素を含む）に透過が適用されます。
  • 背景色だけを半透明にしたい場合は、rgba(128,128,0,0.4)のようにRGBAカラーやbackgroundのアルファ値を使うと、文字はそのまま鮮明に表示できます。
  • 比較用として、何も指定していないボックス（opacity 1）を並べておくと、透明度の違いがひと目でわかります。
  1. CSSだけでチェックマークを作成する方法【サンプルコード付き】

    CSSを使えば、画像ファイルやアイコンフォントに頼ることなく、独自デザインのチェックマークを作成できます。この記事では、::before／::after の疑似要素を活用する方法と、border＋transform を使うシンプルな方法の2つの実装例を、サンプルコードと実行結果あわせて紹介します。 方法1：疑似要素（::before / ::after）を使う方法 1つ目の例では、正方形のボックスに対して ::before と ::after の2つの疑似要素を配置し、それぞれを回転させることで、チェックマークを構成する「短い線」と「長い線」を描画しています。 <!DOCTYPE htm

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ