UIデザイン用のシンプルにデザインされた高品質なSVGアイコンが2000種類以上！ 改変・再配布も可の太っ腹ライセンス -Atlas Icons
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるAtlas Iconsを紹介します。 UIデザインをはじめ、ビジネス、ソーシャル、ハンドジェスチャー、ガジェット、エコロジー、フィットネス、食べ物・飲食物、医療など、33種類のカテゴリに2,000種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。 SVGアイコンだけでなく、Webフォント、Figma用なども揃っているので、使い勝手もよく、非常に便利です。 Atlas Icons Atlas Icons -GitHub Atlas Iconsの特徴 Atlas Iconsのダウンロード Atlas Iconsのアイコン Atlas Iconsの特徴 Atlas Iconsは、WebサイトやスマホアプリのUI用にシンプルにデザインされた
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI
アコーディオン、モーダル、タブなど、Webページでよく使用されるインタラクティブなUIコンポーネントをCSSで実装する超軽量ライブラリを紹介します。 各UIコンポーネントは個別のCSSファイルで管理されており、JavaScriptは一切必要なし。デザインは非常にシンプルで、カスタマイズも簡単です。 CSSUI MITライセンスで、商用プロジェクトでも無料で利用できます。 ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。 カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。 スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。 ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のW
フローチャート機能を備えたWebアプリの作成を非常に簡単にするJavaScriptライブラリを紹介します。フローチャートやマインドマップなど簡単なプログラミングプラットフォームを数分で構築することができます。 Flowy -GitHub Flowyの特徴 Flowyのデモ Flowyの使い方 Flowyの特徴 Flowyは、フローチャート機能を備えたWebアプリの作成を非常に簡単にするJavaScriptライブラリです。 Flowyは以下の機能をサポートしています。 ドラッグ&ドロップ（レスポンシブ対応） 自動スナップ ブロックの再配置 ブロックの削除 ブロックの自動センタリング 条件付きスナップ 保存したファイルのインポート スマホ・タブレットのサポート jQueryをES6に置き換える（対応予定） npmでのインストール（対応予定） MITライセンス Flowyのデモ デモページでは、
ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与えるだけで実装できます。
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
ページが表示された時に要素をアニメーションで表示させたり、ギャラリーで画像を出し入れするようにアニメーションで表示させたり、モーダルやタブをアニメーションで気持ちよく表示させたり、Webページやスマホアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSのライブラリを紹介します。 CSSの外部ファイルとして利用できるだけでなく、Sass、VueやReactのコンポーネントも用意されており、さまざまなプロジェクトですぐに利用できます。 AnimXYZ AnimXYZ -GitHub AnimXYZの特徴 AnimXYZのデモ AnimXYZの使い方 AnimXYZの特徴 AnimXYZは、Webページやスマホアプリで使用されるさまざまなCSSアニメーションを簡単に実装できるMITライセンスのライブラリです。 アニメーションの実装が簡単 アニメーションを作成するのは非常に簡単。例え
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。 実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。 スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。 ScrollBtween ScrollBtween -GitHub ScrollBtweenの特徴 ScrollBtweenのデモ ScrollBtweenの使い方 ScrollBtweenの特徴 ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネ
スクロールバーは、長いコンテンツのWebサイトに不可欠な要素です。ブラウザにはスクロールバーのデフォルトのスタイルがありますが、サイトのデザインに最適とは限りません。スクロールバーのデザインを変更するのは、CSSで簡単にできます。 スクロールバーのデザインを変更するCSSを確認しながら生成できるオンラインツールを紹介します。 Scrollbar.app Scrollbar.app -GitHub スクロールバーのデザインを変更するCSS Scrollbar.appの特徴 Scrollbar.appのの使い方 スクロールバーのデザインを変更するCSS スクロールバーのデザインを変更するCSSは、下記の通りです。 ::-webkit-scrollbar: スクロールバー全体 ::-webkit-scrollbar-thumb: ドラッグ可能なスクロールのハンドル ::-webkit-scrol
商用でも完全に無料！ WebサイトやアプリのUIに適したシンプルデザインで、SVG完備のアイコン素材 -Sargam Icons
企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるSargam Iconsを紹介します。 アイコンは下記のラインをはじめ、デュオトーン・塗りの3種類で、700個以上が揃っています。しかもオープンソースなのは、嬉しいですね。 Sargam Icons Sargam Icons -GitHub Sargam Iconsの特徴 Sargam Iconsのダウンロード Sargam Iconsのアイコン Sargam Iconsの特徴 Sargam Iconsは700個以上のアイコンが揃った、シンプルで一貫性の高いSVGアイコンのセットです。 ライセンスはMITライセンスで、商用プロジェクトでも無料で利用できます。
カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。 ぱたぱた回転するアニメーションが非常に気持ちよく、今まで紹介した中でもピカイチだと思います。 クイックフリップ 高性能フリップアニメーション、フリップカードはオーバーラップできます。値は毎秒複数回更新。 タイムスナップ タイマーのアルゴリズムはJavaScriptのsetIntervalを自動的に修正するため、高精度の間隔精度が得られます。 サーバー同期 追加の構成要件なしで、クライアントとサーバーの時刻を自動的に同期。 Tickエンジン Flipの背後にあるTickエンジンは、豊富なカウンターテンプレートの構築と変換構成をサポート。 対応ブラウザは、下記の通りです。 Chrome Firefox Edge Opera Safari 9+ iOS
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。 アニメーションにも対応しており、マーカーをさっと引いたり、丸でくるっと囲んだりも簡単に実装できます。アニメーションはオフにすることもできます。 Rough Notation Rough Notation -GitHub Rough Notationの特徴 Rough Notationのデモ Rough Notationの使い方 Rough Notationの特徴 Rough NotationはRoughJSを使用して、SVGでマーカーを引いたり、下線をつけたり、丸で囲ったり、さまざまなスタイルでテキストを強調表示できます。マーカーや下線や丸はアニメーションにも対応しており、オフにすることもで
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
Webサイトやスマホアプリでよく使用されるUIコンポーネントをTailwind CSSのユーティリティクラスで実装したオープンソースのライブラリを紹介します。 Tailwind CSSには、コンポーネントの基本セットがありません。FlowBiteではナビゲーションバー、カード、ボタン、ページネーション、フォームなど基本的なコンポーネントがすべて揃っています FlowBite FlowBite -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました FlowBiteの特徴 FlowBiteの使い方 FlowBiteのコンポーネント FlowBiteの特徴 FlowBiteは、Tailwind CSSのユーティリティ
個人でも商用でも無料で利用できる、高解像度8Kのさまざまな種類のテクスチャ素材を紹介します。 ホワイトペーパー、ブラックペーパー、クラフトペーパー、段ボール、デニム地、水彩、グラデーションなどが揃っており、それぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。難点はダウンロードに少し時間がかかるくらいでしょうか。 テクスチャ素材はなんぼあってもいいですからね🍼
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
ユーザーがボタンのクリックなど、アクションをした際に紙吹雪やハートをクラッカーで弾けたようなエフェクトで表示する、楽しさを演出するJavaScriptライブラリを紹介します。 クリックするのが楽しくなるエフェクトがたくさん揃っており、「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に伝えることができます。 Party.js Party.js -GitHub Party.jsの特徴 Party.jsのデモ Party.jsの使い方 Party.jsの特徴 Party.jsは「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に表現するエフェクトを実装し、ユーザーのサイトエクスペリエンスを明るく楽しくするJavaScriptライブラリです。 ユーザーのアクションに伴い、紙吹雪やハートやキラキラなどのエフェクトを簡単に実装できます。 実装が簡単 ライブラリをHTMLファイルに含め
商用のプロジェクトでも無料で利用できる、スマホなどの小さなスクリーンに適した極小サイズでくっきりと鮮明に見えるSVGアイコンを紹介します。 SVGなので、もちろん大きいサイズでも美しく表示され、カラーの変更も簡単。しかもオープンソースなのは、嬉しいですね。 Radix Icons Radix Icons -GitHub Radix Iconsの特徴 Radix Iconsのダウンロード Radix Iconsの使い方 Radix Iconsの特徴 Radix Iconsはスマホなどの非常に小さいスペースでも視認性を損なわずに使用できるようデザインされたSVGアイコンで、極小サイズ（15x15）でもくっきりと鮮明に見えるようにデザインされています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
WebサイトやスマホアプリのUIデザインにぴったりなSVGアイコンを紹介します。「Humble」の名の通り、主張しすぎない控えめでシンプルなデザインです。 オープンソースで個人でも商用でも無料で利用できます。アイコンはSVGなので、サイズやカラーの変更はCSSで簡単にできます。さらに、Figma用も用意されているのは、嬉しいですね。 Humbleicons Humbleicons -GitHub Humbleiconsは、WebサイトやスマホアプリのUIデザイン用にニュートラルでシンプルにデザインされたSVGアイコンのセットです。MITライセンスで商用プロジェクトでも無料で利用できます。 アイコンはまとめて全部のダウンロードもできます（後述）が、個別に使用することもできます。アイコンをクリックすると、SVGのインライン・スプライトのコードがコピペできます。
普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。 日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Terminal CSS Terminal CSS -GitHub Terminal CSSの特徴 Terminal CSSの使い方 Terminal CSSのコンポーネント Terminal CSSの特徴 Terminal CSSは、ターミナル愛好家のためのモダンでミニマルなCSSのフレームワークです。ソースはCSSで記述されており、アクセシブルで、非常に軽量（3k gzip）です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。
画像をホバーしたときにテキストを重ねたり、ボーダーをアニメーションさせたり、拡大表示させたり、さまざまなエフェクトを簡単に実装できるCSSの超軽量（2Kb）ライブラリを紹介します。 HTMLにclassを与える簡単実装。エフェクトは組み合わせることも可能で、オーバーレイやテキストやボーダーなどを自由に組み合わせて実装することができます。 Izmir Izmir -GitHub Izmirの特徴 Izmirの使い方 Izmirのカスタマイズ Izmirの特徴 Izmirは、画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSのライブラリです。エフェクト用のclassはかなりの数が用意されており、HTMLにclassを追加するだけで、完璧なホバーエフェクトを実装できます。 MITライセンスで、商用プロジェクトでも無料で利用できます。 Izmir 主な特徴は、下記の通り。 エフェク
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。 hue.tools hue.tools -GitHub hue.toolsの特徴 hue.toolsはカラーを操作するためのシンプルなツールで、そのカラーの詳細情報、そのカラーを使用したデザインや写真、混色・ブレンド・変換などを簡単に利用できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 hue.toolsには、4つの機能が用意されています。 info 指定したカラーをさまざまな色空間やフォーマットに変換 Dribble、Behance、Pexelsなどで同じ
Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js
Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づくドリーインなどのエフェクトを簡単に実装できます。 PushIn.js PushIn.js -GitHub PushIn.jsの特徴 PushIn.jsのデモ PushIn.jsの使い方 PushIn.jsの特徴 PushIn.jsはJavaScriptとCSSを使用して、ユーザーがWebページをスクロールしたときに指定した要素のスケールを操作することにより、要素が移動するような錯覚を作り出します。ブラウザに組み込まれているrequestAnimationFrameを使用しており、
医療・健康に関連したアイテムが揃ったアイコン素材を紹介します。 血液型のアイコン、医療機器・デバイスのアイコン、診療をあらわすアイコン、錠剤などの医薬品のアイコン、看護アイテムのアイコン、医療・健康の建物や場所のアイコンなど、たくさんのアイコンが揃っています。
SNSやテレビなどで見かける、横棒グラフの変化をアニメーションで表示するオープンソースのオンラインツールを紹介します。 データは.csvにも対応しており、誰でも簡単に利用できます。 値の変化が非常に分かりやすく、プレゼンなどにもいいですね。 Bar chart race -GitHub Bar chart raceの特徴 Bar chart raceの使い方 Bar chart raceの特徴 Bar chart raceは、横棒グラフがレースをするかのようにその変化をアニメーションで表示するオンラインツールです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 上記のロングバージョン Bar chart raceの使い方 Bar chart raceは、下記ページから利用できます。 横棒グラフのデータ（.csv）を用意し、アニメーション時間を設定するだけです。データが無い人
イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass
アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。 HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます。 IsometricSass IsometricSass -GitHub IsometricSassの特徴 IsometricSassのデモ IsometricSassの使い方 IsometricSassの特徴 IsometricSassはJavaScriptを必要としないSassベースのフレームワークで、CSSの3D Transformsを使用してアイソメトリックの空間をWebページ上につくりだします。MITライセンスで、商用でも無料で利用できます。 要素を配置するだけでなく、シャドウをつけたり、アニメーションに浮かせたり、回
ブラウザに表示されたWebページはもちろん、Photoshop, Illustratorをはじめとするすべてのアプリからカラーをすくうことができる、シンプルで使いやすい高性能なカラーピッカーを紹介します。 macOS対応のアプリで、オープンソースなので商用でも無料で利用できます。 カラー値は、HEX、RGB、HSB、HSLに対応。 ネイティブで非常に高速 macOS 10.15 Catalina以降対応のアプリです。 アクセシビリティ重視 カラーを比較して、WCAGへの準拠をすばやく確認できます。 コンパクト メニューバーに対応、必要のないときに邪魔になりません。 ログイン時に起動 設定からログイン時に起動を選択、いつでもクリックまたはショートカットでアクセスできます。 アクセスが簡単 設定からグローバルホットキーを設定できます（⇧⌘Dがお勧め）。 カラーのフォーマット HEX、RGB、H
ビフォーとアフターの画像をコントローラーをスライドさせて比較するビューワーを簡単に実装できるスクリプトを紹介します。バニラJavaScriptで実装されており、他のスクリプトへの依存は一切ないので、利用しやすいと思います。 この手のスクリプトは今までにいくつか紹介してきましたが、今回のが一番いいかもしれません。 Image Compare Viewer Image Compare Viewer -GitHub Image Compare Viewerの特徴 Image Compare Viewerのデモ Image Compare Viewerの使い方 Image Compare Viewerの特徴 Image Compare Viewerは、ビフォーとアフターの画像をスライドして比較するビューワーを簡単に実装できます。 ということで、さっそく実装してみました。 中央のコントローラーをスラ
ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider
ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。
Webページ上にLEGO®のようなブロックでさまざまな形を作成できる、3.4Kbの超軽量JavaScriptライブラリを紹介します。 矩形や枠線をはじめ、ラインや楕円やベジェ曲線やグラフやアートなどもブロックで簡単に作成できます。 LegraJS LegraJS -GitHub LegraJSの特徴 LegraJSのデモ LegraJSの使い方 LegraJSの特徴 LegraJSは、Lego® brick GraphicsのLeとGraを繋げた造語で、HTMLの<canvas>要素を使用してWebページにLEGO®のようなブロックのさまざまな形を簡単に描画できるJavaScriptライブラリです。 3.4Kbの超軽量で、他のJavaScriptへの依存はありません。 MITライセンスで利用できます。
GitHub - dnakov/little-rat: 🐀 Small chrome extension to monitor (and optionally block) other extensions' network calls
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Webページやスマホアプリで使用するボタンをモジュール式の拡張可能なCSSで実装されたライブラリを紹介します。 通常のボタンのさまざまなスタイルだけでなく、アイコン付きボタン、ブロック状のボタン、リフレッシュボタン、グルーピングボタン、プルダウンボタンなどを簡単に実装でき、Webページやスマホアプリだけでなく、プロトタイプにも適しています。 Knopf.css Knopf.css -GitHub Knopf.cssの特徴 Knopf.cssのデモ Knopf.cssの使い方 Knopf.cssの特徴 Knopf.cssはWebページやスマホアプリ、そしてプロトタイプの両方向けに設計された、モダンCSSで実装されたモジュール式の拡張可能なボタンシステムです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
さまざまなフィルター効果を画像に適用できるCSSのライブラリを紹介します。 JavaScriptは一切無しで、classを付与するだけで簡単に利用できます。 画像に磨りガラスのパネルを重ねたり、白黒やセピア色にしたり、さまざまなフィルター効果をサポートしています。
Azureのプロダクト名のtypoを検知するtextlintのルールをnpmで公開してみた - Alternative Architecture DOJO
こんにちは、クラウドソリューション部の花岡です。 この記事はオルターブースアドベントカレンダー2023の23日目の記事です。 adventar.org だんだんとクリスマス 🎄 が近づいてきました！ 街はにぎやかお祭り騒ぎでチキンライスが食べたくなる時期です はじめに 今回は文章校正ツールである(textlint)https://textlint.github.io/を使ってAzureのプロダクト名のtypoを検知するルールを作成し公開しました。 AWSのサービス名のtypoを検知できるルールを作ったクラスメソッドさんのブログを見て、Azure版もあれば便利だなと思いOSSで作ってみました。 実装も大いに参考にしています。 dev.classmethod.jp NPMパッケージで公開してます。 www.npmjs.com ソースはこちら、MITライセンスで公開してます。 github.c
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
フローチャート機能を備えたWebアプリの作成を非常に簡単にするJavaScriptライブラリ -Flowy
CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
Webページやアプリで使用されるさまざまなアニメーションを簡単に実装できるCSSの超軽量ライブラリ -AnimXYZ
CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
これは簡単で楽！ スクロールバーのデザインを変更するCSSを確認しながら生成できるツール -Scrollbar.app
これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown
SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation
便利なのが登場！ Tailwind CSSで実装されたOSSのUIコンポーネント集 -FlowBite
商用利用でも完全に無料！ デザインやイラストにぴったり、高解像度8Kのテクスチャ素材がいっぱい -ResourceBoy
UIでボタンをクリックするのが楽しくなるエフェクトがたくさん揃ったJavaScriptライブラリ -Party.js
商用利用無料！スマホなどのUIデザインに最適、極小サイズでくっきりと鮮明に見えるSVGアイコン -Radix Icons
商用利用無料！ UIデザインに最適、シンプルで控えめにデザインされたSVGの高品質なアイコン素材 -Humbleicons
テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js
ターミナルのシンプルなUIが好きな人に！ モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS
HTMLはシンプル！ 画像をホバーしたときのさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools
商用プロジェクトでも完全に無料！病院・医療・看護・健康に関するアイテムが揃ったアイコン素材 -Health Icons
プレゼンで使ってみたい！横棒グラフのデータ変化をアニメーションで表示するオンラインツール -Bar chart race
すべてのアプリから色を取得できる！シンプルで使いやすく、高性能なUIデザイン用の無料カラーピッカー -Pika
ビフォーとアフターの画像を比較するビューワーを実装できる軽量スクリプト -Image Compare Viewer
Webページ上にLEGO®のようなブロックでさまざまな形を作成できる超軽量JavaScriptライブラリ -LegraJS
CSSでさまざまなスタイルのボタンを簡単に実装できる！モジュール式の拡張可能なCSSライブラリ -Knopf.css
CSSで画像に磨りガラスのパネルを重ねたり、フィルター効果を適用するだけのシンプルなライブラリ -filters.css