Resource - CSS/HTML

シンプルな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もサ...
Ads

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によるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく...

モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」

SmolCSS SmolCSSはモダンなCSSを使ったレイアウトのコードスニペットを紹介するプロジェクトサイトです。 古いCSSをモダンなCSSに置き換えるヒントを紹介するModern CSS Solutionsの運営者の方が始...

ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」

Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えるこ...

高速開発を意識して開発されたミニマリストの為のCSSフレームワーク・「Luxa CSS」

Luxa CSS See the Pen XWNrxOG by kachibito (@kachibito) on CodePen. Luxa CSSは高速開発を意識して開発されたミニマリストの為のCSSフレームワーク...

論文ライクなレイアウトのclassを使わないクラスレスなスタイルシート・「Tufte CSS」

Tufte CSS Tufte CSSは論文ライクなレイアウトのclassを使わないクラスレスなスタイルシートです。 論文ライクと言いますか、名前でピンと来る方もいるかもしれませんがEdward Tufte氏(Wikipedia...

Tailwind.css向けに用意された200以上のオープンソースなコンポーネントのセット・「Tail-Kit」

Tail-Kit Tail-KitはTailwind.css向けに用意された200以上のオープンソースなコンポーネントのセットです。人気のCSSフレームワーク、Tailwindで使える汎用的なコンポーネントが大量に用意されています。 ...

学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネントやユーティリティを含むCSS Gridベースのフロントエンドフレームワーク・「Axentix」

Axentix See the Pen XWjPbpG by kachibito (@kachibito) on CodePen. Axentixは学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネ...

JavaScriptやフレームワーク等への依存がない、純粋なHTML/CSSで作られた無料のランディングページのテンプレート集・「Uisual」

Uisual See the Pen eYdrVMJ by kachibito (@kachibito) on CodePen. UisualはJavaScriptやCSSフレームワーク等への依存がない、純粋なHT...

classを組み合わせて任意のアニメーションエフェクトを作れるCSSアニメーション用スタイルシート・「AnimXYZ」

AnimXYZ See the Pen MWjQjJM by kachibito (@kachibito) on CodePen. AnimXYZはclassを組み合わせて任意のアニメーションエフェクトを作れるCSSア...
Ads