コーディング時の重宝ツールを見てみよう！

みなさん、こんにちは。
4月に入り、だんだんと暖かくなってきて、
過ごしやすい季節がやってまいりました。

本日は、コーディングの時短をテーマに、
実際に僕が使用している、ツール・ジェネレーターを
ご紹介します。

ハンバーガーメニュー

https://webspe.net/tools/menu-button/

まずは、このハンバーガーメニュー。
サイズ、背景色はもちろん、アニメーションも触れる優れものです。
ハンバーガーメニューって意外と面倒くさいんですよね。

jsもバニラjs、jqueryとどっちも対応しているので、
汎用性もバッチリです。

グラデーション

https://cssgradient.io/
https://front-end-tools.com/generateGradient/

コーディングにおいて、グラデーションは、中々厄介ですよね。
ブラウザ対応はもちろん、書き方も、色々とあって、覚えにくい。
このジェネレーターがあれば、直感的に、作業を行えるので、便利です。

テキストシャドウ・ボックスシャドウ

https://front-end-tools.com/generateTextshadow/
https://front-end-tools.com/generateBoxshadow/

このテキスト・ボックスシャドウ意外と、毎度覚えられないのは、
僕だけでしょうか。内側の処理やbefore、afterといった擬似要素にCSSを当てたりできるという
万能ぶりです。

三角形

https://front-end-tools.com/generateTriangle/

HTML/CSSコーディングで必ず出てくるであろうこちらの三角形の処理。
最近だとclip pathで行う人もいるかと思いますが、設定が複雑なこともあって、こちらのジェネレーターを使えば、
一瞬で、コーディングできてしまいます。

いかがだったでしょうか。
AIはもちろんですが、これらの、ツールを駆使して、
より良いコーディングライフを送ってみてください。