overlayとは？

CSSのoverlay技法は、複数の要素を重ねて表示するレイアウト手法です。たとえば、画像の上にテキストやボタンを配置したり、背景に透過色のオーバーレイをかけるなど、視覚的なレイヤー効果を利用する際に使われます。このテクニックは、ポップアップウィンドウやモーダルダイアログ、カスタムホバーエフェクトの作成など、さまざまなシーンで活用されます。 overlayを実現するには、主にCSSのpositionプロパティとz-indexプロパティを使用します。positionプロパティで要素の配置方法を指定し、z-indexプロパティでレイヤーの前後関係を定義します。

overlayを使った基本構造

overlayを使ったレイアウトは、2つ以上の要素を重ね合わせて配置することで実現されます。ここでは、画像の上にテキストを重ねる基本的な例を紹介します。

基本的な例 - 画像の上にテキストを重ねる

<div class="overlay-container">
  <img src="example.jpg" alt="背景画像">
  <div class="overlay-text">このテキストが画像の上に表示されます</div>
</div>

.overlay-container {
  position: relative;
  width: 100%;
  max-width: 600px;
}
.overlay-container img {
  width: 100%;
  height: auto;
}
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
}

解説

1. position: relative: 親要素.overlay-containerにposition: relativeを設定することで、子要素（ここでは.overlay-text）がその親要素を基準に絶対位置指定を行えるようになります。
2. position: absolute: テキスト要素.overlay-textにはposition: absoluteを設定して、親要素に対して位置を指定しています。
3. transform: translate: topとleftを50%に設定して要素を中央に配置し、transform: translate(-50%, -50%)で要素の真ん中を基準に移動させ、中央揃えを実現しています。
4. z-indexの省略: この例ではz-indexを使用していませんが、明示的にz-indexを設定して、どの要素が上にくるかを調整することも可能です。

z-indexを使用したoverlayの調整

複数の要素が重なる場合、z-indexプロパティを使って要素の重なり順を制御できます。z-indexの値が大きいほど、要素は前面に表示されます。以下は、z-indexを使った簡単な例です。

z-indexを使った例

<div class="overlay-container">
  <img src="example.jpg" alt="背景画像">
  <div class="overlay-text">前面に表示されるテキスト</div>
</div>

.overlay-container {
  position: relative;
}
.overlay-container img {
  width: 100%;
  height: auto;
  z-index: 1;
}
.overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 2; /* 画像より前に表示される */
}

この例では、.overlay-textのz-indexを2に設定して、背景画像（z-index: 1）の上に表示しています。z-indexを使うことで、要素同士の前後関係を簡単に管理できます。

overlayの一般的な用途

overlay技法は、さまざまな場面で使われる非常に便利なテクニックです。以下に代表的な使用例をいくつか紹介します。

モーダルウィンドウやポップアップ

モーダルウィンドウやポップアップの背後に半透明のオーバーレイを表示し、ユーザーの操作を制限するデザインは非常に一般的です。

<div class="modal-overlay"></div>
<div class="modal-window">
  <p>これはモーダルウィンドウです</p>
</div>

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.modal-window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  z-index: 2;
}

この設定では、modal-overlayが全画面を覆い、背後のコンテンツを暗くする役割を果たします。modal-windowは、そのオーバーレイの上に配置され、モーダルウィンドウとして機能します。

画像や動画の上にボタンやテキストを配置

動画や画像ギャラリーで、再生ボタンやキャプションを上に重ねるデザインもよく見られます。

<div class="video-container">
  <video src="example.mp4" controls></video>
  <button class="play-button">再生</button>
</div>

.video-container {
  position: relative;
}
.video-container .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

この例では、play-buttonが動画の中央に配置され、ユーザーが動画を再生するためのボタンとして機能します。z-indexを使って、動画よりも前面に表示されるようにしています。

まとめ

CSSのoverlay技法は、要素を重ねて表示するための強力な手段であり、さまざまなウェブデザインに応用できます。positionとz-indexを使って、画像やテキスト、ボタンなどを自由に重ね合わせ、モーダルウィンドウやポップアップ、動画の再生ボタンなど、視覚的に魅力的でインタラクティブなレイアウトを作成することができます。正しく使うことで、デザインの一貫性と視認性を向上させることができるので、ぜひ活用してみてください