以前、コーダーなら入れておきたいGoogle拡張機能についてをまとめたのですが、仕事をする上でよく使うWebツールもいくつかあります。
今回はそのツールについてをまとめて紹介します！
↓Google拡張機能の記事はこちら
作業開始時に使うツール
PRINT LP
作業着手時に真っ先に開くのが「PRINT LP」です。
デザインデータをドラッグ＆ドロップをするだけで印刷しやすい形に整えてくれます！
Figmaとかデザインツールで分解すればいいんですけどね…手間なんですよ…。
jpgやpngで書き出したデータをそのままいい感じにしてくださるので、デザインを印刷して書き込みながら構築したいとき、大変お世話になっております！！
What’s that site running?
このサイトのサーバーなんだ？という時によく使っています。
コーディング時というよりは、作業の相談を受けた時の方が使いますね！
実装時に使うツール
Table Tag Generator
Tableタグの結合が永遠の苦手課題である私。
このツールに出会ってから、テーブルがちょっと好きになりました…！笑
rowspan / colspanがいまいちわからなかったり、複雑なテーブルを作りたい時は整理してからタグを書かないといけないかと思うのですが、このツールはExcelの表を整えるくらいの感覚てタグを作ってくれます！
便利すぎて結局tableタグの結合は苦手なのですが…まあ、綺麗にできるのでOKということで…！笑
カラーコード変換ツール
16進数のカラーコードをアニメーションや透かし用にRGBに変換したいなぁ〜って時に大変お世話になってます！
どれか一つでもコピペで入れれば各値に変換してもらえるので、RGBはわかるけど…！という場合にも使ってます！
CSS Gradient
Figmaのデザインをよく実装するので、最近は使用頻度が少し下がっていますが…
CSSのグラデーションを調整したい時は「CSS Gradient」を使っています！
グラデーションってちゃんと綺麗にやろうとすると細かく切り替えをしないといけないのですが、こちらのツールは直感でできるのでありがたいです…！
クリップパスを使った三角形ジェネレーター
CSSで三角形を作るためのジェネレーターはいくつかありますが、最近はこのclip-pathで生成できるツールにお世話になってます！
borderで作るツールもあるんですが、clip-pathの方がコードがシンプルでレスポンシブとかパーツの展開とか…使い回しがしやすいかな？と思ってます！
チェック作業時に使うツール
Ready to check
コードチェックは拡張機能か「Ready to check」を使ってます。
これまでの体感なのですが、このツールだとかなり細かい部分までチェックしてくれるので、ちょっと耳が痛くなります。
エラーのないコードで作ろうと思うと、そのくらい厳しい方がいいな！なんて思っている節があるので、このツールを使い続けています。
Yellow Lab ツール
googleの提供する「PageSpeed Insights」も使うのですが、「Yellow Lab ツール」を通してからのことがよくあります。
こちらの方が具体的にどこの何が要修正！なのかが視覚的にわかりやすく、速度改善がしやすいのかな？なんて思ってます。
まとめ
全部が全部、いつも使っているわけではないのですが、こうしてまとめてみると結構ありますね！
ツールやジェネレーターがあることさえ知っていればかなり時短にも繋がるので、ぜひ活用してみてください🙌
