書いたコードを画像化して保存できる・「CodeZen」
CodeZen CodeZenは書いたコードを画像化してダウンロードできるWebサービスです。以前書いたcarbonとほぼ同等のサービスですが、こちらはcarbonのようなツイート機能はありません。また、carbonはOSSである事か...
Resource - Webディレクター向け
インタラクティブに動作し、様々なタイプのチャートに対応できるOSSのチャートライブラリ・「apexcharts.js」
apexcharts.js See the Pen TimeSeries Demo by kachibito (@kachibito) on CodePen. apexcharts.jsはインタラクティブに動作する、様々なチャートに...
インフォグラフィックに使えるアイコンを配布する・「Infographic Icons」
Infographic Icons Infographic Iconsはインフォグラフィックの作成に使えるアイコンを配布するプロジェクトです。ブラウザでインフォグラフィックを作成できるサービスを展開するAdiomaが配布しているもので...
スタートアップのピッチデッキをまとめたプレゼンのコレクション・「Pitchenvy」
Pitchenvy Pitchenvyはスタートアップの企業やプロジェクトのピッチデッキをまとめたスライドギャラリーです。ピッチデッキは投資家や顧客、スポンサー候補などに対するプレゼンで、簡潔に短時間で伝えたいことを誤解なく使える、と...
軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」
Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...
Webページの任意の要素に設定されたCSSをチェック、コピーできるブラウザ拡張・「CSS Scan」
CSS Scan CSS ScanはWeページの任意の要素のCSSをチェックし、クリップボードにコピーできるブラウザ拡張です。ChromeとFirefox用が用意されていますが、この手のものにしては珍しく有料でgumroadにて3US...
ライブラリやエディタ、フレームワーク等の多種多様なチートシートをまとめている・「Devhints」
Devhints Devhintsはライブラリやエディタ、フレームワーク等の多種多様な技術に関する簡易的なチートシートをまとめているプロジェクトサイトです。vscodeやatomなどのエディタアプリやCSS、HTML、JavaScri...
スタッキング出来るモーダルウィンドウ実装スクリプト・「Popbox.js」
Popbox.js Popbox.jsはポップアップをスタッキングできるモーダルウィンドウスクリプトです。表示されたモーダルウィンドウからさらに子ウィンドウを表示できる、というもの。依存性もなく単体で動作、サイズも軽量です。入れ子に出...
シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」
Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...
ホイールタイプのシンプルなカラーパレットジェネレーター・「wheel」
wheel wheelはホイール上にスキームを生み出すカラーパレットツールです。デフォルトでは21色が用意されており、ツールバーで色相や明度等を調整すれば自動で全カラーが変更されるようになっています。ライセンスの明記はありませんがGi...
一般的なUIを組み合わせてHTMLテンプレートを作成できるソフトウェア・「Stitches」
Stitches Stitchesはよく利用されるUIをD&Dで組み合わせて好みのWebサイトテンプレートを作成できるソフトウェアです。作りもシンプルで個人的に好みだったので備忘録。デフォルトではTailwind CSSがベースとなっ...
シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」
Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...
CSSのコードと解説を共有できる・「CSS Playground」
CSS Playground CSSのコードと解説を共有できるPlaygroundツールです。左ペインに解説、右ペインにはjsfidleライクなエディタ兼ビューエリアが設置されており、解説を見ながら動作を確認、学習できる、というもの。...
ランディングページを簡単に構築出来るLP作成ツール・「Flauntly」
Flauntly FlauntlyはLPを簡単に作成出来るLP作成ツールです。D&Dとテキスト入力等の簡単な操作で完了、コーディングスキルは不要です。沢山のコンポーネントを組み合わせてLPを完成させる事ができます。よくあるツールですが...
モダンなデザインのBoostrapベースのOSSな管理画面テンプレート・「Shards Dashboard Lite」
Shards Dashboard Lite Shards Dashboard Liteはモダンなデザインの管理画面テンプレートです。OSSで公開されており、Bootstrapをベースに構築されています。以前ご紹介したUIキットのSha...
ミニマルなWebサイトやWebアプリを作成できるオープンソースソフトウェア・「Itty.bitty」
Itty.bitty Itty.bittyはミニマルなWebサイトやWebアプリを作成できるOSSです。HTMLやCSS、JavaScriptなどを入力すればそのまま反映される、というもの。Twitter等で長い文章を手軽に共有できる...
LaravelでCMSを作るためのオープンソースのツールキット・「Twill」
Twill TwillはLaravelの為のCMS作成ツールキットです。Laravelパッケージとして提供されているようです。ドキュメントを見る限りCMSに必要とされる機能は一通りそろえられているようです。OctoberとかLaval...
ソートや内容の編集等が可能なシンプルなデータテーブル実装ライブラリ・「Frappe DataTable」
Frappe DataTable Frappe DataTableはシンプルながらパワフルなデータテーブル実装ライブラリです。列でのソートやセル内の内容の編集、カラムのリサイズ等が可能となっています。上サンプルでは変更していません...
データをグラフ等に可視化出来るオープンソースのスクリプト・「picasso.js」
picasso.js picasso.jsはデータビジュアライゼーションの為のスクリプトです。OSSとして公開されています。様々なグラフにも対応しており、プラグインによる拡張も可能との事。使い方も割と優しい印象でした。可もなく不可もな...
カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」
fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...
Google Fontsの各フォントをタグ付けして探しやすく整理している・「Font Library」
Font Library Font Libraryは大量に存在するGoogle Fontsのフォントをタグでカテゴライズし、探しやすくするプロジェクトです。OSSとして公開されています。タグ付けし、整理して探しやすくしたもので、各アイ...
安全性を強く意識したストレージサービス・「CRYPTEE」
CRYPTEE CRYPTEEは、安全性をより強く意識して作られたセキュアなストレージサービスです。文章や画像を暗号化して保存してくれるとの事。ゼロ知識証明を利用したクラウドタイプのストレージサービスで、匿名で利用可能、AES-256...