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

CSSでオーバーレイ効果を作成する方法を徹底解説！サンプルコード付き

CSSでオーバーレイ（overlay）効果を作成するには、position: fixed を使って画面全体に固定表示される要素を作り、JavaScriptで表示・非表示を切り替えるのが一般的な手法です。この記事では、ボタンをクリックすると全画面にオーバーレイが表示され、×ボタンで閉じられる実装例を、実際のコードとともにわかりやすく解説します。

オーバーレイ効果とは？

オーバーレイ効果とは、ページの上に半透明の黒い背景などを重ねて表示し、その上に検索バーやメニューなどのコンテンツを浮かせる演出のことです。モーダルウィンドウや全画面検索フォームなど、多くのWebサイトで活用されているテクニックです。

実装例

以下のコードでは、「Turn Overlay On」ボタンをクリックすると全画面のオーバーレイが表示され、右上の「×」ボタンをクリックすると閉じる仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
body {
    font-family: Arial;
}
* {
    box-sizing: border-box;
}
.showBtn {
    background: #008b0c;
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
    opacity: 0.8;
}
.showBtn:hover {
    opacity: 1;
}
.overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.747);
}
.overlay .hideBtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: rgb(255, 0, 0);
    opacity: 0.8;
}
.overlay .hideBtn:hover {
    opacity: 1;
}
.overlay input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 80%;
    background: white;
}
.overlay input[type=text]:hover {
    background: #f1f1f1;
}
.overlay button {
    float: left;
    width: 20%;
    padding: 15px;
    background: rgb(54, 21, 241);
    font-size: 17px;
    border: none;
    color: white;
    cursor: pointer;
    opacity: 0.8;
}
.overlay button:hover {
    opacity: 1;
}
</style>
</head>
<body>
<div class="overlay">
<span class="hideBtn">&times;</span>
<div class="searchBar">
<form>
<button type="submit">Close Overlay</button>
</form>
</div>
</div>
<h1>Overlay Effect Example</h1>
<button class="showBtn">Turn Overlay On</button>
<h2>Click on the above button to try overlay effect</h2>
<script>
    document.querySelector('.hideBtn').addEventListener('click', hideSearch);
    document.querySelector('.showBtn').addEventListener('click', showSearch);
    function showSearch() {
        document.querySelector('.overlay').style.display = "block";
    }
    function hideSearch() {
        document.querySelector('.overlay').style.display = "none";
    }
</script>
</body>
</html>

コードのポイント

  • .overlayクラス：position: fixed; と top: 0; left: 0; を指定することで、スクロールに関係なく画面全体に固定表示されます。また、z-index: 1; によって他の要素より手前に重ねて表示されます。
  • 背景色の指定：rgba(0, 0, 0, 0.747) のように半透明の黒を指定することで、背後のコンテンツがうっすらと透けて見える、オーバーレイらしい見た目になります。
  • 表示・非表示の切り替え：初期状態は display: none; で非表示にしておき、JavaScriptのクリックイベントで display プロパティを "block" / "none" に書き換えることで、オーバーレイの開閉を制御しています。
  • ホバー時の演出：:hover 疑似クラスで opacity を変化させることで、ボタンにマウスを乗せたときの視覚的なフィードバックを実現しています。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

CSSでオーバーレイ効果を作成する方法を徹底解説！サンプルコード付き

「Turn Overlay On」ボタンをクリックすると、以下のように全画面のオーバーレイが表示されます。

CSSでオーバーレイ効果を作成する方法を徹底解説！サンプルコード付き

まとめ

オーバーレイ効果は、position: fixed による全画面固定と z-index による重なり順の指定、そしてJavaScriptによる表示切替の3つの要素を組み合わせるだけで簡単に実装できます。今回のサンプルは検索バー向けの構成ですが、応用すれば画像のライトボックスや確認ダイアログなど、さまざまなUIに展開できるので、ぜひ試してみてください。

  1. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>