コーダー/マークアップエンジニア向けのツールやサイト

私がコーディングの仕事で使用している基本的なツールやサイトを紹介します。

HTMLやCSSのタグやプロパティが、各ブラウザへ対応しているか確認できるサイト「Can I use... 」

使用例）FlexboxがIEなどのブラウザで有効なのか知りたい時。

Can I use... Support tables for HTML5, CSS3, etccaniuse.com

・英語ですが、ひと目で対応状況がわかり、とても便利。

CSSで三角形をコピペで生成できるサイト「CSS三角形作成ツール」

使用例）要素の疑似要素（before , after）でCSSの三角形を出力させたい時など。

http://apps.eky.hk/css-triangle-generator/ja

・CSSで矢印などの三角形を使う頻度がとても多いので、時短にもなるし大変便利です。

画像圧縮サイト「Optimizilla」

使用例）Webページに使う画像で、容量が1MB超えなど、若干重い時。

imagecompressor.com

・ドラッグ&ドロップで簡単です。
・前使っていたTinyPng/Jpgに比べると圧縮のパフォーマンスが良かったです。

差分比較サイト「difff《ﾃﾞｭﾌﾌ》」

使用例）原稿と作業後HTMLと見比べたい時や、Gitのコミット差分を見たい時（文字数が多い場合）など。

difff.jp

・昔からあるようですが、シンプルで見やすく使いやすいです。