[CSS]チェックボックスを使ってできるちょっと面白いテクニックのまとめ
Post on:2012年9月7日
sponsors
コンテンツスライダー、画像拡大、ツリー型メニューなど、チェックボックスを使ってできるちょっと面白いテクニックをまとめたスライドを紹介します。
Checkboxes and the ridiculous things you can do with them
上記のスライドでは、チェックボックスを使ったさまざまなテクニックがまとめられています。
1ページ目のチェックをオンにすると、ロケット発射から始まります。
スライドから面白そうなテクニックをいくつかピックアップしました。
- チェックボックスを使ったフック
- チェックボックスの美しくスタイル
- チェックボックスを使ったツリー型のメニュー
- チェックボックスを使った画像の拡大表示
- チェックボックスを使ったレスポンシブ対応のスライダー
チェックボックスを使ったフック
まずは、ベースとなるチェックボックスを使ったイベントのフックの使い方です。
チェックボックスをオンにすると、テキストのスタイルが変わります。
仕組みは下記のスタイルシートをベースに、チェックの有無でスタイルを定義します。
CSS
// オフ時
input[type="checkbox"] ~ div {
// オフ時のスタイル
}
// オン時
input[type="checkbox"]:checked ~ div {
// オン時のスタイル
}
チェックボックスの美しくスタイル
フックはちょっとだけ離れて、チェックボックスの美しいスタイル例です。
チェックボックスを使ったツリー型のメニュー
チェックボックスをフックにし、オン・オフでツリーの開閉を判定するツリー型のメニューです。
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%; }
スライダーは以前、当サイトでも取り上げました。
sponsors
