ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

そこで考えだされたのがPure CSS Components、スタイルシートだけで作られたコンポーネント集です。

Pure CSS Componentsの使い方

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

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

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

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

タブ。
タブ。

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

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

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

Pure CSS Components

LFeh/css-components

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2