ツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリ・「Floating UI」
Floating UI Floating UIはツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリです。 表示位置の調整やスクロールした際の位置調整など、ユ...
Resource - Webデザイナー向け
開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリ・「Tiny UI Toggle」
Tiny UI Toggle Tiny UI Toggleは開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリです。 なるべく少ないコードで汎用的なUIを使う、みたいな試みで、カス...
ダミー画像をイラストで生成してくれるダミー画像生成サービス・「Doodle Ipsum」
Doodle Ipsum Doodle Ipsumはダミー画像をイラストで生成してくれるダミー画像生成サービスです。他のダミー画像サービスと同様にURLとパラメーターで制御する事も出来ます。 テイストは日本向けじゃないかもしれま...
HTMLのタグ内に含めて良いタグかどうかを教えてくれる、HTMLタグのネスト可否チェックツール・「Can I Include」
Can I Include Can I IncludeはHTMLのタグ内に含めて良いタグかどうかを教えてくれるWebアプリです。HTMLタグがネスト可能かどうかをチェックできる、というもの。 調べ方は簡単で、左に子、右に親のHT...
CSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できる・「cssbuttons.io」
cssbuttons.io cssbuttons.ioはCSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できるWebアプリです。 Githubのアカウントでログインすればエディタが使えるようになります。Co...
CodePenやJSFiddleにインスパイアされたHTML/CSS/JavaScriptのコードを実行できるOSSデスクトップアプリ・「Code Box」
Code Box Code BoxはJSFiddleにインスパイアされたHTML/CSS/JavaScriptのコードを実行できるOSSデスクトップアプリです。 Electronで作られておりWindows、Mac、Linuxな...
スマホやタブレット向けのアプリアイコンをデザインできるWebアプリ・「IconKitchen」
IconKitchen IconKitchenはスマホやタブレット向けのアプリアイコンをデザインできるWebアプリです。ユーザー登録不要でどなたでも利用できます。 プレビューを見ながらアイコンを作成する事が出来るようになっており...
好みの形のblobをSVGで作れるシェイプジェネレーター・「ssshape」
ssshape ssshapeは好みの形のblobをSVGで作れるシェイプジェネレーターです。以前ご紹介したBlobsはランダムでしたがこちらは形を自分で決める事が出来ます。 ポイントの場所を指定すれば右下に☆ssshapeとい...
モバイルデバイス向けのWebサイト構築のために開発された開発者向けブラウザ・「LT Browser」
LT Browser LT Browserはモバイルデバイス向けのWebサイト構築のために開発された開発者向けブラウザです。クロスブラウザテストのアプリを公開しているLambdaTestが開発したブラウザになります。 プリインス...
任意のWebサイトで画像が最適化されているかを調べるCloudflare製のチェックツール・「Image Optimization Test」
Image Optimization Test Image Optimization Testは任意のWebサイトで画像が最適化されているかを調べるチェックツールです。 CDNでお馴染みのCloudflare製となっており、チェ...
カーソルの外観や動作などの高度なカスタマイズが可能なオープンソースのライブラリ・「Blobity」
Blobity Blobityはカーソルの見た目や動きなどの高度なカスタマイズが可能なOSSのJavaScriptライブラリです。 形状や色、サイズからアニメーション、背景に応じた色の変化、任意の要素にフォーカスした際に形状変化...
6000個のアイコンをOSSで配布するVuesax公式のアイコンセット・「iconsax」
iconsax iconsaxは6000個のアイコンをOSSで配布するVuesax公式のアイコンセットです。Vuesaxは数年前にご紹介しましたVue.jsベースのUIコンポーネントフレームワークです。 1000のアイコンにそれ...
webpにも対応の、自動で背景を透過処理するAI搭載の背景削除ツール・「Erase.bg」
Erase.bg Erase.bgはwebpにも対応の、自動で背景を透過処理する背景削除ツールです。過去に何度かご紹介したツールとほぼ同等のものになります。 背景削除は自動で行われる為、何を対象に残すかは制御できませんが、精度は...
ダイナミックなアニメーション背景を生成するジェネレーター・「pocoloco」
pocoloco See the Pen Untitled by kachibito (@kachibito) on CodePen. pocolocoはダイナミックなアニメーション背景を生成するジェネレーター...
リンクやボタンなどに使えるピュアCSSアニメーションのコレクション・「Annimay」
Annimay Annimayはリンクやボタンなどに使えるピュアCSSアニメーションのコレクションです。 ボタン等でよく使われているのを見かけるアニメーションが一通りそろえられています。CSSファイルの他、SCSS、LESSもサ...
映画ポスターやCDアルバムのカバー、本のカバーなどのダミー画像アプリ・「Lorem.space」
Lorem.space Lorem.spaceは映画ポスターやCDアルバムのカバー、本のカバーなどのダミー画像アプリです。 使い方も他のダミー画像サービスと同じ感じで、例えばポスターなら以下のように。 本のカバーな...
WCAG 2.1に基づいたアクセシビリティを図解入りで分かりやすく解説する・「Access Guide」
Access Guide Access GuideはWCAG 2.1（Web Content Accessibility Guidelines）に基づいたアクセシビリティを図解入りで分かりやすく解説するプロジェクトサイトです。 ...
タッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリ・「Atropos」
Atropos Atroposはタッチフレンドリーな3Dパララックスを実装する軽量JavaScriptライブラリです。 PCではマウスホバーで、タッチデバイスではドラッグで動かす事が出来ます。非依存で軽量なので手軽に導入する事が...
次世代手書き2Dアニメーション技術のVector Graphics Complex（VGC）を扱えるクロスプラットフォーム対応のデスクトップドローアプリ・「VPaint」
VPaint VPaintは次世代手書き2Dアニメーション技術のVector Graphics Complex（VGC）を扱えるクロスプラットフォーム対応のデスクトップドローアプリです。 VGCとは、より効率的に2Dアニメーショ...
Tailwind.cssで利用できる様々なUIのHTMLコードを配布する・「Flowrift」
Flowrift FlowriftはTailwind.cssで利用できる様々なUIのHTMLコードを配布するWebサイトです。Tailwind.cssが読み込まれたWebページにHTMLを貼るだけで使う事が出来ます。 コードはブ...
Web Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリ・「Motion One」
Motion One Motion OneはWeb Animations APIを使った軽量で高速なオープンソースのアニメーションライブラリです。 使い方も以下のようにとてもシンプルで、軽量なAnime.jsのさらに半分のファイ...
ベーシックなタイプのいろいろなSVGパターンを配布する・「Basic Pattern Repository」
Basic Pattern Repository Basic Pattern RepositoryはベーシックなタイプのいろいろなSVGパターンを配布するパターン配布サイトです。 斜線や罫線、方眼、波線などどこでも見かけるような...