【吐血まとめ】20種類以上のフロントエンド実践ツール、お気に入りに追加！

この記事では、プロジェクト開発時の開発効率向上に役立つフロントエンドの実践ツールを20個以上紹介しますので、ぜひ集めて使ってみてください。

1. CSS レイアウト ジェネレーター

レイアウト: https://layout.bradwoods.io/customize

これは、CSS グリッド レイアウト構文を使用してさまざまなタイプのレイアウトを生成し、グリッドのプロパティを任意に変更し、リアルタイムで画面を表示し、対応するレイアウトを生成するために使用される、フル機能の CSS および JSX ジェネレーターです。コード。もちろん、Flex レイアウトもあります (ただし、まだ完璧ではありません)。 [推奨学習: css ビデオ チュートリアル ]

2. Riju

Riju: https ://riju.codes/

Riju は 224 の言語を継承するオンライン コード実行プラットフォームです。非常にシンプルで広告もありません。強くお勧めします。

3. Whirl

Whirl: https://whirl.netlify.app/

Whirl は CSS アニメーションです他のアニメーションライブラリとは異なります 108個のローディングアニメーションを集めています シンプルかつユニークで学びの価値があります すべてのソースコードも公開されています

#4.ピカデイ

ピカデイ: https://pikaday.com/

Pikaday は、依存関係のない日付ピッカーで、軽量 (5k)、CSS モジュール性、そして非常にシンプルなスタイルです。特に気に入っています。驚くべきことに、Github で 7,000 個のスターを獲得しています

5. Tailwind コンポーネント

Tailwind コンポーネント: https://tailwindcomponents.com/

Tailwind コンポーネントは Tailwind UI キットですこの Web サイトは、コミュニティ

#6 によって提供されたさまざまな Tailwind コンポーネントのコレクションです。 -Kit: https://www.tailwind-kit.com/

Tail-Kit は最初の優れた Tailwind UI コンポーネント ライブラリであり、250 を超えるオープン ソース コンポーネントがあり、React、Vue と互換性があります。 Angular

7.tidy.js

tidy.js: https://pbeshai.github.io /tidy/

tidy.js は、データ処理用の JavaScript ライブラリです。これには、さまざまなカテゴリ (並べ替え、グループ化、数学、並べ替えなど) の 70 以上の関数が含まれています。

#8.party.js

party.js: https://party.js .org/

party.js は非常に興味深いものです。多くのブログ Web サイトを見たことがあるはずです。マウスをクリックまたはドラッグすると、クールなアニメーションがたくさんあります。このライブラリはまさにそれを実現します。これらの効果を簡単に実現できます

#9. AI 背景の削除

ベースライン: https://baseline.is/tools/background-remover/

baseline は、AI を使用して画像の背景を削除する無料のツール Web サイトです。JPEG と PNG をサポートしており、最終的には背景が透明な PNG 画像を返します

10. レイアウト パターン

レイアウト パターン: https://web.dev/patterns/layout/

レイアウト パターンは、 Google Developers の開発者リソース。レイアウト UI を構築するための CSS の使用がリストされています。現在、11 のレイアウトがリストされています~より多くの可能性を探るため、今後も追加され続ける必要があります。# を収集することをお勧めします。

##11. Lowdefy

#Lowdefy: https://lowdefy.com/

Lowdefy はオープンソースの Lowdefy です。 - YAML を使用して Web アプリケーション、管理パネル、BI ダッシュボード、ワークフロー、CRUD アプリケーションを簡単に構築するコード フレームワーク

12. ノーカット

アンカット: https://uncut.wtf/

アンカットは、オープン ソースに焦点を当てた最新のフォント カタログ Web サイトで、個人および商用で無料で使用できます。これを見てみると、合計 90 個のフォントが集められており、そこから選択できます~

十三、fetoolkit

fetoolkit: https://www.fetoolkit.io/

fetoolkit はフロントですCSS、JSON、アイコン、SVG、画像圧縮、npm、正規表現、その他のツールを含む、20 個のさまざまなコーディングおよび画像関連ツールが含まれる開発ツールボックス

## 14、Unicode Arrows

Unicode Arrows: https://unicodearrows.com/

Unicode Arrows は、さまざまな矢印に関連する 16 進コードのコレクションです。 .

#15. コンポーネント AI

コンポーネント AI: https://components.ai/

components AI は、構文強調表示ジェネレーター、グラデーション、シャドウ ツール、SVG パターン ジェネレーター、アニメーション背景などを含むテーマ ビルダーであり、これらはすべてオンラインでデバッグでき、非常に使いやすいです

#16. グリッター

グリッター：https://wh0.github.io/glitter/

Glitter は蛍光フォント ジェネレーターです。プロジェクトは複雑ではありませんが、見た目は良いです。テキストを自由に変更し、最終的に SVG

#Seventeen、Iconduck をエクスポートできます。

Iconduck: https://iconduck.com/

Iconduck は、キーワードで検索できる 100,000 個以上のアイコンを備えたオープンソースのアイコン Web サイトです。商用プロジェクトで使用可能

##18. pattern-generator

pattern-generator: https:// doodad.dev/pattern-generator/

pattern-generator は、背景画像の生成に役立つ Web サイトです。選択できるパターンは数十あり、各パターンの要素は次の方法で操作できます。ボタンを自由に変更し、最終的に JPEG、PNG、SVG、CSS の背景コードをエクスポートできるほか、終了後の最後の操作の内容の復元もサポートします。 #19. ボタンジェネレーター

ボタンジェネレーター: https://markodenic.com/tools/buttons-generator/

ボタンジェネレーターは多くのインタラクティブ フォームを含むツール ボタン スタイルを備えた Web サイトは約 **120** 種類あります。カスタム ボタンが必要な友人は、それらを参照してください。

20、コーディング フォント

コーディング フォント: https://coding-fonts.css-tricks.com/fonts/hack/? language=html&theme=dark

Coding Fonts は、45 個のコード フォントを集めた Web サイトです。ほとんどが無料です。もちろん、有料のものもあります。好きなものを選んで、自分のエディタに配置できます (ささやき、私はまだ # が好きです) ##JetBrains Mono 最高)

、無料で美しい)

21、svgrepo

svgrepo: https://www .svgrepo.com/

svgrepo は、300,000 個の無料 SVG アイコンを含む SVG アイコン ライブラリであり、そのほとんどは商用利用可能です。この Web サイトは検索をサポートしており、ログインせずに収集できます (ローカルストレージに保存される場合があります)~

#22、maplibre

maplibre: https://maplibre.org/

maplibre は、すぐに使用できる JavaScript 世界地図ライブラリであり、IOS および Android SDK もサポートしています

#23、Dopefolio

Dopefolio: https://github.com/rammcodes/Dopefolio

Dopefolio は、大量のサードパーティのオープン ソース ライブラリに依存しない、すぐに使える公式 Web サイトのページ ジェネレーターです。すべて純粋な HTML と CSS なので、SEO が非常に優れています。Lighthouseスコアも非常に高く、ページの応答性をサポートします。公式ウェブサイトのページが必要な友達は、

24、animista

animista: https://animista を使用してみてください。 .net/

CSS アニメーション セット。アニメーション パラメータを自由に調整し、コード スニペットを生成でき、使いやすいです。

25. CSS インスピレーション

CSS インスピレーション -- CSS インスピレーション

https://csscoco.com/inspire/

毎回上司はあなたのためにあらゆる種類の派手なスタイルをアレンジしたいと考えています。これを参考にしてください。

end

(学習ビデオ共有:

Web フロント-終わり ＃＃＃）＃＃＃

以上が【吐血まとめ】20種類以上のフロントエンド実践ツール、お気に入りに追加！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。