ywork2020.com

Title

URLに指定したidと一致するidの要素を検知する

目次 (INDEX)

:targetとは

ここで説明する:target とは次の語句からなるCSSの疑似クラスです。
target
読み: ターゲット
意味: 的、標的、目標となるもの

目次に戻る

:target疑似クラスの概要

この疑似クラスは a要素href 属性値( 同ページのid指定のURL )とCSSセレクターに該当する要素が持つ id 属性値が一致している場合に、ユーザーのクリックに反応して、そのターゲットの要素を検知します。

単純な例を挙げると、 a要素のhref属性の値が "#Example" だった場合、このa要素をクリックすると id属性の値が "Example" の要素がターゲットとなり検知されます。

<a href="#Example">リンクテキスト</a>

<div id="Example">ターゲット要素</div>

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

セレクター:target{プロパティ名: 設定値;}
:target{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルの中のa要素のhrefとターゲット要素のidの関係に注目していただけると理解しやすいと思います。

目次に戻る

参考: URLに指定したidと一致するidの要素を検知する

ここではa要素がクリックされた時に href属性の値とターゲット要素のidの値が一致するばあいの動作が確認できるサンプルを紹介します。 サンプルではa要素をクリックした時にターゲット要素の背景色がライトブルーに変更されます。

<body>
	<p><a href="#idExample1">Example1 Link</a></p>
	<p><a href="#idExample2">Example2 Link</a></p>
	<p><a href="#nowhere">nowhere</a></p>
	<div id="idExample1">Example1 Text</div>
	<div id="idExample2">Example2 Text</div>
</body>

Example1 Link

Example2 Link

nowhere

Example1 Text
Example2 Text

<style>
	div, p{
		background-color: transparent;
		margin: 1em;
		padding: 1em;
	}
	div:target{
		background-color: ##lightblue;
	}
</style>

目次に戻る

応用: CSSでライトボックスを作成する

ここではjavascriptを使わないでライトボックスを利用するサンプルを紹介しておきます。

<body>
	<ul>
		<li><a href="#ExampleA" id="idA">ストロベリー</a></li>
		<li><a href="#ExampleB">森と湖</a></li>
	</ul>
	<div class ="clsLightBox" id="ExampleA">
		<a href="#" class ="clsA"></a>
		<figure>
			<img src="画像のURL" alt="ストロベリー" width="100%">
			<figcaption>
				新鮮なストロベリー
			</figcaption>
		</figure>
	</div>
	<div class ="clsLightBox" id="ExampleB">
		<a href="#" class ="clsA"></a>
		<figure>
			<img src="画像のURL" alt="森と湖" width="100%">
			<figcaption>
				森と湖
			</figcaption>
		</figure>
	</div>
</body>
ストロベリー
新鮮なストロベリー
森と湖
森と湖

<style>
	.clsLightBox{
		display: none;
	}
	.clsLightBox:target {
		position: relative;
		display: contents;
		width: 100%;
		height: 100%;
	}
	.clsLightBox figure{
		position: relative;
		width: 50%;
		padding: 10px;
		color: ##whitesmoke;
		background-color: ##black;
		text-align: center;
		border-radius: 3px;
	}
	.clsLightBox .clsA{
		position: relative;
		float: left;
	}
	.clsLightBox .clsA::after{
		position: relative;
		display: flex;
		width: 2rem;
		z-index: 1;
		align-items: center;
		justify-content: center;
		background-color: ##black;
		border-radius: 3px;
		color: ##lightpink;
		font-size: 150%;
		content: "×";
		cursor: pointer;
	}
	.clsLightBox .clsA::before{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.6);
		content: "";
		cursor: default;
	}
</style>

目次に戻る