カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」
EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...
Resource - CSS3
テキスト中心のコンテンツ向けに作られた超軽量スタイルシート・「SPCSS」
SPCSS See the Pen QWKyJpY by kachibito (@kachibito) on CodePen. SPCSSはテキスト中心のコンテンツ向けに作られた超軽量スタイルシートです。開発者本人がテ...
多数のコンポーネントも用意されたFlexboxベースのモダンなCSSフレームワーク・「OrbitCSS」
OrbitCSS See the Pen eYzLLbZ by kachibito (@kachibito) on CodePen. OrbitCSSは多数のコンポーネントも用意されたFlexboxベースのモダ...
コンポーネントとユーティリティ重視のCSSフレームワーク・「Cirrus.CSS」
Cirrus.CSS Cirrus.CSSはコンポーネントとユーティリティ重視のCSS(SCSS)フレームワークです。ラピッドプロトタイピングを目的に開発したそうです。 レスポンシブで軽量、モジュール式なので無駄もなく、既存の人...
必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワーク・「Screen」
Screen See the Pen gOMvVwb by kachibito (@kachibito) on CodePen. Screenは必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワークです。 ...
ジグザグや方眼紙、ストライプなど、シンプルなパターン背景をCSSのコードで提供する・「CSS Background Patterns」
CSS Background Patterns CSS Background Patternsはジグザグや方眼紙、ストライプなど、シンプルなパターン背景をCSSのコードで提供するシンプルなWebアプリです。 オブジェクトのサイズ...
細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリ・「filters.css」
filters.css filters.cssは細かい設定も可能な、画像にさまざまなカラーフィルターをかけられるCSSライブラリです。 昔ご紹介したInstagram.cssなどのように、任意の画像にclassを付与するだけでカ...
CSS box-shadowで出来る様々なスタイルを収集、コードもコピーできる・「Beautiful CSS box-shadow examples」
Beautiful CSS box-shadow examples Beautiful CSS box-shadow examplesはCSSのbox-shadowで出来る様々なスタイルを収集、コードもコピーできるWebサイトです。 ...
シンプルなものからユニークなものまで様々なCSS製のスピナーやローダーをまとめた・「CSS3 Loader & Spinners」
CSS3 Loader & Spinners See the Pen CSS3 Loader & Spinners by kachibito (@kachibito) on CodePen. CSS3 Lo...
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
this vs that this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思...
応答性、読みやすさ、モジュール性を重視して設計されたミニマルなCSSフレームワーク・「mono/color」
mono/color mono/colorは応答性、リーダビリティ、モジュール性を重視して設計されたミニマルなCSSフレームワークです。 必要な物だけを揃えたモノクロタイプと、カラースキームやカードUI、ユーティリティなども揃え...
モジュール形式のCSSボタンシステム・「knopf.css」
knopf.css See the Pen Knopf.css – Tests by kachibito (@kachibito) on CodePen. knopf.cssはモジュール形式のCSSボタンシステムです。...
FlexboxやCSS Gridでよく用いられるレイアウトのコードを提供する・「1-Line Layouts*」
1-Line Layouts* 1-Line Layouts*はFlexboxやCSS Gridでよく用いられるレイアウトのコードを提供するプロジェクトサイトです。 センター配置やサイドバーを持った2カラムレイアウト、ヘッダ/メ...
テキストや背景のグラデーションカラーを手軽に設定できるCSSライブラリ・「grxdients.css」
grxdients.css See the Pen KKVRrbN by kachibito (@kachibito) on CodePen. grxdients.cssはテキストや背景のグラデーションカラーを手軽...
ユーティリティも用意された超軽量なCSSレイアウトライブラリ・「lyt」
lyt See the Pen gOPXPLK by kachibito (@kachibito) on CodePen. lytはユーティリティも用意された超軽量なCSSレイアウトライブラリです。flexboxベース...
ブラウザで動作するオープンソースのテキストエディタ・「Writty」
Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...
class不要で基本的なスタイルを提供するCSSフレームワーク・「Basic.css」
Basic.css See the Pen GRooBMO by kachibito (@kachibito) on CodePen. Basic.cssはclass不要で基本的なスタイルを提供するCSSフレームワーク...
Tailwind CSSで使えるコンポーネントを確認しながらコードをコピーできる・「tailblocks」
tailblocks tailblocksはTailwind CSSで使えるコンポーネントを確認しながらコードをコピーできるWebサイトです 色を変更できる以外に編集可能な箇所はありませんが、よく使うコンポーネントをビジュアルで...
Windows XPライクなUIを提供するCSS・「XP.css」
XP.css See the Pen jObdBOr by kachibito (@kachibito) on CodePen. XP.cssはWindows XPのようなUIを提供するCSSです。以前ご紹介した98....
シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」
new.css See the Pen oNjJXae by kachibito (@kachibito) on CodePen. new.cssはシンプルで見やすいレイアウトをセマンティックなHTMLだけで作れるcl...
Neumorphism(ニューモーフィズム)にインスパイアされたUIキット・「Neumorphism UI」
Neumorphism UI Neumorphism UIはNeumorphism(ニューモーフィズム)にインスパイアされたUIキットです。レイアウトにはBootstrapがベースに使われています Neumorphism、ニュー...
CSS製の斜めやジグザグなどの境界を手軽に作れる・「CSS Section Separator Generator」
CSS Section Separator Generator CSS Section Separator GeneratorはCSS製の斜めやジグザグなどの境界を手軽に作れるジェネレーターです セクションが変わる所を分かりやす...