複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」
Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...
Resource - CSS
読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」
Checka11y.css Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手...
すりガラス風のCSSを、プレビューで確認しながらコードを生成できる・「Glassmorphism」
Glassmorphism Glassmorphismはすりガラス風のCSSを、プレビューで確認しながらコードを生成できるシンプルなWebアプリです。ぼかしの度合いと透過、色を設定する事が出来ます。 理屈は理解してても書くのが面...
「CSSに足りない機能は？」に対する様々な回答を確認出来る・「What’s Missing From CSS?」
What's Missing From CSS? What's Missing From CSS?は「CSSに足りない機能は？」に対する開発者の様々な回答を確認出来る調査プロジェクトです。 個人的にもCSS変数やclac()、F...
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...
CSSの用語を視覚的に学べる・「CSS Vocabulary」
CSS Vocabulary CSS VocabularyはCSSの用語を視覚的に学べるスタディサイトです。教育機関や研修など、教材向けに良さそうです。 実際のCSSのコードが左ペインに書かれており、右ペインにCSSで使われてい...
マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」
Gradienta Gradientaはマルチレイヤーの複雑なCSSグラデーションを紹介、コードもコピーできるプロジェクトサイトです 各グラデーションはCSSだけでなくjpgとしても配布されており、それぞれダーク、ライト、シンプ...
各ブラウザのCSSのデフォルトスタイルを検索できる・「Browser Default Styles」
Browser Default Styles Browser Default Stylesは各ブラウザのデフォルトスタイルを検索できるWebアプリです 主要なレンダリングエンジン（WebKit、Blink、Gecko、T...
閲覧中のWebページの任意の要素のHTMLとCSSを選択してコードをjsfiddleのようなエディタで確認できるブラウザ拡張・「SnipCSS」
SnipCSS SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。 ブラウザの...
シンプルさ重視の軽量CSSフレームワーク・「TypeSafe CSS」
TypeSafe CSS TypeSafe CSSはシンプルさ重視の軽量なCSSフレームワークです。見出し、パラグラフ、リスト、引用、テーブルとコードハイライトのみのスタイルを提供します。 日々複雑化していくWebの世界はそれは...
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」
Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...
700以上のシンプルなアイコンをオープンソースで提供するプロジェクト・「Font Kiko」
Font Kiko Font Kikoは700以上ものアイコンを無償提供するアイコンフォントプロジェクトです。シンプルで使いやすそうなスタイルのアイコンを3つのウェイトで無償配布しています。 アイコンはフォントの他、SV...
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」
DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用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フレームワーク・「minstyle.io」
minstyle.io minstyle.ioはシンプルで軽量、扱いやすいCSSフレームワークです。minstyleの頭文字をプレフィクスに、要素の名称を付与する命名規則となっており、ユニーク且つ分かりやすい、学習コストを低くしつつも...
43のローダーをまとめた・「43 loaders」
43 loaders See the Pen 43 loaders by Subin (@meemaw1) on CodePen. 43 loadersは43のCSSローダーをまとめたCodepenです。CSSといってもアニメーショ...
カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」
fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...
シンプルで直感的なSCSSフレームワーク・「FICTOAN」
FICTOAN FICTOANは直感的に使えるシンプルなSCSSフレームワークです。horizontal-center-thisなどといった分かりやすさ重視のclass命名、モジュール式で必要なものを必要な時に読み込むことでライトに使...
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」
tabler tablerはBootstrap 4ベースのシンプルなUIの管理画面テンプレートです。多くの場合は左カラムにメニューを配置するケースが多かった気がしますが、こちらは上部に配置されていますので操作性よりは視認性に優れている...
軽量でモバイルファーストなCSSフレームワーク・「Beauter」
Beauter Beauterは軽量でモバイルファーストなCSSフレームワークです。従来品と異なるのはBOLという実験的な命名規則を導入している点です。BOLは.base(基本クラス)、.-object(オブジェクトクラス)、._la...