フロントエンドWeb開発のための無料のオンラインツールのリスト（2020）
フロントエンド開発のためのWebアプリケーションまたはWebサービスの形式の無料のオンラインツールとリソースのリスト。各ツールには、Webページのスクリーンショットとして短い説明とプレビューが含まれています。
- タイポグラフィ
- 色、パレット、パターン
- カラージェネレーター
- パターンエディター
- グラデーションジェネレーター
- カラーパレット
- カラーグラバー
- 画像、イラスト、ビデオ
- CSS
- CSSグラデーションジェネレーター
- CSSアニメーションエディター
- CSSトライアングルジェネレーター
- SVG
- 正規表現
- その他
タイポグラフィ
- loremipsum.io- lorem ipsumテキストコンテンツをつかむためのシンプルでより良い方法
- gridlover.net/try-モジュラースケールと垂直リズムを備えたタイポグラフィシステムを確立する
- pearsonified.com/typography-ゴールデン比タイポグラフィ計算機
- canva.com/font -combinations-フォントの組み合わせを見つける
- fontpair.co-グーグルフォントのペアリングのコレクション
- transfonter.org-オンラインフォントコンバーター
フォントコレクション
- fontstruct.com/gallery-フォントのコレクション（登録が必要）
- fonts.google.com-Google Fonts
- fonts2u.com-無料のフォントのコレクション
- github.com/lvwzhen/iconpark-アイコンフォントのコレクション
色、パレット、パターン
- Color-hex.com-色に関する情報を提供します
- ColorHunt.co-カラーパレットのコレクション
- Colourlovers.com-パレット、パターン、形、色のコレクション
- Colrd.com-パレット、パターン、勾配、色のコレクション
- heropatterns.com-繰り返し可能なSVG背景パターンのコレクション
- toptal.com/designers/subtlepatterns-パターンのコレクション
- PatternCooler.com-パターン背景のコレクション
カラージェネレーター
- color.hailpixel.com-フラットカラージェネレーター
- Galactic.ink/sphere-カラースペクトルジェネレーター
- colorsupplyyy.com/app-さまざまな色の混合物を生成します
パターンエディター
- PatternInja.com-パターンエディター
- halftonepro.com/app-パターンエディター
- qrohlf.com/trianglify-generator-三角形パターンジェネレーター
- kennethcachia.com/plain-pattern -svgパターンエディター
グラデーションジェネレーター
- uigradients.com-グラデーションのコレクション
- colinkeany.com/blend-背景グラデーションジェネレーター
カラーパレット
- flatuicolors.com-カラーパレットのコレクション
- Colordrop.io-カラーパレットのコレクション
- color.adobe.com/explore-カラーパレットのコレクション
- flatuicolorpicker.com/category/all-フラットカラーのコレクション
カラーグラバー
- lokeshdhakar.com/projects/color-thief-画像からカラーパレットをつかみます
- www.colorhunter.com-画像から色をつかみます
- Image-color.com-画像からの別の色のグラバー
- webcolourdata.com-ウェブサイトから色をつかみます
画像、イラスト、ビデオ
- free-images.com-無料画像のコレクション
- Gratisography.com-無料の画像のコレクション
- freephotos.cc-無料の画像のコレクション
- Kisspng.com-透明なPNG画像のコレクション
- Vecteezy.com-無料のベクターアートのコレクション
- undraw.co/illustrations-無料のイラストのコレクション
- iconfinder.com-アイコンファインダー
- Mazwai.com- 3.0ライセンスのCCの下での無料の映画のビデオ
画像コンバーターとエディター
- jpeg.io-任意の主要な画像形式を高度に最適化されたJPEGに変換します
- tinypng.com- .pngおよび.jpg画像を圧縮できる別の圧縮ツール（最大5MBサイズの写真を許可します）
- websiteplanet.com/webtools/imageCompressor- .pngまたは.jpg圧縮が最適化された.pngに圧縮されます（最大50MBサイズの写真を許可します）
- BSE64.com-画像をBase64にエンコードします
- lorempixel.com-プレースホルダー画像ジェネレーター
- xiconeditor.com-オンラインアイコンエディター
- favicon -generator.org -faviconジェネレーター
- toptal.com/developers/css/sprite-generator -cssスプライトジェネレーター
- webresizer.com/resizer-画像エディター
- picsvg.com- jpeg、jpg、gif、png写真をSVGに変換します
CSS
- westciv.com/tools/3dtransforms-グラデーション/変換エディター
- CSS3maker.com-CSSエディターおよびジェネレーター - ボーダー半径、勾配、変換、アニメーション、トランジション、テキストシャドウ、ボックスシャドウ、テキストローテーション
- cssmatic.com -CSSジェネレーター - 勾配、背景パターン、ボックスシャドウ、ボーダー半径
- cssmatic.com/box -shadow -cssドロップシャドウジェネレーター
- developer.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-cssボーダー画像ジェネレーター
- cssfilters.co -cssフィルターエディター
CSSグラデーションジェネレーター
- Colorzilla.com/gradient-editor -CSSグラデーションジェネレーター
- CSS -Gradient -CSSグラデーションジェネレーター
- GradientGenerator.com-パターン付きのCSSグラデーションジェネレーター
- AngryTools.com/gradient -CSSグラデーションジェネレーター
CSSアニメーションエディター
- theappguruz.com/tag-tools/web/cssanimations- CSSアニメーションのコレクション
- anicollection.github.io- CSSアニメーションのコレクション
- CSSanime.com -CSSアニメーションジェネレーター
- AngryTools.com/CSS/Animation -CSSアニメーションジェネレーター
- Animista.net -CSSアニメーションジェネレーター
- jeremyckahn.github.io/stylie -cssアニメーションジェネレーター
- waitanimate.wstone.io-各アニメーション反復間に遅延を挿入できるようにキーフレームの割合を計算します
CSSトライアングルジェネレーター
- cssarrowplease.com-矢印が横に伸びているカスタムボックスを生成します
- apps.eky.hk/css-triangle-generator-css三角形ジェネレーター
SVG
- useragentman.com/tests/textpath/bezier-curve-construction-set-bézierカーブジェネレーター
- cssplant.com/clip-path-generator-クリップパスジェネレーター
- bennettfeely.com/clippy-クリップパスジェネレーター
- jxnblk.com/paths-パスジェネレーター
- kazzkiq.github.io/svg-color-filter-svgカラーフィルターエディター
- yoksel.github.io/svg-filters -svgフィルターエフェクトエディター
- gigacore.github.io/demos/svg---- dasharray-generator-ダッシュラインジェネレーター
- editor.method.ac -svgエディター
正規表現
その他
- developers.google.com/speed/pagespeed/insights-ページが一連のベストプラクティスにどの程度順守するかについての情報を提供します
