WEB制作に役立つ おすすめツール8選

WEB制作に役立つ便利なツールをいくつか紹介します。

Sassmeister

SASS(SCSS)のコンパイルをブラウザ上でテストできるツール。
mixinや関数など、ちょっとしたテストに便利です。

Output形式もexpandedやcompressedなど選択可能。

Sassmeister

▼SCSS関連記事

css2sass

CSSをSASS(SCSS)形式に変換できるツール。
昔書いたCSSもコピペ一発で変換してくれるのでとっても便利。
css2sass

Unused CSS

使用していないCSSセレクタ、クラスを教えてくれるツール。
ただし、WordPressなどの場合は使用していない汎用Classがたくさんあるのでズラズラと出てしまいます。

Unused CSS

Specificity Calculator

CSSには詳細度(Specificity)という概念があります。

「あれ?CSS効いてないな〜」の原因は大体スペルミスかこの詳細度の優劣。
!importを連発する前にこちらをチェック。

Specificity Calculator

Satyr

「サテュロス」と読むようです。(心のなかでサティールと呼んでました…)Wikiによると「サテュロスとはギリシア神話に登場する半人半獣の自然の精霊」だそうです。

こんな感じのとても使い勝手の良いダミー画像を表示してくれます。
サイズも記載されているので、バナー枠のダミーなどに良いですね。

ディレイ表示やレスポンシブ時の画像切り替えなど、豊富なオプションも用意されています。

Satyr

Unsplash

無料写真素材サイト。クオリティの高い写真が多数ストックされています。

CC0ライセンスなので個人利用も商用利用もOK。当ブログでも多数お世話になっています。

Unsplash

Duotone

デュオトーン(Duo tone)とは、2色のグラデーションで表現された画像やデザインのことで、最近よく使われる手法の一つです。

画像をアップロードし、色を選択すると…こんな感じの画像を簡単に生成してくれます。

また、右上の検索窓からUnsplash画像を取り込むことも可能です。

Duotone

Griddy

CSS Gridのプロパティを視覚的に設定できるツール。

なれればなんてことはないのですが、gridプロパティって分かりづらいですよね?
そんなときはこのツールを。

Griddy

他にも便利そうなものがあれば、随時ご紹介していきます。

最新記事