Resource - CSS

ユーティリティでclamp()を簡単に生成できるようにするTailwindプラグイン・「Fluid for Tailwind CSS」

Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします

コピペで簡単利用も出来るオープンソースのTailwindベースUIコンポーネントライブラリ・「Tailframes」

Tailframesはシンプルで使いやすいオープンソースのTailwindベースUIコンポーネントライブラリです。コピペで簡単利用できるよう各コンポーネントのコードやサンプルも公開されています。

Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」

NeoBrutalismCSS NeoBrutalismCSSはWebにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワークです。 デザインにおける「ネオ・ブルータリズム」は20世紀半ば頃のブルータリズム建築運動(W...
Ads

クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」

CSS Selectors: A Visual Guide CSS Selectors: A Visual GuideはクラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べるWebサイトです。 テキ...

設定に合わせたデザイントークンを発行できるオープンソースのデザインシステムフレームワーク・「mirrorful」

mirrorful mirrorfulは設定に合わせたデザイントークンを発行できるオープンソースのデザインシステムフレームワークです。 デザイントークンとは?という方は、以前もご紹介しましたが以下の記事をご参照下さい。 ...

ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集・「Theme Toggles」

Theme Toggles Theme Togglesはライトモード/ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集です。MITライセンスの元OSSとしてソースコードが公開されています。 太陽と月のアイ...

CSSのビジュアル開発環境として開発された、Web上の要素のスタイルを編集できるオープンソースのビジュアルツールキット・「CSS GUI」

CSS GUI CSS GUIはCSSのビジュアル開発環境として開発された、Web上の要素のスタイルを編集できるオープンソースのビジュアルツールキットです。 既にある要素をクリックするとアウトラインが表示され、左ペインのツールエ...

完成図を見て正しいコードを選択するクイズ形式でCSSを視覚的に学べる・「Guess CSS!」

Guess CSS! Guess CSS!はクイズ形式でCSSを視覚的に学べるWebアプリです。完成図を見て正しいコードを選択するクイズ形式となっています。 文章での出題ではなく、正しいコードを選ぶだけのシンプルな問題なので...

class不要で見た目をミニマルスタイルに整えてくれるclass-lessなCSSフレームワーク・「DreamCSS」

DreamCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. DreamCSSはclass不要で見た目をミニマルスタイルに整えて...

任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリ・「ANALYZE CSS」

ANALYZE CSS ANALYZE CSSは任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリです。URLだけでなく直接CSSのコードを入力する事も可能です。 提出される詳細データは非常に細かく、行...

複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」

Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...

読み込むだけでアクセシビリティチェックを行える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...
Ads