Webアプリケーションでは表現力をあげるために各種コンポーネントが作られていますが、通常その手のライブラリはJavaScriptとスタイルシートの組み合わせによって実現しています。そうなるとJavaScriptの互換性やそもそも有効にしていない場合に使えません。 そこで考えだされたのがPure CSS Components、スタイルシートだけで作られたコンポーネント集です。

Pure CSS Componentsの使い方

まずはカルーセル。画像位置の切り替えを含めてJavaScriptは使われていません。

アコーディオン型のコンテンツ表示。

HTMLが記述できるドロップダウン。

モーダルウィンドウ。これもJavaScriptなしです。

タブ。

よく使われそうな表示がすべてスタイルシートだけで実現しています。JavaScriptを使った時に比べるとアニメーションが少ないなど若干物足りない部分もありますが、JavaScriptをオフにしても動くのは魅力的です。

何でもJavaScriptではなく、テクニックをこらすことで実現してしまうのがすごいですね。

Pure CSS Componentsはスタイルシート製、MIT Licenseのオープンソース・ソフトウェアです。

Pure CSS Components LFeh/css-components