CSSでポップアップ時に画面全体を暗くする！背景色を半透明/黒で透過

2021/8/22WEB製作

CSSで画面全体を暗くする方法、背景色を黒の半透明で透過させる方法についてご紹介します。

ポップアップ表示時や特定のコンテンツを強調させたい場合に有効です。

• ハンバーガーメニュー展開時に背景を暗くするCSS

CSSで画面全体を暗くする方法

CSSで画面全体を暗くする際には、CSSの下記のプロパティが重要になります。

• position
• background（background-color）
• z-index

それぞれの考え方について簡単に解説します。

position:fixedで画面全体を覆う

画面全体を暗くする背景カバーを作るためには、ユーザーが画面をスクロールしても常に背景が半透明の黒色になっている状態を作る必要があります。

CSSプロパティのひとつである “position" は、要素の配置･位置を決定する役割を果たすものであり、今回は “position: fixed" を使用します。

fixedは、特定の要素基準ではなくブラウザ基準で位置を固定するため、スクロールしても常に同じ位置に要素が固定されます。

画面全体を覆う要素を作りたい際は、widthとheightをそれぞれ100%（width: 100%; height: 100%;）に指定したブロック要素を、position: fixed;で画面にピッタリ合うよう（top: 0; left: 0;）に固定することで実現可能です。

実際のCSSコードについては、記事後半で解説します。

RGBAを用いて背景色を透過

画面全体を暗くするためには、背景色を透過させて「半透明の黒色」を作り出す必要があります。

背景色を半透明にする方法はいくつかありますが、最も手軽なのはRGBAを用いて色を指定する方法です。

background（もしくはbackground-color）プロパティに、「background: rgba(0, 0, 0, .5);」と指定することで、半透明の黒い背景を作成することができます。

上記の記述では、最初の３つの０が黒色（#000000,blackと同じ）を表していて、最後の.5（=0.5）が透明度50%を表しています。

RGBAは、Red/Green/Blueの３軸において0~255の数値でカラーを指定する方法である「RGB」に透明度（Alpha）を加えたものであり、0~1の間で透明度を指定することが可能です。

たとえば、半透明の白色を指定したい場合には「rgba(255, 255, 255, .5)」のような指定で実装できますし、「rgba(255, 255, 255, 1)」と入力すれば、カラーコード#ffffffと同様、ベタ塗りの白色を表現できます。

z-indexで重なり順を指定

CSSの透過背景を用いて画面全体を暗くする際には、要素の重なり順が重要になります。

強調したいコンテンツ･ポップアップのみ暗くせず、それ以外のコンテンツはすべて半透明の黒い背景で覆われている必要があるため、重なり順は（奥から順に）以下のようになります。

1. 暗くしたいその他のコンテンツ
2. 画面全体を暗くするカバー要素
3. 強調したいコンテンツ･ポップアップ

このような重なり順を指定するには、CSSのz-indexというプロパティを使用します。

z-indexに指定された数値が大きければ大きいほど手前に表示されるため、「その他＜背景カバー＜ポップアップ」という順に数値が大きくなるよう設定します。

透過背景カバーに指定するz-indexの数値は、背景カバーで覆いたい「その他コンテンツ」群に指定されているz-indexによって変動するため、各サイトで適切な数値が異なります。

ちなみに、z-indexの最大値は32bitの最大値である2147483647（2,147,483,647）まで指定可能です。

透過背景で画面全体を暗くする

まずは、ポップアップなしの透過背景をCSSで描写してみましょう。

HTMLに透過背景用の空要素を追加

基本的には、適当なHTML空要素（ブロック要素）を配置して半透明背景を作成します。

ここでは、class名に “popup-bg-cover" と名付けました。

<div class="popup-bg-cover"></div>

ポップアップと透過背景を配置する位置は任意の場所で結構ですが、基本的には記事の最後尾に追記する形が良いでしょう。

CSSで背景色透過/画面全体に設定

CSSコードは前章で解説したとおりで、とても単純です。

.popup-bg-cover{
	position: fixed; /* ブラウザの定位置に固定 */
	background: rgba(0, 0, 0, .5); /* 背景色を半透明の黒色に */
	width: 100%; /* 要素の横幅を画面全体に */
	height: 100%; /* 要素の高さを画面全体に */
	top: 0; /* 要素の固定位置をブラウザ最上部に合わせる */
	left: 0; /* 要素の固定位置をブラウザ左側に合わせる */
	z-index: 1000; /* 要素をコンテンツより前面に（要調整） */
}

上記のコードで透過背景のカバーを追加しても、一部要素がカバーよりも手前に表示されてしまう場合には、その要素のz-indexの数値を調べ、背景カバーのz-indexを更に大きな数値へと調整･変更する必要があります。

半透明背景とポップアップ表示

半透明の黒背景で画面全体を暗くすることができたなら、次はポップアップ表示時のみ背景を暗くするようCSSを書いていきます。

ポップアップ/透過背景の完成形

詳しい解説に入る前に、まずはポップアップと画面全体を暗くする透過背景のHTML/CSSを見てみましょう。

ポップアップ/透過背景のデモ

ポップアップ/透過背景のHTML

ポップアップ表示時に透過背景を構成するための空要素（<div class="sample-popup-background"></div>）を配置している点がポイントです。

<div class="sample-popup-window">
	<input type="checkbox" id="sample-popup-switch" />
	<div class="sample-popup-background"></div>
	<div class="sample-popup-box">
		<div class="sample-popup-content">
			<p>これはサンプル用のポップアップです。</p>
			<label for="sample-popup-switch" class="sample-popup-close">閉じる</label>
		</div>
	</div>
</div>

ポップアップ/透過背景のCSS

ポップアップ･透過背景をposition:fixed;に設定し、画面全体に表示された状態で固定する点がポイント。

#sample-popup-switch {
	/* チェックボックスを非表示 */
	display: none;
}
.sample-popup-background {
	/* 画面全体を暗くする透過背景 */
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	z-index: 1000;
}
.sample-popup-content {
	/* ポップアップ本体 */
	display: inline-block;
	position: fixed;
	width: 75%;
	z-index: 1100;
	background: #fff;
	padding: 2%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow-y: scroll;
}
.sample-popup-close {
	/* ポップアップ内の閉じるボタン */
	position: relative;
	display: inline-block;
	background: #09f;
	color: #fff;
	padding: 0 1em;
	border-radius: 3px;
	cursor: pointer;
	left: 50%;
	transform: translateX(-50%);
}
#sample-popup-switch:checked ~ .sample-popup-background, #sample-popup-switch:checked ~ .sample-popup-box {
	/* ポップアップ･透過背景を閉じる */
	display: none;
}

ポップアップ/背景カバーの仕組み

ポップアップが表示されているときのみ、半透明の黒い背景カバーで画面全体を暗くする仕組みについて解説します。

HTMLのinputタグのチェックボックスとCSSを組み合わせることで、JavaScriptを使用しなくてもポップアップを表示することが可能です。

考え方としては、「ポップアップ表示時のみ背景を暗くする」よりも「ポップアップを閉じたら背景カバーを非表示にする」と考える方が分かりやすいかもしれません。

閉じるボタンが押されたら（=チェックボックスにチェックが入ったら）、ポップアップと背景カバーを非表示にするようCSSを記述します。

input要素とlabel要素を理解する

inputタグのtype属性にcheckboxを指定すると、下記のようなチェックボックスが表示されます。

しかし、チェックボックスが丸見えでは見栄えが良くないため、label要素を用いてボタンのようなデザインでチェックボックスのON/OFFを切り替えられるようにします。

上記のlabel要素ボタンをクリックすることで、先ほどのチェックボックスのON/OFFを切り替えることができるようになりました。

label要素の特徴は、for属性を用いてinput要素のid属性と結び付けることができることです。

上記の「クリックしてみよう」ボタンの場合、下記のようにinput要素に任意のid名を設定し、同じ名称をlabel要素のfor属性に設定します。

• <input type="checkbox" id="sample-switch-checkbox" />
• <label for="sample-switch-checkbox“>クリックしてみよう</label>

input要素をlabel要素に結び付けてしまえば、input要素自体をCSSで非表示にしてもlabel要素を通じてチェックボックスやラジオボタンを間接的に操作することが可能です。

この仕組みを利用して、label要素で作られた「閉じる」ボタンをユーザーがクリックしたときにポップアップや透過背景カバーが非表示になるように設定します。

CSSでポップアップ/背景の表示切替

チェックボックスにチェックが入った際に、ポップアップや半透明の黒い背景を非表示にするためには、チェックが入ったときだけ適用されるCSSを記述する必要があります。

チェックボックスのON/OFFによって表示が切り替わるCSSは、ポップアップのみならずハンバーガーメニュー等にも応用することができるので、ぜひ覚えておきたいところです。

画面全体を暗くする背景とポップアップまとめ

画面全体を暗くする透過背景とポップアップを作る際は、下記のポイントが重要になります。

• 透過背景用の空要素を設置
• position: fixed;で画面全体に固定
• z-indexで最前面に表示
• ポップアップのスイッチはチェックボックスで作る

一度理解してしまえば、決して難しい点はありません。

背景用に設置した空要素を画面全体に固定表示するCSSの書き方と、input/labelタグによるスイッチの作り方を理解することで、CSSによる製作の幅が広がることでしょう。

STALDIAでは、CSSを中心とした軽量化/高速化に特化したWEBデザインのご依頼を承っておりますので、お気軽にお問い合わせください。