モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」
TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...
Resource - CSS/HTML
最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリ・「Whirl」
Whirl Whirlは最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリです。100以上のローダーが纏められています。 どれもユニークで実用的なローダーですが、タイトル通り最小限のコードで実装できるようにな...
タブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリ・「CSSUI」
CSSUI CSSUIはタブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリです。 タブ、ドロップダウン、モーダル、スライドアウトメニュー、ア...
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」
Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...
タイプライター風のエフェクトを管理、実装できるスタイルシート・「Typed.css」
Typed.css Typed.cssはタイプライター風のエフェクトを管理、実装できるスタイルシートです。上のように文字が打ち込まれたように徐々に表示される的あエフェクトを管理できます。 テキストはcontentプロパティで管理...
目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシート・「gd.css」
gd.css gd.cssは目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシートです。CSSリセットの代替としても利用できるそう。 HTML要素だけでスタイリング可能な、いわゆるクラスレスなCSSで...
導入も楽々な手書き風のスタイリングが可能なスタイルシート・「doodle.css」
doodle.css doodle.cssは手書き風のスタイリングが可能なスタイルシートです。CSSを読み込んでbodyタグにclass="doodle"を付与するだけと導入も簡単です。テーマに近いものだと思います。 フォームや...
class不要で見た目をミニマルスタイルに整えてくれるclass-lessなCSSフレームワーク・「DreamCSS」
DreamCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. DreamCSSはclass不要で見た目をミニマルスタイルに整えて...
シンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレート・「Windster」
Windster WindsterはシンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレートです。Tailwind.cssのユーティリティクラスのみを使用して構築されています。 管理画面...
CSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できる・「cssbuttons.io」
cssbuttons.io cssbuttons.ioはCSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できるWebアプリです。 Githubのアカウントでログインすればエディタが使えるようになります。Co...
リンクやボタンなどに使えるピュアCSSアニメーションのコレクション・「Annimay」
Annimay Annimayはリンクやボタンなどに使えるピュアCSSアニメーションのコレクションです。 ボタン等でよく使われているのを見かけるアニメーションが一通りそろえられています。CSSファイルの他、SCSS、LESSもサ...
CSSファイルを読み込むだけで見た目を整えられるclass-lessなCSSフレームワーク・「AttriCSS」
AttriCSS See the Pen by kachibito (@kachibito) on CodePen. AttriCSSは読み込むだけで見た目を整えられるclass-lessなCSSフレーム...
Tailwind.cssで構築されたピクセルパーフェクトなモバイル向けUIコンポーネント集・「Tailwind Mobile」
Tailwind Mobile Tailwind MobileはTailwind.cssで構築されたピクセルパーフェクトなモバイル向けUIコンポーネント集です。 全てのコンポーネントには、公式のデザインガイドラインに基づいて作成...
複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」
Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...
Windows7のUIを再現できるスタイルシート・「7.css」
7.css See the Pen QWpzrZb by kachibito (@kachibito) on CodePen. 7.cssはWindows7のUIを再現できるスタイルシートです。98.css、XP.cs...
読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」
Checka11y.css Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手...
クリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集・「daisyUI」
daisyUI daisyUIはクリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集です。 この手のUIフレームワークの一部ではユーティリティクラスを組み合わせる事が多く、細かい設定が可...
独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」
transition.css transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーす...
Tailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレート・「Cleopatra」
Cleopatra CleopatraはTailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレートです。 最近のCSSフレームワークでは最も注目されているであろうTailwind.cssがベースのダ...
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」
TUK TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主...
クラスレスでHTML要素に基本的なスタイルを適応するCSS・「Bamboo CSS」
Bamboo CSS See the Pen XWNqrRE by kachibito (@kachibito) on CodePen. Bamboo CSSはHTML要素に基本的なスタイルを適応するclass-les...
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.css Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく...