CSSでオーバーレイを実装する方法【現役エンジニアが解説】

今回は、CSSでオーバーレイを実装する方法について、HTMLとCSS、JavaScriptに分け、簡単に解説していきます。

HTML

HTMLではオーバーレイ用のdiv要素を用意します。

このdiv要素にはidを付与し、スタイルやJavaScriptから操作できるようにします。

<div id="overlay"></div>

上記のコードでは、overlayというidを付けたオーバーレイ用のdiv要素を用意しています。

スタイル

スタイルではオーバーレイ用のdiv要素の見た目を設定します。

基本的には最前面の絶対位置で画面全体を覆う透明度のある背景色のスタイルにします。

#overlay{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#ccc;
    opacity:0.7;
    z-index:2147483647;
}

上記のコードでは、透明度のあるグレーのような背景色のオーバーレイ用のdiv要素を最前面に表示しています。

JavaScript

ほとんどの場合、JavaScriptでオーバーレイの表示切替を行うことになります。