【時短ツール】よく使うコーディングに役立つツールサイト

こんにちは。ユーヘーです。
コーディングする時に、コード的に長くてめんどくさかったり、画像作るのがめんどくさかったりって時はWebサービスをよく利用しています。

こんなんあるよ!ってあれば教えて欲しい!!
もっと早くコーディングした(*´ω`)

CSSでグラデーション背景を作るツール「Ultimate CSS Gradient Generator」

CSSでグラデーションを作るのはかなり面倒。
コピペでOKなので、よく使ってます。

CSSでグラデーションを入れる時に便利なツール
CSSでグラデーションを入れる時に便利なツール

スクリーンショットを良い感じにしてくれる「Screely」

スクリーンショットを良い感じの画像にしてくれます。
もうちょい画像を小さくしてほしい。

エクセルデータをきれいなHTMLデータに変換するツール「Excel to HTML」

Excel to Table Excel表からHTMLテーブルへ一発変換
Excel to Table Excel表からHTMLテーブルへ一発変換

エクセルの表をHTMLタグに変換します。
エクセルの表をそのまま貼り付けるとスタイルがついてしまいますが、これを使えばクラス名やスタイルがない状態で貼り付ける事が出来ます。

CSSで三角形を作る時に便利なツール「CSS三角形作成ツール」

CSS三角形作成ツール
CSS三角形作成ツール

CSSで三角形を作ってくれます。
疑似要素と合わせてよく使います。

CSSで画像を切り抜いてくれるツール「clippy」

Clippy
CSSだけでマスクするツール

CSSだけで画像をクリップ(マスク)してくれます。
ただしIEでは使えない!!!!

Brackets CSSFier Extension

HTMLを貼り付けるだけでScssをはきだす
HTMLを貼り付けるだけでScssをはきだす

Bracketsのエクステンション。
HTMLをコピーするとScssをはきだしてくれます。

Github

自作でもツール作ってます。

Filemakerを仕事で買ったので、自作でツール作ってます。
テキストを貼り付けるとULデータが生成される。
他にもテーブル、dlとかも作った。改行削除とか。

ただFilemakerがいる・・・
一回買えば使えるので、Adobeよりはまし。
データベース管理ツールなので、顧客管理とかも作れるし、WordPressに連動させて投稿ツールなんかも作れます。
Filemakerの便利なところは、開発期間がかなり短く作れるところ。
そんでもって知識0でもそれなりものが作れてしまう!!

created by Rinker
ファイルメーカー
¥35,842 (2018/10/22 14:17:55時点 Amazon調べ-詳細)

 

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。