Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」 NeoBrutalismCSS NeoBrutalismCSSはWebにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワークです。 デザインにおける「ネオ・ブルータリズム」は20世紀半ば頃のブルータリズム建築運動(W...2023.10.19 | 10時04分40秒
クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」 CSS Selectors: A Visual Guide CSS Selectors: A Visual GuideはクラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べるWebサイトです。 テキ...2023.08.19 | 10時02分10秒
設定に合わせたデザイントークンを発行できるオープンソースのデザインシステムフレームワーク・「mirrorful」 mirrorful mirrorfulは設定に合わせたデザイントークンを発行できるオープンソースのデザインシステムフレームワークです。 デザイントークンとは?という方は、以前もご紹介しましたが以下の記事をご参照下さい。 ...2023.04.07 | 10時02分04秒
ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集・「Theme Toggles」 Theme Toggles Theme Togglesはライトモード/ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集です。MITライセンスの元OSSとしてソースコードが公開されています。 太陽と月のアイ...2023.03.13 | 10時01分51秒
CSSのビジュアル開発環境として開発された、Web上の要素のスタイルを編集できるオープンソースのビジュアルツールキット・「CSS GUI」 CSS GUI CSS GUIはCSSのビジュアル開発環境として開発された、Web上の要素のスタイルを編集できるオープンソースのビジュアルツールキットです。 既にある要素をクリックするとアウトラインが表示され、左ペインのツールエ...2022.06.12 | 10時08分46秒
完成図を見て正しいコードを選択するクイズ形式でCSSを視覚的に学べる・「Guess CSS!」 Guess CSS! Guess CSS!はクイズ形式でCSSを視覚的に学べるWebアプリです。完成図を見て正しいコードを選択するクイズ形式となっています。 文章での出題ではなく、正しいコードを選ぶだけのシンプルな問題なので...2021.12.24 | 10時02分19秒
class不要で見た目をミニマルスタイルに整えてくれるclass-lessなCSSフレームワーク・「DreamCSS」 DreamCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. DreamCSSはclass不要で見た目をミニマルスタイルに整えて...2021.12.12 | 10時08分44秒
任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリ・「ANALYZE CSS」 ANALYZE CSS ANALYZE CSSは任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリです。URLだけでなく直接CSSのコードを入力する事も可能です。 提出される詳細データは非常に細かく、行...2021.10.29 | 10時08分45秒
複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」 Griddle See the Pen by kachibito (@kachibito) on CodePen. Griddleは複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワークです。CS...2021.08.16 | 10時19分37秒
読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」 Checka11y.css Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手...2021.06.10 | 10時03分58秒
すりガラス風のCSSを、プレビューで確認しながらコードを生成できる・「Glassmorphism」 Glassmorphism Glassmorphismはすりガラス風のCSSを、プレビューで確認しながらコードを生成できるシンプルなWebアプリです。ぼかしの度合いと透過、色を設定する事が出来ます。 理屈は理解してても書くのが面...2021.02.04 | 10時07分45秒
「CSSに足りない機能は?」に対する様々な回答を確認出来る・「What’s Missing From CSS?」 What's Missing From CSS? What's Missing From CSS?は「CSSに足りない機能は?」に対する開発者の様々な回答を確認出来る調査プロジェクトです。 個人的にもCSS変数やclac()、F...2020.12.22 | 10時16分21秒
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...2020.12.11 | 10時12分26秒
CSSの用語を視覚的に学べる・「CSS Vocabulary」 CSS Vocabulary CSS VocabularyはCSSの用語を視覚的に学べるスタディサイトです。教育機関や研修など、教材向けに良さそうです。 実際のCSSのコードが左ペインに書かれており、右ペインにCSSで使われてい...2020.08.10 | 10時09分29秒
マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」 Gradienta Gradientaはマルチレイヤーの複雑なCSSグラデーションを紹介、コードもコピーできるプロジェクトサイトです 各グラデーションはCSSだけでなくjpgとしても配布されており、それぞれダーク、ライト、シンプ...2019.12.22 | 10時13分58秒
各ブラウザのCSSのデフォルトスタイルを検索できる・「Browser Default Styles」 Browser Default Styles Browser Default Stylesは各ブラウザのデフォルトスタイルを検索できるWebアプリです 主要なレンダリングエンジン(WebKit、Blink、Gecko、T...2019.12.10 | 9時50分59秒
閲覧中のWebページの任意の要素のHTMLとCSSを選択してコードをjsfiddleのようなエディタで確認できるブラウザ拡張・「SnipCSS」 SnipCSS SnipCSSは閲覧しているWebページの任意の要素を選択すると、その要素に使われているHTMLとCSSを検出してjsfiddleのようなエディタで確認できるChromeエクステンションです。 ブラウザの...2019.09.04 | 10時14分46秒
シンプルさ重視の軽量CSSフレームワーク・「TypeSafe CSS」 TypeSafe CSS TypeSafe CSSはシンプルさ重視の軽量なCSSフレームワークです。見出し、パラグラフ、リスト、引用、テーブルとコードハイライトのみのスタイルを提供します。 日々複雑化していくWebの世界はそれは...2019.06.30 | 9時34分23秒
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」 Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...2019.05.28 | 11時02分59秒
700以上のシンプルなアイコンをオープンソースで提供するプロジェクト・「Font Kiko」 Font Kiko Font Kikoは700以上ものアイコンを無償提供するアイコンフォントプロジェクトです。シンプルで使いやすそうなスタイルのアイコンを3つのウェイトで無償配布しています。 アイコンはフォントの他、SV...2019.05.24 | 10時28分42秒
Webページ内で未使用のCSSを高速で削除してくれるライブラリ・「DropCSS」 DropCSS DropCSSはWebページで読み込まれているCSS内から未使用のコードを削除してくれるライブラリです。高速で未使用CSSを削除したコードを表示してくれるのが特徴です。他ライブラリに依存せず単体で動作してくれます。 ...2019.05.11 | 10時02分16秒
ミニマルを意識しつつ、出来る限り使いやすいCSSフレームワークを目指した・「boba」 boba bobaはミニマル設計を意識しつつも、必要最低限ではなく、出来る限り使いやすさを追求した、バランスの取れたCSSフレームワークです。有名なCSSフレームワークは肥大化しすぎ、敬遠したフレームワークはミニマルすぎる等、世にある...2018.12.20 | 10時11分42秒