クリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集・「daisyUI」 daisyUI daisyUIはクリーンなHTMLを保てるシンプルなclassのTailwind.css用UIコンポーネント集です。 この手のUIフレームワークの一部ではユーティリティクラスを組み合わせる事が多く、細かい設定が可...2021.05.23 | 10時04分55秒
独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」 transition.css transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーす...2021.04.01 | 9時53分27秒
Tailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレート・「Cleopatra」 Cleopatra CleopatraはTailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレートです。 最近のCSSフレームワークでは最も注目されているであろうTailwind.cssがベースのダ...2021.03.27 | 10時08分32秒
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」 TUK TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主...2021.03.22 | 9時54分18秒
クラスレスでHTML要素に基本的なスタイルを適応するCSS・「Bamboo CSS」 Bamboo CSS See the Pen XWNqrRE by kachibito (@kachibito) on CodePen. Bamboo CSSはHTML要素に基本的なスタイルを適応するclass-les...2021.03.02 | 10時09分30秒
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」 Charts.css Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく...2021.02.26 | 10時03分36秒
モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」 SmolCSS SmolCSSはモダンなCSSを使ったレイアウトのコードスニペットを紹介するプロジェクトサイトです。 古いCSSをモダンなCSSに置き換えるヒントを紹介するModern CSS Solutionsの運営者の方が始...2021.02.16 | 10時00分18秒
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」 Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えるこ...2021.02.07 | 10時06分00秒
高速開発を意識して開発されたミニマリストの為のCSSフレームワーク・「Luxa CSS」 Luxa CSS See the Pen XWNrxOG by kachibito (@kachibito) on CodePen. Luxa CSSは高速開発を意識して開発されたミニマリストの為のCSSフレームワーク...2021.01.29 | 10時03分52秒
論文ライクなレイアウトのclassを使わないクラスレスなスタイルシート・「Tufte CSS」 Tufte CSS Tufte CSSは論文ライクなレイアウトのclassを使わないクラスレスなスタイルシートです。 論文ライクと言いますか、名前でピンと来る方もいるかもしれませんがEdward Tufte氏(Wikipedia...2021.01.26 | 10時07分03秒
Tailwind.css向けに用意された200以上のオープンソースなコンポーネントのセット・「Tail-Kit」 Tail-Kit Tail-KitはTailwind.css向けに用意された200以上のオープンソースなコンポーネントのセットです。人気のCSSフレームワーク、Tailwindで使える汎用的なコンポーネントが大量に用意されています。 ...2021.01.14 | 10時12分08秒
学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネントやユーティリティを含むCSS Gridベースのフロントエンドフレームワーク・「Axentix」 Axentix See the Pen XWjPbpG by kachibito (@kachibito) on CodePen. Axentixは学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネ...2021.01.11 | 10時01分01秒
JavaScriptやフレームワーク等への依存がない、純粋なHTML/CSSで作られた無料のランディングページのテンプレート集・「Uisual」 Uisual See the Pen eYdrVMJ by kachibito (@kachibito) on CodePen. UisualはJavaScriptやCSSフレームワーク等への依存がない、純粋なHT...2021.01.06 | 10時00分41秒
classを組み合わせて任意のアニメーションエフェクトを作れるCSSアニメーション用スタイルシート・「AnimXYZ」 AnimXYZ See the Pen MWjQjJM by kachibito (@kachibito) on CodePen. AnimXYZはclassを組み合わせて任意のアニメーションエフェクトを作れるCSSア...2020.12.31 | 10時03分16秒
カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」 EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...2020.12.12 | 10時13分13秒
CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」 CSS clip-path Editor See the Pen CSS clip-path Editor by Mads Stoumann (@stoumann) on CodePen. CSS clip-pat...2020.12.11 | 10時12分26秒
テキスト中心のコンテンツ向けに作られた超軽量スタイルシート・「SPCSS」 SPCSS See the Pen QWKyJpY by kachibito (@kachibito) on CodePen. SPCSSはテキスト中心のコンテンツ向けに作られた超軽量スタイルシートです。開発者本人がテ...2020.12.05 | 9時55分32秒
多数のコンポーネントも用意されたFlexboxベースのモダンなCSSフレームワーク・「OrbitCSS」 OrbitCSS See the Pen eYzLLbZ by kachibito (@kachibito) on CodePen. OrbitCSSは多数のコンポーネントも用意されたFlexboxベースのモダ...2020.11.08 | 10時06分42秒
コンポーネントとユーティリティ重視のCSSフレームワーク・「Cirrus.CSS」 Cirrus.CSS Cirrus.CSSはコンポーネントとユーティリティ重視のCSS(SCSS)フレームワークです。ラピッドプロトタイピングを目的に開発したそうです。 レスポンシブで軽量、モジュール式なので無駄もなく、既存の人...2020.11.03 | 10時10分21秒
必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワーク・「Screen」 Screen See the Pen gOMvVwb by kachibito (@kachibito) on CodePen. Screenは必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワークです。 ...2020.10.30 | 9時55分43秒
細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリ・「filters.css」 filters.css filters.cssは細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリです。 昔ご紹介したInstagram.cssなどのように、任意の画像にclassを付与するだけでカ...2020.09.12 | 10時01分44秒
CSS box-shadowで出来る様々なスタイルを収集、コードもコピーできる・「Beautiful CSS box-shadow examples」 Beautiful CSS box-shadow examples Beautiful CSS box-shadow examplesはCSSのbox-shadowで出来る様々なスタイルを収集、コードもコピーできるWebサイトです。 ...2020.09.11 | 10時06分10秒