[CSS]チェックボックスを使ってできるちょっと面白いテクニックのまとめ

コンテンツスライダー、画像拡大、ツリー型メニューなど、チェックボックスを使ってできるちょっと面白いテクニックをまとめたスライドを紹介します。

Checkboxes and the ridiculous things you can do with them

上記のスライドでは、チェックボックスを使ったさまざまなテクニックがまとめられています。
1ページ目のチェックをオンにすると、ロケット発射から始まります。

スライドから面白そうなテクニックをいくつかピックアップしました。

• チェックボックスを使ったフック
• チェックボックスの美しくスタイル
• チェックボックスを使ったツリー型のメニュー
• チェックボックスを使った画像の拡大表示
• チェックボックスを使ったレスポンシブ対応のスライダー

チェックボックスを使ったフック

まずは、ベースとなるチェックボックスを使ったイベントのフックの使い方です。
チェックボックスをオンにすると、テキストのスタイルが変わります。

スライド：2

仕組みは下記のスタイルシートをベースに、チェックの有無でスタイルを定義します。

CSS

// オフ時
input[type="checkbox"] ~ div {
	// オフ時のスタイル
}

// オン時
input[type="checkbox"]:checked ~ div {
	// オン時のスタイル
}

チェックボックスの美しくスタイル

フックはちょっとだけ離れて、チェックボックスの美しいスタイル例です。

CSS3 Checkbox Styles

チェックボックスを使ったツリー型のメニュー

チェックボックスをフックにし、オン・オフでツリーの開閉を判定するツリー型のメニューです。

Pure CSS collapsible tree menu

CSS

li input:checked + ol{
	background: url(toggle-small.png) 40px 5px no-repeat;
	margin: -1.25em 0 0 -44px; /* 20px */
	padding: 1.563em 0 0 80px;
	height: auto;
}
li input:checked + ol > li{
	display: block; margin: 0 0 0.125em;
}
li input:checked + ol > li:last-child{
	margin: 0 0 0.063em;
}

チェックボックスを使った画像の拡大表示

チェックボックスを使って、画像を拡大表示するLightbox風エフェクトを実装します。

Futurebox, lightbox without the javascript and target pseudo-class

CSS

ul li input{
	display: none;
}
ul li input:checked + .overlay{
	display: table;
}

チェックボックスを使ったレスポンシブ対応のスライダー

チェックボックスをフックにして、レスポンシブ対応のスライダーです。

Responsive CSS3 Slider Without Javascript

CSS

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }
#slide5:checked ~ #slides .inner { margin-left:-400%; }

スライダーは以前、当サイトでも取り上げました。

• スタイルシートでここまでできる！Responsiveデザイン対応のスライダー -Responsive CSS3 Slider