JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components

Webページでよく使用される、カルーセル、折り畳み、ドロップダウン、モーダル、タブ、ツールチップなどのUIコンポーネントをCSSで実装するPure CSS Componentsを紹介します。

過度な装飾がないので、再利用しやすいと思います。

サイトのキャプチャ

Pure CSS Components
Pure CSS Components -GitHub

Pure CSS Componentsの特徴

Pure CSS ComponentsはWebページで使用される一般的なUIコンポーネントをCSSで実装したものです。JavaScriptは一切使用されていません。
MITライセンスで、個人でも商用でも無料で利用できます。

サイトのキャプチャ

Pure CSS Components -GitHub

UIコンポーネントには、以下のものがあります。

  • カルーセル
  • 折り畳み
  • ドロップダウン
  • モーダル
  • タブ
  • ツールチップ

HTMLはシンプル、CSSの装飾も最小限なので、カスタマイズしやすいと思います。

サポートブラウザは、下記の通り。IEは9+で動作します。

サポートブラウザ

※Safariでも確認してみましたが、すべて期待通りに動作しました。

CSSで実装するカルーセル

3つのアイテムを表示するカルーセル、左右の矢印と下部のボタンで操作します。新しいアイテムを追加するには、CSSを変更する必要があります。

サイトのキャプチャ

CSSで実装するカルーセル
※CSSは上記ページの「Download」からダウンロードできます。

CSSで実装する折り畳み

折り畳みコンポーネントは、2つの方法で使用できます。
まずは、クリックされたアイテムを開く方法。これは複数が動じに開きます。

サイトのキャプチャ

CSSで実装する折り畳み
※CSSは上記ページの「Download」からダウンロードできます。

もう1つの方法は、最後にクリックされたアイテムだけを開く方法。開いたままのアコーディオンのような感じです。

サイトのキャプチャ

CSSで実装する折り畳み
※CSSは上記ページの「Download」からダウンロードできます。

CSSで実装するドロップダウン

ドロップダウンは、クリックまたはホバーの2つの方法で使用できます。下記はクリックです。

サイトのキャプチャ

CSSで実装するドロップダウン
※CSSは上記ページの「Download」からダウンロードできます。

CSSで実装するモーダル

モーダルは<input hidden>を使ったテクニックで機能しています。閉じる時はボタンをクリックするだけでなく、背景をクリックしてもモーダルが閉じます。

サイトのキャプチャ

CSSで実装するモーダル
※CSSは上記ページの「Download」からダウンロードできます。

CSSで実装するタブ

タブは3つのコンテンツを表示するコンポーネントで、問題なく使用できます。CSSに特別なテクニックは必要ありません。

サイトのキャプチャ

CSSで実装するタブ
※CSSは上記ページの「Download」からダウンロードできます。

CSSで実装するツールチップ

ツールチップは、ホバーまたはフォーカスで表示されます。Wai-ariaを使用しているため、スクリーンリーダーでもこの要素を利用できます。

サイトのキャプチャ

CSSで実装するツールチップ
※CSSは上記ページの「Download」からダウンロードできます。

sponsors

top of page

©2024 coliss