ツール PR

web制作に役立つwebツールまとめ【コーディング・デザイン】

記事内に商品プロモーションを含む場合があります

web製作時に役立つwebツールを紹介します。
コーディングやデザインなど用途に合わせて便利なwebツールを紹介します。

 

 

コーディング関係に便利なツール

・OneClickCSS
HTMLを書いて、「Simple CSS」、「Childrens CSS」、「Child CSS」、「LESS / SCSS」、「SASS」をクリックすることでCSSを自動生成してくれるツールです。

「OneClickCSSはこちら」

 

・RGBA変換ツール
カラーコードを入力することで、RGBAに変換してくれるツールです。
CSSで透過させるときなど、RGBAの変換がめんどくさいので重宝する。

「RGBA変換ツールはこちら」

 

・様々なファビコンを一括生成
ファビコンを一括生成することができるツールです。
画像を選択することで、簡単に様々なサイズの生成を生成することができます。

「様々なファビコンを一括生成はこちら」

 

・pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール
レスポンシブのコーディングで、pxを%に変換したいときに便利なツールです。
親要素と子要素のサイズを入れることで、比率計算をしてくれます。

「pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツールはこちら」

 

・テキスト比較ツール difff《デュフフ》
テキストをコピペすることで、文章の差分を表示してくれるツールです。
あまりにもテキストが多いと思い場合があるので、VS Codeが使えないときだけ使ってます。

「テキスト比較ツール difff《デュフフ》はこちら」

 

・Can I use…
CSSでブラウザの対応状況を確認する際に使用します。
プロパティを入力することで、各ブラウザの対応状況を表示してくれます。

「Can I use…はこちら」

 

 

デザイン関係に便利なツール

・OGP画像シミュレータ
OGPを作成した際に、どのように表示されるのか確認できるツールです。
サービスによって表示方法が変わるので、どれでもいい感じに見えるようにデザイン調整に使います。

「OGP画像シミュレータはこちら」

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)