iPentec.com / Doc / CSS

Webページ全体を暗くする、明るくする - CSSによるオーバーレイを利用したフェード効果 - CSS

Webページでダイアログ風のレイヤーを表示する際に、背景が暗くなったりする場合があります。ここではCSSを用いてWebページ全体にフェード効果を付ける方法を紹介します。

概要

画面全体を覆うレイヤーを表示します。レイヤーの透明度を設定することでフェードの効果を調整します。

コード

HTMLファイル

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="FadeDark.css" />
  <script type="text/javascript">
    function fade() {
      var target = document.getElementById("fadeLayer");
      target.style.visibility = "visible";
    }
  </script>
</head>
<body>
  <div class="MainFrame">
    あいうえお<br />
    ABCDE<br /> 
    <div style="height:120px"></div>
    <a href="javascript:void(0);" onclick="fade();">黒フェード</a>
  </div>

  <div id="fadeLayer"></div>
</body>
</html>

CSSファイル (FadeDark.css)

body {
  background-image:URL("img/img.jpg");
}

.MainFrame {
  text-align:center;
  margin-left:auto;
  margin-right:auto;

  width:420px;
  background-color:#FFFFFF;
}

#fadeLayer {
  position:absolute;
  top:0px;
  left:0px;

  width:100%;
  height:100%;

  background-color:#000000;
  opacity:0.5;
  visibility:hidden;
  z-index:1;
}

解説

"<div id="fadeLayer"></div>"が画面全体を覆うフェード用のレイヤーです。初期状態では"visibility:hidden;"に設定し画面に表示されない状態にします。フェードのリンクのクリックによりJavaScriptでフェード用のレイヤーの"visibility"を"visible"に変更します。フェード用レイヤーの要素はDivタグのIDから取得します。IDからの要素の取得についてはこちらの記事を参照して下さい。

実行結果

HTMLファイルを表示します。下図の画面が表示されます。

画面の[黒フェード]リンクをクリックします。全画面に半透明のレイヤーが表示され、画面が暗くなりました。

CSSのopacityの値を変更すると効果が変わります。こちらは"opacity:0.8"の場合です。

こちらは"opacity:0.2"の場合です。

補足:白色でのフェード

コード(白のフェード)

白色でフェードする場合のコードは以下になります。

HTMLファイル

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="FadeLight.css" />
  <script type="text/javascript">
    function fade() {
      var target = document.getElementById("fadeLayer");
      target.style.visibility = "visible";
    }
  </script>
</head>
<body>
  <div class="MainFrame">
    あいうえお<br />
    ABCDE<br /> 
    <div style="height:120px"></div>
    <a href="javascript:void(0);" onclick="fade();">白フェード</a>
  </div>

  <div id="fadeLayer"></div>
</body>
</html>

CSSファイル (FadeLight.css)

body {
  background-image:URL("img/img.jpg");
}

.MainFrame {
  text-align:center;
  margin-left:auto;
  margin-right:auto;

  width:420px;
  background-color:#FFFFFF;
}

#fadeLayer {
  position:absolute;
  top:0px;
  left:0px;

  width:100%;
  height:100%;

  background-color:#FFFFFF;
  opacity:0.75;
  visibility:hidden;
  z-index:1;
}

注意

上記コードではスクロールバーが表示される場合にはスクロール領域外には設定が反映されません。

実行結果

FadeLayerの色を変えると白くフェードさせることもできます。

画面領域がスクロールする場合

JavaScriptを利用する方法

画面領域がスクロールする場合は、レイヤー表示時に画面全体の幅と高さをJavaScriptで取得して設定するコードを追加します。

コード

HTMLファイル

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link rel="stylesheet" type="text/css" href="FadeDark.css" />
  <script type="text/javascript">
    function fade() {
      var target = document.getElementById("fadeLayer");
      
      var maxheightA = Math.max(document.body.clientHeight, document.body.scrollHeight)
      var maxheightB = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
      var MaxHeight = Math.max(maxheightA,maxheightB);
      target.style.height = MaxHeight+"px";
      
      var maxwidthA = Math.max(document.body.clientWidth, document.body.scrollWidth)
      var maxwidthB = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
      var MaxWidth = Math.max(maxwidthA, maxwidthB);
      target.style.width = MaxWidth + "px";

      //下記の記述でも良い
      /*
      var MaxHeight = Math.max(
        Math.max(document.body.clientHeight, document.body.scrollHeight),
        Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight));
      target.style.height = MaxHeight+"px";

      var MaxWidth = Math.max(
        Math.max(document.body.clientWidth, document.body.scrollWidth),
        Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth));
      target.style.width = MaxWidth + "px";
      */

      target.style.visibility = "visible";
    }
  </script>
</head>
<body>
  <div class="MainFrame">
    あいうえお<br />
    ABCDE<br /> 
    <div style="height:120px"></div>
    <a href="javascript:void(0);" onclick="fade();">黒フェード</a>
  </div>

  <div id="fadeLayer"></div>
</body>
</html>

CSSファイル (FadeDark.css) CSSファイルは先のものから変更はありません。

解説

レイヤーを表示するJavaScriptのコード部分に、スクロール領域を含めた画面の幅、高さを取得するコードを追加し、最も大きな値をレイヤーの幅、高さに設定します。スクロールバーが無い状態では、clientWidth, clientHeightの値が大きくなり、スクロールバーがある場合はscrollHeight, scrollWidthの値が大きくなります。

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次

Webページ全体を暗くする、明るくする - CSSによるオーバーレイを利用したフェード効果 - CSS

概要

コード

解説

実行結果

補足:白色でのフェード

コード(白のフェード)

実行結果

画面領域がスクロールする場合

JavaScriptを利用する方法

コード

解説

関連するページ