実際に使い倒している、ブラウザ上で使えるWebフロントエンド開発に役立つ13サイト

ブラウザ上で使える開発が便利なるツールやサイトっていっぱいあるけど、ブックマークに入れていても一回も使わずに肥やしになる物も多いです。

なので、今回は実際に使ってるのと、使う機会がそこそこあったサイトだけを紹介してみます。

リファレンス系

Mozilla Developer Network

https://developer.mozilla.org/ja/

大体はここが解決してくれる。

W3Schools

http://www.w3schools.com/

逆引きもできるHTML/CSSのリファレンスだとここが使いやすい。

World Wide Web Consortium

https://www.w3.org/

根っこの仕様まで確認する時に。

画像系

Patternify

http://www.patternify.com/

Patternify SS

ドット絵の要領で簡単なパターン画像が作れる。datauri で出力してくれるのでコピペで使える。

TinyJPG, TinyPNG

https://tinyjpg.com/, https://tinypng.com/

JPGとPNGを最適化して画質の劣化なしで画像サイズを削減してくれる。gruntとかcodekitとか使えない時に。

Panda

パンダが竹食ってる。

SVGOMG

https://jakearchibald.github.io/svgomg/

パンダと同じくSVGの最適化をしてくれる。

Ratio Calculator

http://ratiocalculator.toshimaru.net/

アスペクト比の計算してくれる。ここが一番入力の手間がかからない。

CSS系

CSS Triangle Generator

http://triangle.designyourcode.io/

CSS Triangle Generator SS

CSSだけで三角形作る時に。意外と三角形を作る機会が多い。

CSS Font Stack

http://www.cssfontstack.com/

CSS Font Stack SS

Mac と Windows で差異のあるfont-family事情を実際のシェア率を考えて指定できる。

CSS Shrink

http://cssshrink.com/

CSSの minify 処理を行ってくれるサイト。minify された物を元に戻す事も。

LESSとかSASS使ってると勝手に minify してくれることが多いので、どちらかというと他所の minify されたCSSを見たい時に使ってる。

EnjoyCSS

http://enjoycss.com/

EnjoyCSS SS

CSS3で追加されたグラデーションとかtransformとかを試せる場所。めちゃくちゃ重いけど楽しい。

主にトランスフォーム具合を試す時に使ってる。

CSS3ジェネレーター系はシンプルな物よりこういったゴテゴテしてる多機能なツールの方が用途に合ってる気がする。

正規表現、カラースキーム

Online regex tester and debugger

https://regex101.com/

正規表現のテストができる。クイックリファレンスもあって便利。

Color Picking Tool

http://www.hexcolortool.com/?_ga=1.166940093.2069693470.1467176526

Color Picking Tool SS

正直カラースキーム系のツールはなんでもいいのだけど、相関図があって透明度とrgba()のコピペにも対応してるので便利。