背景(背面)にあるリンクを邪魔しないテキストを実装できるCSS「user-select: none;」が使える

2021年6月29日

トップページの最初にメッセージ性のあるキャッチコピーを表示しているホームページを多く見かけます。ビジュアルメインのホームページだと特に多いかと、、、。

キャッチコピーを表示するのは良いけど、「背面にあるリンクに文字が干渉してしまうのはどうにかならいか！？」と思っていたら、「user-select: none;」というコードで解決できたっぽいです。

「user-select: none;」を使ったデモページ

全体画面（フルスクリーン）で左右50％ずつのでっかい背景画像があって、真ん中にキャッチコピーがあるタイプのデモページを作ってみました。

デモページ

今回使った超簡単な一行CSSコード

まずは今回重要な背面にある要素を邪魔しない、超簡単なCSSコード。
これだけで記述した要素の存在を、見た目だけ残したまま消すことができます。

user-select: none;

全体的なコード

「catchcopy」という要素に「user-select:none;」を使用しています。
他は見た目の記述ですので、今回は説明を省かせていただきます。

header {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.left_contents {
	width: 50%;
	text-indent: -9999px;
}

.left_contents a {
	width: 100%;
	height: 100vh;
	display: block;
	background: url(./img/01.jpg);
	background-position: center top;
	background-size: cover;
}

.right_contents {
	width: 50%;
	height: 600px;
	text-indent: -9999px;

}

.right_contents a {
	width: 100%;
	height: 100vh;
	display: block;
	background: url(./img/02.jpg);
	background-position: center top;
	background-size: cover;
}

.catchcopy {
	font-size: 12vw;
	line-height: 120%;
	letter-spacing: 5px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	z-index: 15;
	pointer-events: none;
}

一応、HTMLコードも書いておきます。

<header>

<div class="left_contents"><a href="https://oki-sitelabo.com/"> </a></div>

<div class="right_contents"><a href="https://oki-sitelabo.com/"> </a></div>

<div class="catchcopy">Sample<br />Text</div>

</header>

全体要素の中にリンク付きの縦100％×横50%の要素を横並びにして全体画面風にしています。

その上に、存在を消した（見えるけど触れない）要素を乗っけている感じです。