[CSS]知ってると便利！「:target疑似クラス」を使ったスタイルシートのテクニックと注意点

Post on:2016年7月13日

:target疑似クラスを使って、コンテンツを表示・非表示

まずは、:target疑似クラスを使った簡単なテクニックを見てみましょう。
コンテンツを表示・非表示するもので、例えばブログでデフォルトではコメント欄は非表示で、ユーザーがクリックするとコメントを表示するようにします。

HTML

<a href="#comments">Show Comments</a>

<section id="comments">  
    <h3>Comments</h3>
    <!-- Comments here... -->
    <a href="#">Hide Comments</a>
</section>

<a href="#comments">Show Comments</a>

<h3>Comments</h3>

<a href="#">Hide Comments</a>

</section>

CSS

#comments:not(:target) {
    display: none;
}
#comments:target {
    display: block;
}

#comments:not(:target) {

display: none;

}

#comments:target {

display: block;

}

デモページ

:target疑似クラスを使って、ナビゲーションをスライドアウト

最近よく見かけるナビゲーションをスライドアウトさせるのも:target疑似クラスを使うと、簡単に実装できます。
ユーザーがアイコンをクリックすると、ナビゲーションがコンテンツの上にスライドして表示されます。

HTML

<header>
	<div class="wrapper">
		<h1>Site Title</h1>
		<a href="#nav" aria-label="Open Navigation"><i class="fa fa-bars"></i></a>
	</div>
</header>

<div class="wrapper body-wrapper">
	<p>コンテンツ</p>
</div>

<nav id="nav">
	<a href="#" aria-label="Close Navigation"><i class="fa fa-times"></i></a>
	
	<ul>
		<li><a href="#">Link One</a></li>
		<li><a href="#">Link Two</a></li>
		<li><a href="#">Link Three</a></li>
		<li><a href="#">Link Four</a></li>
	</ul>
</nav>

<h1>Site Title</h1>

</div>

</header>

<p>コンテンツ</p>

</div>

<ul>

<li><a href="#">Link Three</a></li>

</ul>

</nav>

CSS

#nav {
    position: fixed;
    top: 0;
    height: 100%;
    width: 80%;
    max-width: 400px;
}

#nav:not(:target) {
    right: -100%;
    transition: right 1.5s;
}

#nav:target {
    right: 0;
    transition: right 1s;
}

#nav {

position: fixed;

top: 0;

height: 100%;

width: 80%;

max-width: 400px;

}

#nav:not(:target) {

right: -100%;

transition: right 1.5s;

}

#nav:target {

right: 0;

transition: right 1s;

}

デモページ

:target疑似クラスを使って、モーダルボックスを実装

:target疑似クラスをさらに使って、今度はページ全体をオーバーレイで覆うモーダルボックスも実装することができます。

HTML

<header>
	<div class="wrapper">
		<h1>Site Title</h1>
		<a href="#modal-container" aria-label="Open Navigation">Open Modal</a>
	</div>
</header>

<div class="wrapper body-wrapper">
	<p>コンテンツ</p>
</div>

<div id="modal-container">
	
	<div class="modal">
		<h2>Modal Title</h2>
		<p>モーダルボックス</p>
		<a href="#" aria-label="Close Modal"><i class="fa fa-times"></i></a>
	</div>
</div>

<h1>Site Title</h1>

<a href="#modal-container" aria-label="Open Navigation">Open Modal</a>

</div>

</header>

<p>コンテンツ</p>

</div>

<h2>Modal Title</h2>

<p>モーダルボックス</p>

</div>

CSS

#modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    width: 70%;
    background: #fff;
    padding: 20px;
    text-align: center;
}

#modal-container:not(:target) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 1s;
}

#modal-container:target {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 1s;
}

#modal-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.8);

display: flex;

justify-content: center;

align-items: center;

}

.modal {

width: 70%;

background: #fff;

padding: 20px;

text-align: center;

}

#modal-container:not(:target) {

opacity: 0;

visibility: hidden;

transition: opacity 1s, visibility 1s;

}

#modal-container:target {

opacity: 1;

visibility: visible;

transition: opacity 1s, visibility 1s;

}

デモページ

:target疑似クラスを使って、グローバルスタイルを変更

最後のテクニックは、body要素に:target疑似クラスを適用し、ページを完全にスタイルし直したり、レイアウトを変更するテクニックです。ここではサイドバーを表示・非表示させています。

HTML

<header>
	<div class="wrapper">
		<h1>Site Title</h1>
		<a class="show-sidebar" href="#">Show Sidebar</a>
		<a class="hide-sidebar" href="#body">Hide Sidebar</a>
	</div>
</header>

<div class="wrapper body-wrapper">
	<p>コンテンツ</p>
</div>

<h1>Site Title</h1>

<a class="show-sidebar" href="#">Show Sidebar</a>

<a class="hide-sidebar" href="#body">Hide Sidebar</a>

</div>

</header>

<p>コンテンツ</p>

</div>

Sass

#body:not(:target) {
    main { width: 60%; }
    aside { width: 30%; }
    .show-sidebar-link { display: none; }
}

#body:target {
    main { width: 100%; }
    aside { display: none; }
    .hide-sidebar-link { display: none; }
}

#body:not(:target) {

main { width: 60%; }

aside { width: 30%; }

.show-sidebar-link { display: none; }

}

#body:target {

main { width: 100%; }

aside { display: none; }

.hide-sidebar-link { display: none; }

}

デモページ

:target疑似クラスの注意点

「anchors vs buttons」でも言及したようにa要素を使う時というのは、ユーザーがページ内で異なるページ、あるいは異なるセクションにナビゲートされる時です。ここで紹介したテクニック（最後の一つは除く）は、ナビゲートをするものです。そしてターゲットとなる要素のスタイルを定義し、表示・非表示させています。

:target疑似クラスを使う時は、2つの点に注意が必要です。

ターゲットをクリックするので、ブラウザの履歴を加えます。そのため、ユーザーが「戻る」ボタンをクリックすると、ターゲット要素が意図されていないナビゲートをしてしまうことがあります。
ターゲット要素を閉じるために使った場合、別の要素か#リンクのa要素にナビゲートするでしょう。もしその要素がない場合は、ページの最上部にジャンプさせられます。

:target疑似クラスを使う時にこれらの問題がなく、正確に使われるなら、そしてJavaScriptが選択肢にないなら、これらのテクニックがユーザーにインタラクションを提供する候補になり得ると思います。実装もJavaScriptを使うより簡単で、操作も快適です。
もちろん、実装はそのシナリオに依存します。