55以上のCSSツール：プリプロセッサ、プラグイン、エディタ、グラデーションジェネレータ

公開: 2016-12-30

CSSはCascadingStylesheetの略です。 CSSは、Webページを設計するためにHTMLで使用されるマークアップ言語です。 HTMLページは見栄えがよくありませんが、CSSを使用すると、美しく魅力的に見せることができます。 WordPressテーマ開発を学ぶことを計画している場合は、まず、HTMLとCSSを学ぶ必要があります。

テーマ開発ツールシリーズのその他の記事

WordPress開発ツールシリーズのメインページ
HTML、CSS、JavaScript、jQuery、Bootstrap、WordPressをマスターするための15冊の無料の本をダウンロード
30以上の最高のChrome、Firefox拡張機能、Web開発者向けのチュートリアルとツールの究極のリスト
HTML、CSS、PHP、jQuery、JavaScript、Gitなどを学ぶための38の無料ビデオコース

この記事では、初心者から上級者までのWordPress開発者向けの最高のCSSツールを紹介します。まったくの初心者で、HTMLやCSSについて何も知らない場合は、38の無料コースと15の無料の電子書籍をダウンロードして、HTML、CSS、その他のプログラミング言語を最初から学ぶことができます。

12 CSSツール：CSSプリプロセッサ、アプリ、アドオン

Less CSS ：LessはCSSプリプロセッサです。つまり、CSS言語を拡張し、変数、ミックスイン、関数、およびCSSをより保守しやすく、テーマを設定し、拡張できるようにするその他の多くの手法を追加します。
SASSは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語であると主張しています。 SASSはほぼ10年前のものであり、ほんの数例を挙げると、Compass、Bourbon、Susyなど、Sassで構築されたフレームワークは無数にあります。
スタイラスはCSSプリプロセッサであり、通常のCSSの機能を拡張します。強力な論理機能、Node.js / JavaScriptを介して実行する機能（Rubyなし）、Node.jsセットアップの一部として実行する機能、クリーンで最小限でありながら柔軟な構文を提供します。
CodeKit（$ 32）は、MACユーザーにとって非常に強力で人気のあるアプリです。 CodeKitは、Less、Sass、Stylus、CoffeeScript、Typescript、Jade、Haml、Slim、Markdown、Javascriptをコンパイルできます。自動更新ブラウザを提供し、組み込みのBowerを使用すると、Bootstrap、jQuery、Modernizr、Zurb Foundation、さらにはWordPressを含む6,000以上のコンポーネントをワンクリックでインストールできます。
PrePros（$ 29） ：Preprosは、LESS、Sass、Compass、Stylus、Jadeなどを自動CSSプレフィックスでコンパイルするためのプレミアムツールであり、クロスブラウザーテスト用のサーバーが組み込まれています。 Windows、Mac OS X、およびLinuxで使用できます。自動CSSプレフィックス、自動ブラウザ更新、ファイル縮小、画像最適化、組み込みサーバーなどを提供します。
Emmet ：さまざまなコードエディターがコードをすばやく簡単に作成するための無料のプラグイン。 Emmetは純粋なJavaScriptで記述されており、さまざまなプラットフォーム（Webブラウザー、Node.js、Microsoft WSH、Mozilla Rhino）で動作します。
Fire.App：Windows用のCodeKitのようなツールはfire.appです（LinuxとMacでも動作します）。 Sass / Compassは好きですが、コマンドラインインターフェイスは嫌いですか？ Fire.appは、Compass.appと同様に、ファーストクラスのSass/Compassをサポートしています。ベンダーのCSSプレフィックスや手作りのスプライト画像はもうありません！。 Fire.appは、Mac、Linux、およびWindowsプラットフォームで動作します。インストールプロセスは、クリックしてドラッグするのと同じくらい簡単です。
Snippetsは、コードを管理するための無料のプログラムです。さまざまなプロジェクトでコードスニペットを整理して再利用したり、スニペットを公にチームと共有したりするのに役立ちます。これはMacとWindowsで利用できます。
Koala Appは、Less、Sass、Compass、およびCoffeeScriptをコンパイルするためのGUIアプリケーションであり、Web開発者がそれらをより効率的に使用できるようにします。 Koalaは、Windows、Linux、およびMacで実行できます。
LiveReloadCSSの編集と画像の変更がライブで適用されます。 CoffeeScript、SASS、LESSなどが機能します。 LiveReloadは、ファイルシステムの変更を監視します。ファイルを保存するとすぐに、必要に応じて前処理され、ブラウザが更新されます。
Scout Appは、Sass＆CompassのパワーをWebデザイナーの手に届けるクロスプラットフォームアプリです。 Scoutは、より多くの制御、最適化、および編成を提供することにより、CSSワークフローを簡単にするのに役立ちます。
Crunch 2 Crunchを使用すると、Less、Sass、CoffeeScript、Markdown *を記述し、変更を加えた後、CSS、JavaScript、およびHTMLを自動的に保存できます。プレーンなCSSだけを書きたいですか？ XML？ Haskell？ MUSHCode？クランチはあなたにもそれをさせます。 Crunch 2は、やりたいことを実行できるエディターです。クランチはあなたを愛しているからです。

10のWordPressカスタムCSSプラグイン

WordPressでCSSをカスタマイズする場合は、WordPress4.7以降のカスタマイザーで利用できる多くの無料プラグインまたは組み込みのCSS編集機能を使用できます。無料の10個の無料CSSプラグインのリストを作成しました。これは、カスタムCSSを簡単に変更および保存するのに役立ちます。

このチュートリアルを読んで、Chromeデベロッパーツールを使用してWordPressテーマでCSSを編集する方法と、jQueryまたはPHPを使用せずにCSSを使用してWordPressメニューで矢印を追加する方法を学ぶこともできます。

15個のCSSグラデーションジェネレーター

colorzillaグラデーションエディタ
cssmaticグラデーションエディター
angrytoolsグラデーションジェネレータ
gradientgenerator.com/
css3generator.com/
cssportal勾配ジェネレータ
uigradients.com：美しいカラーグラデーションをすぐに使用できます
css3factory線形グラデーション
gradcolorグラデーションジェネレータ
perbangRGBグラデーション
paintbycodeグラデーションジェネレータ
virtuosoftグラデーションジェネレーター
westciv放射状勾配
westciv線形グラデーション
CSS3グラデーションジェネレーター

10無料のオンラインCSSエディター

CSSポータルによるオンラインCSSエディター
CSSdeckラボ
ScratchPadリアルタイムHTMLおよびCSSエディター
EnjoyCSSによるオンラインCSS3コードジェネレーター
cssdesk
jsfiddle：JavaScript、CSS、HTML、またはCoffeeScriptをオンラインでテストします
CSSmateエディター
CSSの美化と縮小
liveweave HTML5、CSS3、JavaScriptの遊び場
SelfCSS –WYSIWYGCSSエディター

CSSを変更するための10Chrome拡張

CSSViewer
Stylebot
ユーザーCSS
ライブCSSエディター
開発ツールの自動保存
CSSを保存
レスポンシブウェブデザインテスター
レスポンシブインスペクター
ビューポートリサイザー
タブのサイズ変更–分割画面レイアウト

最後の言葉

Webデザイナーと開発者向けのCSSツールのリストは以上です。これらの無料のCSSツールを使用して、スタイルを簡単にカスタマイズし、変更を保存できます。 Chrome拡張機能は、Chrome開発者ツールを離れることなく、CSS編集を保存するのに非常に便利です。

CSSプリプロセッサを使用すると、CSSを効率的に作成できます。これらのツールを気に入っていただければ幸いです。この記事は、テーマ開発ツールシリーズの一部です。 WordPressテーマ開発ニュースレターに参加して、無料の本をダウンロードし、WordPressテーマ開発に関する最新の記事やチュートリアルを受け取ることを忘れないでください。

注：この記事は元々createwptheme.comで公開されていましたが、許可を得てここで再公開しました。