JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI

アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。

各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。

Webページでよく使用されるUIコンポーネントを実装するCSSの超軽量ライブラリ -CSSUI

CSSUI
CSSUI -GitHub

CSSUIの特徴

CSSUIはJavaScriptを使用しない、ピュアCSSで実装されたインタラクティブなUIコンポーネント集です。

サイトのキャプチャ

CSSUI

MITライセンスで、商用プロジェクトでも無料で利用できます。

  • ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。
  • カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。
  • スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。
  • ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のWebサイトまで、CSSUIはビギナーだけでなくプロのデベロッパーにも最適です。
  • CSSは超軽量: わずか9kBで、超軽量です。
  • サポートブラウザ: すべてのモダンブラウザで正常に動作します。Edge 79+, Firefox 49+, Chrome 12+, Safari 10+

CSSUIのデモ

CSSUIで実装されたUIコンポーネントは、デモページで楽しめます。

まずは、アコーディオン。各アイテムをクリックすると、展開・折り畳みます。

アコーディオン

Accordion

ドロップダウンは、各アイテムを表示する切り替え可能なコンテキストのオーバーレイです。 ホバーではなく、クリックで切り替えられます。

ドロップダウン

Dropdown

モーダルダイアログは、メインコンテンツの上にオーバーレイで表示します。

モーダルダイアログ

Modal

スライドアウトは、メインコンテンツの横からパネルをスライドして表示します。

スライドアウト

Slideout

タブは、水平方向のナビゲーションとシンプルでクリーンなスタイルで実装されています。

タブ

Tabs

ツールチップは、要素をホバー・フォーカスすると有益な情報を表示します。

ツールチップ

Tooltips

CSSUIの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。「cssui.css」は共通で使用し、各UIコンポーネント用のCSSファイルを記述します。

cssui.cssには、box-sizing: border-box;と共通で使用するカラーやフォントが定義されています。

Step 2: HTML

ModalのHTMLです。ラッパーにiddata-modal属性を与え、モーダル内のコンテンツは自由に編集できます。

Step 3: CSSのカスタマイズ

モーダルに使用されている変数のリストです。これらのスタイルを変更またはオーバーライドして、コンポーネントのデザインをカスタマイズできます。

詳しくは、ドキュメントをご覧ください。

サイトのキャプチャ

Docs -CSSUI

sponsors

top of page

©2022 coliss