UPDATE：2023.2.10
- CATEGORY
- 仕事のこと
コーディングのお助けツール4選
Contents
ここ最近天気よかったのに、長野は雪が舞っています。。。
寒くてキーボードを打ちたくないです…
今日は、コーディングの手助けをしてくれるツールについてご紹介します！
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%;
}
display: block;
content: ”;
padding-top: 56.25%;
}
図形cssを作成してくれるツール「CSS clip-path maker」
https://bennettfeely.com/clippy/計算が難しい図形も、「CSS clip-path maker」があれば瞬殺です。
以上、今回は4点のご紹介させていただきました。
まだまだ私の知らない便利ツールがあると思うので、また発見したらご紹介させていただきたいと思います☆
