You Don't Need JavaScript に学ぶ CSS テクニック

さまざまな UI を JavaScript を使わずに、CSS だけで実現するデモ You Don't Need JavaScript を紹介します。

かなり煽ったタイトルのデモですが、作者も「いくつかの点で問題がある」と述べているように、これらの UI を実装するのであれば素直に JavaScript を使うことをおすすめします。あくまでデモとして「CSS の可能性」を感じることができればと思います。

ただ、実装としてはなかなか面白いので、是非ソースも含めてチェックしてみてください。今回は、いくつかあるデモから３つピックアップして簡単な解説と一緒に紹介します。

＊ サンプルによっては、ブラウザによって正常に表示されないことがあります。最新の Chrome で動作確認をしているので、表示されない場合は Chrome で試してみてください。

アコーディオン

ラジオボタンと擬似クラスの :checked を使い、ラジオボタンのチェックボックスの有無によって適用される CSS を変更することでアコーディオンを実現しています。

ラジオボタンがチェックされると、内容を含む要素が高さ（height）を持ち表示される仕組みです。

View Source

フロートラベル

擬似クラスの :focus と擬似要素の :before を使います。フォームがフォーカスされると、 before 要素の位置（top）と文字サイズ（font-size）が変更されます。

View Source

ツールチップ

ヒントの表示などに使われるツールチップを CSS だけで実装したものです。擬似クラスの :hover と、attr() という指定した要素の属性値を取得する関数を使います。attr() 関数はまだサポートしていないブラウザもありますが、便利そうです。

デモでは、dfn 要素に <dfn data-info="ヒントの内容です">ヒントを表示</dfn> のように、data-info 属性としてヒントの内容を指定しています。

CSS は以下のように、擬似要素の :after と attr() を使い dfn::after {content: attr(data-info);} のように指定することで、data-info 属性の内容を取得して表示しています。

View Source

まとめ

このように、擬似クラスの :checked や :hover、 :focus などを使うことで、表現の幅を広げることができます。

今回は、３つのみ紹介しましたが　You Don't Need JavaScript では、ほかにも CSS と HTML だけで作られたゲームなどを含めた多数のサンプルを紹介しているのでチェックしてみてください。