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

CSSだけで実現する基本のオーバーレイ効果：HTMLとCSSによる作り方を徹底解説

オーバーレイとは、Webサイト上でユーザーを「次にとるべきアクション」へ自然に導くための演出効果です。適切に活用すればポジティブなユーザー体験を生み出し、サイトへの滞在時間の向上にもつながります。

オーバーレイの作り方はひとつではありません。大切なのは、自分のサイトの目的や要件に合った方法を選ぶことです。

このガイドでは、JavaScriptを使わず、基本的なHTMLとCSSだけを用いて、画像にマウスカーソルを重ねたとき（ホバー時）に表示されるオーバーレイ効果を実装する方法を解説します。

1. HTMLの骨組みを作る

まずは、画像オーバーレイを作成するためのHTMLの雛形（ボイラープレート）を用意しましょう。

<html>
	<head>
		<style>
			/*CSSはまだ記述しません*/
</style>
</head>
<body>
	<div class="container"></div>
</body>
</html>

2. 問題を理解する

初めて何かに挑戦するときは、検索エンジンに頼る前に、まず立ち止まって「この問題はどう解決すべきか」を考えてみることが大切です。オーバーレイがどのように動作し、何が必要なのかをしっかり理解しておけば、必要になったときにヒントやTipsを探すのもぐっと楽になります。

おさらいすると、オーバーレイはコンテナ（ここでは画像）の上に重なり、ホバーしたときに何らかの変化を加えるものです。これによってユーザーの操作を促します。

先に進む前に、細部ではなく全体像を捉えましょう。画像があり、オーバーレイがある――つまり少なくとも2つのコンテナが必要です。さらに、その2つを包む大きなコンテナも必要になります。

まだスタイルは一切書かず、純粋にHTMLだけで組み立ててみてください。下記のマークアップを見る前に、自分で骨組みを描けるか試してみましょう。

<html>
	<head>
		<style>
			/*CSSはまだ記述しません*/
</style>
</head>
<body>
	<div class="container">
		<div class="overlay-outer">
			<img class="item-to-overlay" src="file-here" alt="this-is-our-image" />
			<div class="overlay-inner">
				こちらがオーバーレイ用のdivです。
			</div>
		</div>
	</div>
</body>
</html>

主要なブロックが固まったら、次はスタイリングです。筆者は外側の大きなコンテナから始めて、徐々に内側の小さなコンテナへ進むのが好きです。そうすることで各コンテナの実際の幅を把握しやすくなります。逆に内側から外側へ進む方がやりやすいなら、それでもまったく問題ありません。それでは順番に見ていきましょう。

body要素

外側から内側へ進むと、最初に出てくるのはbodyタグです。ページ全体を包む最大のコンテナですね。ここでは背景色、マージン、そしてアプリケーションの幅（width）と最大幅（max-width）を設定できます。

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
}
</style>

div.container

次のコンテナは最初のdivです。ここは非常にシンプルで、幅を100%に指定するだけです。

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
}
	div.container {
		width: 100%;
}
</style>

div.overlay-outer

マークアップをさらに掘り下げると、次に出てくるのは class="overlay-outer" を持つdivです。ここからがオーバーレイのスタイリングの本番です。

まず行うべきは、画像とオーバーレイを格納するコンテナの定義です。オーバーレイコンテナはページ幅のどれくらいを占めるようにしますか？ 高さはどうしますか？ また、このdivは画像の「柵（フェンス）」となる役割も担います。そのため、position プロパティを追加する必要があります。

<style>
	body {
		background-color: gray;
		max-width: 800px;
		width: 100%;
		margin: 0 auto;
}
	div.container {
		width: 100%;
}
	div.overlay-outer {
		width: 50%;
		height: 400px;
		position: relative;
}
</style>

CSSオーバーレイは、これまで学んできたCSSのさまざまな要素――positioning、background-color、opacity、object-fit、divなど――を組み合わせたものです。外側のオーバーレイコンテナのスタイリングが終わったら、次は画像と内側のオーバーレイコンテナを見ていきましょう。

img要素

画像要素は、それが置かれているコンテナの幅と高さに合わせる必要があります。お好みで枠線（border）を付けたり、object-fit で画像をトリミングしたりするのもこのタイミングです。

div.overlay-inner

内側のオーバーレイdivとそのスタイルは、オーバーレイの実際の見た目に関わります。ここでオーバーレイの背景色を選び、opacity を0に設定します。最も重要なのは、position: absolute; top: 0; left: 0; を指定することです。こうすることで overlay-inner のdivが、position: relative が設定された親divの上に正しく配置されます。

div.overlay-inner p

ここでは、オーバーレイコンテナの中身（テキストなど）をスタイリングします。

div.overlay-outer:hover .overlay-inner

最後に、外側のオーバーレイコンテナに :hover 疑似クラスを設定して、マウスを乗せたときにオーバーレイが表示されるようにします。

.outside:hover .inside {
  opacity: .8;
  transition: opacity .5s;
}

opacity を0〜1の間で設定することで、内側のオーバーレイdivに指定した背景色が半透明になります。transition プロパティにより、opacity 0から0.8への変化が滑らかに行われます。

これでCSSオーバーレイの作成は完了です。おめでとうございます！

CSSとHTMLを使うのは、要素にオーバーレイを実装するいくつかある方法のうちのひとつです。このソリューションでは、transition、position、object-fit、width、heightなど、複数のCSSプロパティを活用しました。

この記事では、問題へのアプローチの仕方、HTMLの骨組みの作り方、そしてオーバーレイ効果のためのCSSのスタイリング方法を学びました。以下のコードには、ここで扱った内容の動作サンプルをまとめています。

<html>
<head>
	<style>
		* {
			box-sizing: border-box;
}

		body {
			background: grey;
			max-width: 800px;
			height: 1000px;
}

		.outside {
			width: 75%;
			height: 400px;
			display: inline-block;
			position: relative;
			cursor: pointer;
}

		.images {
			width: 100%;
			height: 400px;
			object-fit: cover;
			border: 5px double black;
}

		.inside {
			background-color: #9c1203;
			height: 100%;
			width: 100%;
			opacity: 0;
			top: 0;
			left: 0;
			position: absolute;
			padding: 0;
}

		.inside p {
			color: #fff;
			line-height: 150px;
			font-family: 'arial';
			padding: 20px;
			text-align: left;
}

		.outside:hover .inside {
			opacity: .8;
			transition: opacity .5s;
}
	</style>
</head>
<body>
	<div class="container">
		<h1>CSS Overlay</h1>
		<div class="outside">
			<img class="images" src="https://images.unsplash.com/photo-1548630826-2ec01a41f48f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=3367&amp;q=80" alt="this-is-our-image" />
			<div class="inside">
				<p>This is an overlay!</p>
			</div>
		</div>
	</div>
</body>
</html>

ぜひ時間をかけてマークアップをいろいろといじってみて、あなただけのオリジナルのオーバーレイを作ってみてください。

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

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

  2. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定