web製作時に役立つwebツールを紹介します。
コーディングやデザインなど用途に合わせて便利なwebツールを紹介します。
コーディング関係に便利なツール
・OneClickCSS
HTMLを書いて、「Simple CSS」、「Childrens CSS」、「Child CSS」、「LESS / SCSS」、「SASS」をクリックすることでCSSを自動生成してくれるツールです。
・RGBA変換ツール
カラーコードを入力することで、RGBAに変換してくれるツールです。
CSSで透過させるときなど、RGBAの変換がめんどくさいので重宝する。
・様々なファビコンを一括生成
ファビコンを一括生成することができるツールです。
画像を選択することで、簡単に様々なサイズの生成を生成することができます。
・pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール
レスポンシブのコーディングで、pxを%に変換したいときに便利なツールです。
親要素と子要素のサイズを入れることで、比率計算をしてくれます。
「pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツールはこちら」
・テキスト比較ツール difff《デュフフ》
テキストをコピペすることで、文章の差分を表示してくれるツールです。
あまりにもテキストが多いと思い場合があるので、VS Codeが使えないときだけ使ってます。
・Can I use…
CSSでブラウザの対応状況を確認する際に使用します。
プロパティを入力することで、各ブラウザの対応状況を表示してくれます。
デザイン関係に便利なツール
・OGP画像シミュレータ
OGPを作成した際に、どのように表示されるのか確認できるツールです。
サービスによって表示方法が変わるので、どれでもいい感じに見えるようにデザイン調整に使います。