CSS3だけで作るClickableなUI
最近はHTMLやCSSぐらいしか書いていませんが、HTMLやCSSでできることを考えたりしています。
HTML5やCSS3はクロスブラウザ（主にIE）を考えたりすると、現実的でないような気さえしますが、Mobileデバイスに限れば、もう既に一般的な技術です。
HTMLはフォームパーツなどのインタラクティブな要素があります。それらはPerlやPHP、もしくはJavascriptを使ってユーザーと対話するために利用されています。
CSSでも :hover や :active、:visited などの擬似クラスはユーザーとの対話ができるセレクタとして使うことができます。しかし、それらでできるUIには限界がありました。
CSS3ではさらに便利なセレクタが追加されていて、それとフォームパーツなどを組み合わせることで、今までではJavascriptを使用しなければできなかったようなUIが作れると考えました。
ただし、これが最善な方法では必ずしもないと思うので、あくまで実験的なものです。
こういった実験的な試みはよくしていますが、最近では jsdo.it を使ってつくります。ここで示すサンプルもjsdo.itで作成しています。
「:checked」とInput要素、間接セレクタを使ったUI
「:checked」はCSS3で利用できる擬似クラスで、ラジオボタンやチェックボックスがチェックされた状態のときにスタイルを適用できるセレクタです。これと、間接セレクタを組み合わせることでInput要素で表示を操作するUIが作れます。
残念ながら、これらを組み合わせたUIは現在Firefox4および、Chrome v13でしか動作しません（Chrome v13は動作確認していません）。現在は最新のFirefox・Chrome・Safariで動作するようになりました。一部間接セレクタを使用せずに作成しています。
Simple Tab
シンプルなタブUIです。
タブ部分をLabel要素で構成し、rootにあるInput要素を操作します。Input要素の状態変化を「:checked」擬似クラスと間接セレクタを使ってタブの内容を切り替えています。
これは「:checked」とInput要素、間接セレクタを使ったUIの基本的な仕組みです。
http://jsdo.it/kudakurage/p5wW ※最新のFirefox・Chrome・Safariで見てください
Font Size Switcher
テキストのサイズを切り替えるタブUIです。
http://jsdo.it/kudakurage/qRwt ※最新のFirefox・Chrome・Safariで見てください
Text Column Switcher
テキストのカラム数を切り替えるタブUIです。
http://jsdo.it/kudakurage/a0F4 ※最新のFirefox・Chrome・Safariで見てください
Photo Slide
シンプルなフォトスライドUIです。
http://jsdo.it/kudakurage/4zld ※最新のFirefox・Chrome・Safariで見てください
Rotate Image
Imageを回転させるボタンUIです。
http://jsdo.it/kudakurage/iJVI ※最新のFirefox・Chrome・Safariで見てください
Toggle Filter
TableのリストをFilteringするToggleUIです。
http://jsdo.it/kudakurage/9yCw ※最新のFirefox・Chrome・Safariで見てください
Nest Filter
階層構造のFilteringUIです。個人的にいまいちの完成度。
http://jsdo.it/kudakurage/q4Aq ※最新のFirefox・Chrome・Safariで見てください
Accordion Menu
折り畳みするアコーディオンUIです。
http://jsdo.it/kudakurage/hbIN ※Chrome,Safariで見てください
Fold Menu
隠している表示を切り替える４パターンのToggleUIです。
http://jsdo.it/kudakurage/pFg5 ※最新のFirefox・Chrome・Safariで見てください
Effect Transition
様々なeffectのページトランジッションUIです。
http://jsdo.it/kudakurage/myAt ※最新のFirefox・Chrome・Safariで見てください
「:target」を使ったUI
「:target」は参照URIのidの要素にスタイルを適用できるセレクタです。この場合、ブラウザ履歴に残るので、ブラウザの戻る・進むボタンで操作できます。
Fade Tab
クロスフェードで切り替わるTabUIです。
http://jsdo.it/kudakurage/iJUO
Light Box
Imageを拡大表示するUIです。
http://jsdo.it/kudakurage/l9aT
Accordion Menu
「:target」で動作する折り畳みするアコーディオンUIです。
http://jsdo.it/kudakurage/pni5
Page Transition
公式iPhoneアプリケーション「はてなブックマーク」のブックマークレット登録ページでは、「:target」を使ったページ遷移UIを利用しています。遷移時に非同期で、しかもscriptを使用せずにCSSのみで動作させていて、非常にサクっと動くので気に入っています。
しかし、２ページ以上をスライドさせるeffect表現の場合、どうしてもHTML構造が醜くなってしまい、その点が個人的にいまいちだと感じているところです。間接セレクタとの組み合わせが利用できればもう少し美しくできるのですが。
http://b.hatena.ne.jp/help/touch/bookmarklet/iphone
※iPhoneなどで見てください
jsdo.it
ちょっとだけ試したい時には、何も考えずにサクっと書き始められるのでjsdo.it便利ですね。
Chrome ウェブアプリをいろいろ試していたときにjsdo.itを使ってみたのが最初ですが、それ以来ちょくちょく遊んでいます。
一年前につくっていたCSS3 Transitions Collection 30のいくつかもjsdo.itに移植したりしていますので、一度試してみては。
