Subscribed unsubscribe Subscribe Subscribe

CSS3だけで作るClickableなUI

CSS

最近は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


隠している表示を切り替える4パターンの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のみで動作させていて、非常にサクっと動くので気に入っています。
しかし、2ページ以上をスライドさせる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に移植したりしていますので、一度試してみては。