search
LoginSignup
638

posted at

updated at

フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ

概要

フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。

使いやすそうなツールがあれば追記していく予定です。

ドキュメント類

何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで

mdn

  • (Mozilla Developer Network の略)
  • ウェブ標準ドキュメント
  • 個人ブログやQiita内で「こう使うといい!」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する

Can I use

image.png

  • ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる

ジェネレーター系

Interactive CSS Grid Generator

image.png

  • Gridを使ったレイアウトをGUIで作り、コード生成できる
  • そのレイアウトをもとにCodePenやCodeSandboxを開くこともできる
  • 類似としてCSS Grid Generatorがあるが、こちらのほうが高機能で使いやすい

Shadow Palette Generator

image.png

  • 光源の位置や影の大きさ等を指定して影を作ることができる

JSON系

JSON Crack

image.png

  • JSONデータの構造をグラフ化してくれる

transform

image.png

  • JSONのデータからTypeScriptのinterface等を生成してくれる
    • (他の言語等も対応している)

アニメーション系

動くWebデザイン アイディア帳

image.png

  • jQuery、CSSを使用した動くデザインを紹介しているサイト
  • (日本語のサイトなので探しやすい)

Animista

image.png

  • アニメーション+オプションを指定することでCSSを生成してくれる

CSS Load.net(ONLINE GENERATOR.NET)

image.png

  • ローディングアニメーションを選択して、パラメータ等調整しながらCSSを生成してくれる

PRELOADERS

image.png

  • ローディングに使えそうなgif、SVG、APNG画像などをパラメータ等調整しながら生成してくれる

Tiny Helpers

image.png

  • オンラインツールのまとめ
  • タグごとに検索できる
  • 暇なときに「こんなツールあるんだなー」って眺めて気に入ったものがあったらブックマークしておくと良いかも

PlayGround系

ざっくりコードをかいて動作確認をしたいときや、コードの共有をしたいとき等に使用します。
いくつもサービスはあるので、有名なものをいくつか名前だけ列挙しておきます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
638