株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > コーディングのお助けツール4選

コーディングのお助けツール4選

UPDATE : 2023.02.10

CATEGORY :
Tokutake
Tokutake

Tokutake

ここ最近天気よかったのに、長野は雪が舞っています。。。
寒くてキーボードを打ちたくないです…

今日は、コーディングの手助けをしてくれるツールについてご紹介します!




SVGからアニメーションが作れる「SVG Artista」

https://svgartista.net/

SVG画像をアニメーションの実装してくれるWEBサイトです。
画像をアップするだけでコード化してくれる、とっても便利なツール。
1からコードを書くとなると、どうしても調整に時間がかかってしまうので、とても助かっています。

【使用方法】
①SVG画像を用意します
②SVG Artistaを開き、左上「Open SVG」から①を選択
③アニメーションを調整
④右上の「Get Code」からコードを取得


アプリコットのロゴもステキなアニメーションにしてくれます♥



フォントサイズのレスポンシブ化を計算してくれる「Min-Max-Value Interpolation」

https://min-max-calculator.9elements.com/

画面サイズとフォントの最大数と最小数を入れると、自動でclamp計算をしてくれるツールです。
タイトルのフォントサイズ30pxで見せたいけど、1200px以下だと大きすぎて、変なとこで改行してしまう…
「font-size:clamp」は便利だけど、計算が面倒…そんな時に手助けしてくれます。




「アスペクト比計算ツール」

https://aspect.arc-one.jp/

その名の通り、アスペクト比の計算をしてくれるツールです。
画像や動画、GoogleMap、Youtubeなどなど…
cssで使う場面が多々ありますが、「アスペクト比計算ツール」では、padding-topの計算もしてくれます。

例)横幅1920px:縦幅1080pxをレスポンシブ化したいとき

.google-map::before {
 display: block;
 content: ”;
 padding-top: 56.25%;
}



図形cssを作成してくれるツール「CSS clip-path maker」

https://bennettfeely.com/clippy/

計算が難しい図形も、「CSS clip-path maker」があれば瞬殺です。




以上、今回は4点のご紹介させていただきました。
まだまだ私の知らない便利ツールがあると思うので、また発見したらご紹介させていただきたいと思います☆

この記事を書いた人Who wrote this blog

Tokutake Mami

旅とおいしいものをこよなく愛する
テキパキ系コーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design