CSSの作業をもっと楽に!無料で使える便利なWebツール40選

40-css-utility-tools

 

CSSを使って作業をいているときに活用したい、無料で使えるオンラインツールをまとめてご紹介します。これらのツールは、制作時間を節約、短縮できるだけでなく、CSSのちょっとややこしい問題の解決ツールを想定し作成されています。

 

CSSをベースとしたアニメーション、レスポンシブに対応したナビメニュー作成ツール、パイチャート作成、CSSの圧縮やユニークなサークル型メニューの作成などさまざまなツールが揃っています。制作に困ったときに読み返してみてはいかがでしょう。

 

超便利!確認しておきたい最新CSSツール、リソースガイド 2018年度

 

 

CSSの作業をもっと楽に!無料で使えるオンライン便利ツール40選

 

Flexbox Parent Attribute Visualizer

CSS Flexbox のプロパティを実際に変更しながら確認できるインタクラティブな方法。

weekly-news-for-designers-march-11-09

 

 

 

Keyframes.app

CSSアニメーションをより直感的に作成できるオンラインツール。同時にChrome用拡張プラグインも公開されています。

weekly-news-for-designers-june-03-11

 

 

 

Visually Build Responsive Layouts

CSS Gridを利用したレスポンシブにも対応のグリッドレイアウトをオンライン上で作成できるツールで、細かい設定なども自由に行うことができます。

weekly-news-for-designers-feb-11-07

 

 

 

CSS Alignment Cheatsheet

天地中央や左右揃えなど要素を整列される方法を、イラスト付きで紹介しているチートシート。

weekly-news-for-designers-jan-21-12

 

 

 

Clippy

CSS の clip-path プロパティを使って、画像をさまざまなシェイプに切り抜くことができるツール。

weekly-news-for-designers-feb-04-02

 

 

 

GradPad

CSSカラーグラデーションを直感的に作成することができるオンラインツール。

weekly-news-for-designers-feb-18-08

 

【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ

 

 

Trianglify.io

淡いグラデーションカラーを用いたポリゴンスタイルのパターンテクスチャを作成でき、PNGとSVGファイル形式でダウンロードできます。

weekly-news-for-designers-march-25-06

 

 

 

cssgr.id

要素の数やカラム数、グリッド幅など入力するだけで、簡単にCSS Gridプロパティを使ったレイアウトを作成できます。

weekly-news-for-designers-may-06-17

 

 

 

Layoutit!

CSS Gridプロパティを使ってよりインタラクティブにグリッドレイアウトを作成できるオンラインツール。

weekly-news-for-designers-may-20-10

 

 

 

Gradientify

ウェブサイトやモバイルアプリなどで使いやすいグラデーションを、現在45種類揃えたオンラインライブラリ。カラーパレットをクリックすれば、フルスクリーン画面で配色を確認でき、CSSソースコードのコピーも簡単に行うことができます。

weekly-news-for-designers-nov-12-04

 

ウェブデザイナー必見!美しいCSSグラデーションをコピペできる無料ツール17選まとめ

 

 

Circulus

円形サークル状のSVGナビメニューを作成できるジェネレーター。

weekly-nirt-08

 

 

 

CSS Ruler

CSSで長さを表す方法をわかりやすくひとつにまとめたチートシート。入力方法に困ったときに確認したいツール。

wknewsf_01

 

 

 

Visualize the box-model

要素の幅やボーダー、マージン、パディングの値を調整しながら、変化していく様子を確認できる即席ツール。

wkly_news_june_2_01

 

 

 

Encoding / Decoding Tool

コンテンツをASCIIコード表に変換してくれる便利なオンラインツール。

encode

 

 

 

SVGOMG

SVGファイルのファイルサイズを最適化、圧縮してくれるウェブアプリツール。

wk2_03

 

 

 

Rocket

Webアニメーションを手軽に作成、調整してCSSソースコードをコピー&ペーストできます。

wk_newss_04

 

 

 

Font Library

Googleフォントを人力でタグ付けし、整理しているオープンソースの便利プロジェクト。さまざまなカテゴリやジャンルごとにフォントを探すことができます。

wk_news_04

 

 

 

Pie Menu Generator

円形サークル状に展開するナビゲーションメニューを自動作成するオンライン・ジェネレーター。

news_web_design_apr234_08

 

 

 

extractCSS

HTMLをコピペするだけで、CSSのひな形を整形してくれるコーディングに便利なツール。

css_tools_resources_35

 

 

 

CSS Shrink

CSSファイルを圧縮してくれるお手軽な便利ツールのひとつ。

weekly_news_koj_01

 

 

 

CSSynth

要素を順番ずつアニメーションさせることができる、インタラクティブな動きを表現できるツール。

css_tools_resources_36

 

 

 

EnjoyCSS

ビジュアル要素の強いグラフィックスタイルをコードを触ることなく編集、調整することができます。

css_tools_resources_37

 

 

 

Flexy Boxes

CSS Flexboxの使い方を実践的に学びながら、お好みのグリッドレイアウトを作成できるツール。

designnews_resources_02

 

 

 

Nth-Test

CSSプロパティ「nth-child」と「nth-of-type」の仕組みを図解でわかりやすく理解できます。

web_based_tool_21

 

 

 

CSS3 Generator

ボックスシャドウや丸角などシンプルなCSS3スタイリングをコピペで実装できます。

web_based_tool_23

 

 

 

SpinKit

CSSのみでデザインされたローディングアニメーションを集めたコレクションで、コピペでサイトに実装できます。

web_based_tool_24

 

 

 

CSSComb

記述したCSSプロパティを特定の順番に並び替えてくれるツール。

web_based_tool_41

 

 

 

px-em

サイズPXからEMに変換してくれる計算ツール。

web_based_tool_02

 

 

 

Typesetwith.me

設定した文字サイズや幅などの可読性をオンライン上で確認できるツール。

web_based_tool_13

 

 

 

Type Scale

文字フォントのサイズやスタイルなどをひと目で確認できる計算ツール。

web_based_tool_14

 

 

 

TypeWonder

ウェブフォントの実装を検証できる便利なツール。

web_based_tool_29

 

 

 

Glyphter

SVGを使ったアイコンフォントを自由に作成できるお役立ちツール。

css_tools_resources_22

 

 

 

iconizr

SVGイメージ画像をCSSアイコンに変換してくれるツール。

css_tools_resources_24

 

 

 

GlyphSearch

Font AwesomeやGlyphicons、IcoMoon、Ioniconsなど有名アイコンセットから、目的のアイコンをまとめて検索することができるツール。

web_based_tool_08

 

 

 

FontAwesome Finder

Bootstrapでも利用されているFontAwesomeアイコンのクラス名を手軽に検索できるツール。

web_based_tool_12

 

 

 

Fontello

FontAwesomeやTypiconsといったアイコンセットから、独自のアイコンフォントを作成できるオンラインツール。

web_based_tool_32

 

 

 

Fontastic

あらかじめ用意された、1700種類以上のアイコンから選択したり、手持ちのSVGファイルをアップロードして、オリジナルWebアイコンフォントを作成する無料ツール。

web_based_tool_36

 

自分だけのWebアイコンフォント作成、オンライン無料アプリFontastic

 

 

Clrs

現代のモダンウェブに最適な配色カラーパレットをまとめており、SASS/LESS/Stylus/CSS variab、CSSクラス名を確認できます。

css_tools_resources_25

 

 

 

Pantone Sass

PantoneカラーをSass Variablesでまとめた無料ツール。

css_tools_resources_27

 

 

 

Flat UI Colors

フラットスタイルの代表的な配色カラーパレットを確認でき、その場でお好みのパレットをクリックするだけで、CSSをコピーできます。

web_based_tool_34

 

 

 

BADA55.io

アルファベットと数字を使って表示されるユニークな英単語(英: leet)の配色カラーパレットを集めているサイト。ちなみにサイト名Bada55は、「Badass(たちの悪い、かっこいい)」を意味しています。

news_wk_06

 

【2021年版】もう配色デザインには迷わない!すごい無料カラーパレットツール83個まとめ

 

サムネイル@ : 40 Free Web-Based Tools & Apps for Working with Css – Speckyboy.com