WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

CSS(CSS3)のみでToggle(トグル)動作を実現させる方法

jQueryなどのJavaScriptではクリックする度に交互にアクションを実行させる時に
「toggle(トグル)」という処理をよく使用します。
この「toggle」処理をJavaScriptを使用せずに、CSS3のみで実装させる方法が紹介されていたのが
興味深かったのでメモ書き程度に紹介してみます。

CSS3 toggle-button without JavaScript


CSS3 toggle-button without JavaScript
ソース構成等はこちらから

画面上の水滴の様な画像をクリックすると画面全体が切り替わり、
再度同じところの画像をクリックすると元に戻ります。

このCSSのみでの「toggle」動作は、CSS3プロパティの「:target」と「pointer-events」を組み合わせて実現しています。
基本部分は3行程度で実装可能となっているシンプルさもとてもいい感じです。

実際に試してみると以下の様な感じに。
※画像をクリックしてください。

CSS3 TOGGLE SAMPLE

切り替えるエリアを重ね合わせて
クリックごと(「:target」が切り替わるごと)に「opacity」で表示/非表示を切り替えます。

HTMLとCSS構成は以下の様な感じになっています。

◆HTML
<div id="toggle">
<a class="back" href="#"><img src="img/photo02.jpg"></a>
<a class="front" href="#toggle"><img src="img/photo01.jpg"></a>
</div><!--/#toggle-->
◆CSS
/* ToggleArea
-------------------------- */
#toggle {
	margin: 0 auto;
	width: 400px;
	height: 300px;
	text-align: left;
	position: relative;
}

#toggle a {
	width: 100%;
	height: 100%;
	position: absolute;
}

/* CSS3 Toggle
-------------------------- */
#toggle:target .front {
	opacity: 0;
	pointer-events: none;
}

とても簡単かつ、いろいろな応用にも使えそうなので
どこかでもっと試してみたいと思います。

【元ネタ】
JavaScriptなしで、CSS3だけで画像のトグル処理を実現する – IDEA*IDEA ~ 百式管理人のライフハックブログ

サンプルファイルをダウンロードしたい方はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です