Resource - CSS/HTML

高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」

Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...

クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」

CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...

軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」

Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...
Ads

NES.cssにインスパイアされたターミナルスタイルのCSSフレームワーク・「UITerminal」

UITerminal UITerminalはNES.cssにインスパイアされた、ターミナルスタイルのCSSフレームワークです。ドットフォントにはNES.cssと同じくPress Start 2Pが用いられています。各ボタンやプログレス...

よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」

CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...

どんなデバイスでも適切なフォントサイズにしてくれるスタイルシート・「RFS」

RFS RFSは様々なモニターサイズのデバイスでも適切なフォントサイズを計算するCSSです。RFSはresponsive font sizesの頭文字を取った略称だそう。Sass、PostCSS、Less、Stylusなどもサポートさ...

豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキット・「Fire」

Fire Fireは豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキットです。これからも増えるようでさらに期待できそうです。クリーンで見やすく、必要なUIも揃えられており、すべての要素が100%レスポンシブWebデ...

CSSで作られたポップでカラフルなフォント・「CSSans Pro」

CSSans Pro See the Pen CSSans Pro by kachibito (@kachibito) on CodePen. CSSans ProはCSSのみでポップでカラフルなフォントを作成、表...

CSSで出来る小技やTips等をまとめた・「.css{tricks}」

.css{tricks} .css{tricks}はCSSで出来るTipsや小技をまとめているプロジェクトサイトです。ローディングやタブ、リセットやテキストの省略などなど、特に一貫性はなく、地味に便利な小技を収集してる印象でした。中国...

ピュアCSSなマテリアルデザインコンポーネント集・「Matter」

Matter See the Pen Pure CSS Material Components Showcase by Ben Szabo (@finnhvman) on CodePen. MatterはCSSのみで作...

モジュール式のモダンなフロントエンドコンポーネントライブラリ・「Undernet」

Undernet Undernetはモジュール式のフロントエンドコンポーネントライブラリです。CSSの記述を極力削減し、必要な箇所はJSを使い、一般的なUIパターンを使用する事で開発者のエクスペリエンスを簡素化することを目的としたそう...

flexboxベースの軽量なCSSマイクロフレームワーク・「Strawberry」

Strawberry Strawberryはflexboxベースの軽量なCSSフレームワークです。圧縮版で30kbほどのようです。グラフィックに関わるスタイルは無く、各classにはプリフィクスが付いているので既存CSSに組み込んでも...

ミニマルを意識しつつ、出来る限り使いやすいCSSフレームワークを目指した・「boba」

boba bobaはミニマル設計を意識しつつも、必要最低限ではなく、出来る限り使いやすさを追求した、バランスの取れたCSSフレームワークです。有名なCSSフレームワークは肥大化しすぎ、敬遠したフレームワークはミニマルすぎる等、世にある...

CSSやHTMLのコードサンプルを収集している・「FREE FRONTEND」

FREE FRONTEND FREE FRONTENDはCSSやHTMLを使ったUIコンポーネントやエフェクトなどのコードサンプルをまとめ記事にして収集しているWebサイトです。モダンなスタイルのフォームやホバーエフェクトのサンプル、...

NES.cssにインスパイアされたPlaystation 1スタイルのCSSフレームワーク・「PSone.css」

PSone.css PSone.cssは先日ご紹介したNES.cssにインスパイアされたCSSフレームワーク。こちらはPlaystation 1スタイルとなっています。NES.cssは現在Githubでもすごく話題になっているので他に...

ファミコン風のスタイルを提供してくれるCSSフレームワーク・「NES.css」

NES.css NES.cssはファミコン(NES)ライクなスタイルを提供してくれるCSSフレームワークです。ダーシノ(@bc_rikko)さんの作られた国産フレームワークで、あくまでスタイルの提供となっています。僕自身もファミコン年...

シンプルで軽量、扱いやすいベーシックなCSSフレームワーク・「minstyle.io」

minstyle.io minstyle.ioはシンプルで軽量、扱いやすいCSSフレームワークです。minstyleの頭文字をプレフィクスに、要素の名称を付与する命名規則となっており、ユニーク且つ分かりやすい、学習コストを低くしつつも...

FlexboxベースのモバイルファーストなCSSフレームワーク・「Butter Cake」

Butter Cake Butter CakeはFlexboxベースのモバイルファーストなCSSフレームワークです。モジュール式で必要な機能は自身で追加していくタイプなので軽量に抑えることができます。よく必要とされるUIコンポーネント...

TEDが公開するオープンソースのAtomic CSSライブラリ・「shed.css」

shed.css shed.cssはTED.comが公開しているOSSのCSSライブラリです。「CSSの終わりの始まり」をキャッチコピーとしています。詳細はまだ調べていませんが、ユーティリティファーストを元に設計されており、それぞれの...

CSSのClip Pathを直感的な操作で簡単に作成できる・「Clip Path Generator」

Clip Path Generator Clip Path Generatorはその名の通りClip Pathを作成できるジェネレーターです。直感的な操作でパスを生成、コードを発行してくれる、というもの。マウス操作でパスを生成したら即...

43のローダーをまとめた・「43 loaders」

43 loaders See the Pen 43 loaders by Subin (@meemaw1) on CodePen. 43 loadersは43のCSSローダーをまとめたCodepenです。CSSといってもアニメーショ...

Webサイト開発スピードをサポートするモダンなCSSフレームワーク・「BuddyCSS」

BuddyCSS BuddyCSSはWebサイトの制作、開発スピードをサポートするモダンな設計のCSSフレームワークです。同梱されるすべてのコンポーネントはレスポンシブ、SassベースでタスクランナーにはGulpが用いられています。コ...
Ads