知っていると便利！？お助けツール
こんにちは。YUIDEAでマークアップエンジニアをしているtanabeです。
この記事を公開するのは５月中頃で、初夏と言われる季節ですが過ごしやすい気温が続いていてやたら眠くなっております。
なのでお仕事を少しでも楽に進められるようなツールって重宝するよなぁ、と今更ながらに思ったので、今回の記事ではコーディングの時に知っていると便利なツールをご紹介します。
レイアウトを表示させる方法を自分で考えて頑張るのも大事ですが、お仕事上でのタイムパフォーマンスを考えるのも必要ですよね！
（本音：少しでも楽したい・・・）
グラデーションジェネレーター
いただいたデザインデータにグラデーションがある時に見ています。
グラデーションの方向や色を入力するだけで簡単に「rgb」や「background: linear-gradient」を教えてくれます。
ネーミングツール
私はclass名を付けるのが苦手なので、とても助かっています。
日本語をローマ字表記でclass名をつけたりもしていますが、こちらを使って日本語入力したらササッと英語でclass名をつけてくれます。
例えば「お届け商品」と入力したら「delivery_product」と教えてくれました。便利！
CSSジェネレーター
私の場合、三角形を作成する時やボックスシャドウなどに使用しています。「border-width」の比率や「box-shadow」の位置や色の「rgba」をすぐに確認できるので重宝しています。
他にも比率の計算や、「pxからvw、pxからem」への変換など、計算が面倒なものも算出してくれます。
ダミー画像生成ツール
ダミー画像を用意してくれる便利ツールです。
幅と高さを入力するとダミー画像を用意してくれて、URLを発行してくれるのでコーディングの勉強をする時にお世話になっていました。
Font-familyメーカー
フォントファミリーを考えるのは面倒ですよね。Font-familyメーカーに気づくまではフォントファミリーの一覧など検索して使用していました。
こちらのツールでは使用するフォントを選んでドラッグして優先度の高い順に並び替えができ、「font-family」を生成してくれます。
テーブルタグジェネレーター
まだ使用したことがないのですが、近々使いそうな気配があるので検索していたらこちらを発見しました。添付画像のような複雑なテーブルも楽々！
スマホ表示の時なども横スクロールにするなら問題なく使えそうですね。
さいごに
今回この記事を書くにあたって、自分で使っているもの以外も調べました。
お助けツールって思ったよりたくさんあるんだ、とビックリです。
（たくさんあるって事はそれだけ需要があるってことですよね。開発してくれた方々に感謝です。）
ハンバーガーメニューを作ってくれたりボタンデザインを作ってくれたり、便利なツールがたくさんあります。
ブラウザでパパッと作成できて楽できるのが良いところですが、テキスト系の便利ツールを使用する時は会社の機密情報や個人情報を入力するのは控えた方が良さそうです。送信したテキストがデータベースやログに残ってしまって、悪用されることもあるかもしれません。
便利そうだからといって何にでも飛びつくのは控えた方が良いでしょう。
（自分に言い聞かせですw）
危険性も考えつつ、便利ツールを使いこなしてタイパよくコーディングできるよう頑張っていきたいと思います。
この記事が気に入ったらサポートをしてみませんか？