早くて正確なコーディングをするために「ジェネレーター 」の利用は不可欠です。
便利なジェネレーターを知っているか知らないかは、Web制作の工数に大きく関わってきます。
もちろん、自分の力でコーディングできる力も必要ですが、頼れるポイントではジェネレーターのような便利ツールに頼るのが大切です。
この記事は、工数時短でコーディングができるようになりたいという方に向けての記事です。無料でWeb上で使用できる便利なジェネレーターを、用途別に紹介しています。
どれも私がよく利用するためブックマークしています。
「便利だな」と思うジェネレーターがあれば、そのサイトをブックマークしてすぐ使えるようにしておくと良いでしょう。
目次
テーブルを作りたい
Table Tag Generator
地味に大変なのが、テーブル（表）の作成。
行や列、結合・分割などを指定すると、そのテーブルのHTMLコード・CSSコードが生成されるジェネレーターです。
できたコードはファイルへのコピペでOKです。
三角形を作りたい
CSS三角形作成ツール
三角形のタイプ・大きさ・色を指定するだけで、その三角形を形づくるCSSが生成されます。
三角形の作成場面は地味に多く、しかし忘れてしまいがちなので、このジェネレーターは頻繁に使います。
http://apps.eky.hk/css-triangle-generator/ja
シャドウ（影）を作りたい
box-shadowジェネレーター
シャドウの大きさや方向、ぼかしを指定することで、その影を作るCSSが生成されます。要素の内側への影にも対応している点が便利です。
https://www.bad-company.jp/box-shadow
Brumm
よりリアルで、複雑なシャドウを作成したい時に使います。とても細かい部分までカスタマイズが可能です。
グラデーションを作りたい
CSS Gradient
自分でグラデーションを作りたいというときに便利なジェネレーターです。
任意の場所で3つ以上の色も指定でき、グラデーション作成はこのジェネレーターを使用すれば間違いないでしょう。
ストライプ模様の背景を作りたい
CSS Stripes Generator
角度・色・サイズを指定することで、ストライプの作成ができます。
アニメーションのイージング（加速・減速）を作りたい
cubic-bezier
アニメーションのイージングの生成を行ってくれます。
ドラッグ&ドロップで視覚的にイージングを決められます。
ニューモーフィズムの要素を作りたい
Neumorphism.io
ニューモーフィズムとは、2020-2021年話題のデザイン方法です。
今後このニューモーフィズムを取り入れたサイトはさらに増えていく可能性があり、そのようなWebサイトを制作するのに欠かせないジェネレーターです。
このページのまとめ
以上、私がよく使う、Web制作で便利なジェネレーターの一覧でした。
Web上には本当に多くのジェネレーターが存在しますが、中でも今回紹介させていただいたものは、便利で何度もお世話になっているものたちです。
きっとこれを読んでいるあなたにも大いに役立つものがあるでしょう。
このようなジェネレーターは頻繁に新しいものが出てくるため、このページも随時更新していきます。
