投稿日：2014年8月8日　　　ソフトウェア：-

---

このチュートリアルではプロアマ問わず使える10個の最新無料CSSツールを紹介します。

• Step1 ： はじめに
• Step2 ： CSSの主なメリット
• Step3 ： 無料のCSSツール10個
• Step4 ： 関連記事

CSSはずいぶん前からウェブデザインに必要不可欠な存在になっています。
CSSがここ最近すっかりウェブの標準技術になっているということは、どのウェブデザイナーも認めることでしょう。

ウェブデザイナーでない人なら、CSSとは何か、なぜそんなに利用されているのか、と疑問に思うかもしれません。
ウィキペディアによると、CSSはマークアップ言語（HTMLなど）で書かれた文書の表示を指定するために使うスタイルシート言語です。
このウェブデザインツールにより、時間やお金をかけることなく、サイトへの訪問者の体験を向上させることができるようになります。

・見た目と内容を切り分けることができる
・デザインの変更プロセスが単純化される
・ウェブの読み込み時間が早くなる

他のテクノロジーと同様、CSSも進歩が早いです。
この変化や進化に伴い、CSSに関連する様々な便利ツールが日々開発されています。

ここでは、最近リリースされた、無料のCSSツールを10個集めてみました。
プロでも使えるものもありますし、ウェブデザインには詳しくないけど、ネットビジネスを運営している人、成果を増やしたい人に役立つツールもあります。
ここで紹介するツールを使って、仕事を楽にできるようになるといいですね。

ExtractCSS

HTMLからidやclassを抜き出したり、インラインで定義したスタイルを抜き出してきます。
それをCSSとして表示するオンラインツールです。

Iconizr

これは、SVG画像をCSSアイコンに変換するツールです。
一度に50アイコンまで操作できます。
それぞれのアイコンは300キロバイト以下です。
また、アイコンは300×300pxまでに制限されています。

Perfect Icons

ソーシャルアイコンを作るウェブベースのツールです。
このツールを使えば、コーディングをすることなく、ソーシャルアイコンをカスタマイズすることができます。
色の変更だってできます。

Glyphter

SVGからアイコンフォントを作ることができるオンラインツールです。
SVGを枠内にドラッグドロップすれば、アイコンフォントを入手できます。

Typebase.css

LESSやSASSでカスタマイズできる、テキスト用スタイルシートです。
大きなプロジェクトを修正するために使います。

Responsee II

これは、レスポンシブなCSSのフレームワークです。軽量で直観的です。
このフレームワークを用いてウェブサイトを作成すれば、完全なレスポンシブとなり、どのデバイスでもコンテンツが正しく表示されます。

ProCSSor

これは、オンラインで動く、無料のCSS最適化ツールです。
使い方は簡単で、これを使えばCSSが美しく整形され、コードが減って軽くなり、読み込みも早くなります。

CSS Lint

これは、CSS上の問題解決に役立つ無料ツールです。
このツールはCSSの中身を静的に解析し、開発者が将来頭を悩ませるかもしれないエラー箇所に旗マークや色をつけて教えてくれます。

Code Beautifier

これはCSSを掃除してくれるシンプルなツールです。
不必要な機能はついていません。
CSSの中身をそのまま貼り付けるか、CSSのリンクをはりつければ、きれいにしてくれます。
シンプルで簡単です。

CleanCSS

あなたのCSSがエラーなくきちんと書かれていれば、このツールによって極限までコードを圧縮し、読み込み速度を上げることができるようになります。

・初心者向けHTML：CSS(パート9)
・CSSテンプレート：無料テンプレート、チュートリアル、便利ツール
・CSS3：ミッシングマニュアル
・初心者向けCSS：ウェブデザインを微調整する方法
・HTML, CSS, JavaScript, ウェブグラフィックに関する初心者向けガイド

引用:Web Design Library 　　著者：AliceL　　翻訳：なかけん

スポンサードリンク