TANE-beエンジニアです。

今回は日常的に使用しているジェネレーターサイトをご紹介していきます。

業務でコーディングをおこなっている人は一度は、作業効率をいかに高めるかという壁に突き当たるのではないでしょうか。
私も最初のうちはがむしゃらにコーディングを進めていましたが、いかに効率よく作業を進めるかにだんだんとシフトしていきました。

そんなとき役立つのが、ジェネレーターを公開してくださっているサイトです。
最近はちょっとでも書くのがめんどくさいコードがあると、「〇〇　ジェネレーター」で検索するのが自分の中で定番の流れになっています。
作業を効率化すると、スピードが上がるだけでなくミスの軽減にもつながります。

今回ご紹介するサイトは、どのサイトもブックマークして日常的に使用しています。
ぜひ参考にしてみてください。

テーブル

さて、コードを書くのがめんどくさい代表といえばtableにつきるのではないでしょうか。
頭で考えながらコードを書くと、colspanやrowspanなど列と行のどっちがどっちか分からなくなり、セルが1個足りない不恰好なテーブルが出来上がりがちです。

Table Tag Generator | HTMLの表を簡単に作成・結合ツール。テーブルタグジェネレーター

結合や分割も簡単にできるので視覚的にわかりやすく、最も使用しているといっても過言ではないサイトです。
私はcssは自分で設定したいので、HTMLのコードだけコピペして使わせていただいてますが、このサイト上で文字入力やクラスの付与もできる優れたジェネレータです！

gridレイアウト

さて、最近はレイアウトでよくgridを使用しています。
gridは慣れるまではなかなか難しく、grid-area の設定や、列幅、高さなど少し癖の強いプロパティですが、使いこなすと今まで以上に共通のコードでレスポンシブ対応できる心強いスタイルです。

最近はジェネレータなしでも思い通りの構築ができるようになりましたが、最初のうちは以下の2つのサイトを参考にしていました！

Interactive CSS Grid Generator | Layoutit Grid

CSS Grid Generator

こちらの2つのサイト、grid-areaの書き方など細かな点が異なっています。
gridは、IEではサポートされていない書き方もあるので、案件に合わせて使い分けていただければと思います。

わたしはテキストの説明だけではなかなかgridを理解できなかったのですが、
この2つのサイトを見比べるうちに、かなりgridを使いこなせるようになりました！

三角形作成

未経験でコーディングをはじめの頃、上司から「三角の作り方調べてねと」言われて調べ、ボーダーで無理やり作成していることに衝撃を受けました。
ずいぶん苦労して実装した後にその上司から教えてもらったサイトです。
「仕組みさえ理解してたら、次からはジェネレーター使っていいからね」と言われました。

シンプルでわかりやすく、とても使いやすいです。

CSS三角形作成ツール

グラデーション

さて、うっかり書き方を忘れがちなグラデーション。
XDやPSDから直接cssを抽出することもできますが、うまくいかない場合などはこちらのジェネレーターを使用しています。

毎回、角度・位置・色を書く順番がわからなくなりがちな人におすすめです。
私は毎回、各順番を間違えて検証画面では横線で消されがちです。

Ultimate CSS Gradient Generator – ColorZilla.com

clip-path

さて、こちらは以前の記事でも紹介したclip-path のジェネレーターです。
デフォルトのパターンがたくさん用意されているので、参考にしつつ自分の作りたいパターンに調整なども自由にできます。

どの部分がどの数値に対応しているか、色分けがわかりやすいので調整がしやすくてとても助かります！

Clippy — CSS clip-path maker

SVGをbackgroundで使用したいとき

アイコンや背景など、SVGをbackground-imageで使用したいことがあるとき、いつも変換するのに使用させていただいているのがこちらのサイト。

SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログ

https://blog.s0014.com/posts/2017-01-19-il-to-svg/

一番上のSVGコードにSVGを流し込み、水色のボタンを押すだけで、background-imageに変換してくれるとっても助かるサイトです。
このサイトがなくなってしまったらめちゃくちゃ困るレベルで使っています。

box-shadow

これまたプロパティを書く数や、順番を見失いがちなbox-shadow。
シャドウの追加や内側・外側の設定もできるので重宝しています。
これもデザインからうまくshadowがとって来れない時など、ぱぱっと生成できるのでとても助かっています。

box-shadowのジェネレーターとプロパティについて | bad-company

chromeの検証画面

さて、今まではサイトをご紹介してきましたが、chromeの検証画面でもさまざまな調整が行えます。先ほどあげたgridレイアウトの要素の配列（flexも）や、box-shadow、色、transitionやcubic-bezierまで！

flexの調整

transitionの調整も

chromeの検証画面を開くだけで、サイト上での表示を確認をしながら調整することが可能です。
これが結構使いやすいので、アニメーションの調整などは検証画面から行うことが多いです。たいていスタイルの横や、ソース上にアイコンなどが表示されるので一度クリックしてみるのがオススメです！

まとめ

コーディングを始めた当初「あなたがめんどくさいなって思ってる作業は、調べたらジェネレーターがあるから」と言われ、4年目に突入した今、本当にその通りだなと実感する毎日です。
作業を効率化して、日々更新されていく新しい技術に時間を費やすこともフロントエンドの業務では大切なこと。
世の中にたくさんあるジェネレーターサイトに感謝しつつ、どんどんコーディングの新しい技術を磨いていきたいなと思っています。
ぜひ、おすすめのジェネレータがあれば教えてください！

TANE-be、twitterを始めました！
会社の中のひとが交代で色々と呟いています。
おすすめジェネレーターなど、リプをいただけると嬉しいです！