Resource - CSS/HTML

論文ライクなレイアウトの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は学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネ...
Ads

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ア...

カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」

EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...

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...

テキスト中心のコンテンツ向けに作られた超軽量スタイルシート・「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ライブラリ・「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サイトです。 ...

Bootstrapライクに使えるフロントエンドフレームワーク・「Halfmoon」

Halfmoon HalfmoonはBootstrapライクに使えるフロントエンドフレームワークです。美しいダッシュボードやプロダクトページの開発スピード向上をサポートしてくれるそう。 RWD対応でBootstrapと概ね同じc...

CSSの用語を視覚的に学べる・「CSS Vocabulary」

CSS Vocabulary CSS VocabularyはCSSの用語を視覚的に学べるスタディサイトです。教育機関や研修など、教材向けに良さそうです。 実際のCSSのコードが左ペインに書かれており、右ペインにCSSで使われてい...

シンプルなものからユニークなものまで様々な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はテキストや背景のグラデーションカラーを手軽...

HTML/CSS/JavaScriptで作られた汎用的なCC0のコンポーネントを動作確認したりコードをコピーしたり選んでまとめてダウンロードできる・「html.systems」

html.systems html.systemsはHTML/CSS/JavaScriptで作られた汎用的なコンポーネントをまとめたプロジェクトサイトです。 各コンポーネントはその場で動作や表示の確認をしたり、コードをコピーした...
Ads