[翻訳] より良い文章を書くための 40 の必須ツール CSS_html/css_WEB-ITnose

ご存知のとおり、CSS は Web サイトの見た目を美しくしたり、アニメーションを追加したり、プレゼンテーションとコンテンツを分離したりするのに最適です。 CSS についてすべてを理解するのは非常に難しく、コードにブラウザ間互換性を持たせる必要があるため、さらに難しくなります。
ワークフローの簡素化から実際の CSS の生成まで、ここでは多くのサードパーティ ツールが紹介されています。これらのツールは必要なコードを提供し、自分で作成するコードよりも高速に実行されます。

Pure

Pure はフレームワークではありません。代わりに、利便性のためにモジュールに適用されたいくつかの CSS コードを統合するだけです。プロジェクトに必要な CSS コードの部分を取得するだけです。もちろん、すべてのコンポーネントが利用可能です。 Pure にはグリッド システム、ボタン、テーブル、フォーム、メニューが含まれており、すべて Normalize.css 上に構築されています。

マジック アニメーション CSS3

マジック アニメーション CSS3 は CSS3 アニメーションを統合し、要素の置換、スライドアウト、変形、フェード効果を含むあらゆる要素に適用できます

Jeet グリッド システム

Jeet は semantic.gs に似ています。 SASS に基づくグリッド システム。マークアップ要素にクラスを追加する代わりに、CSS で列 (場合によっては行) を定義できます。 Jeet を使用すると、レスポンシブなレイアウトが簡単になり、コンテンツとプレゼンテーションがさらに分離されます。

10 Pure CSS Flat Mobile Devices

Oleg という名前の男が、純粋な CSS を使用して 10 種類のモバイル デバイス (iPhone 6、iPad Mini、Nexus 5、Lumia 920 を含む) を再ペイントしてシミュレートしました

CodyHouse

無関係なものを追加するライブラリ、独立したコンポーネントを Web サイトに追加します。 CodyHouse は HTML、CSS、JavaScript で構築されており、さまざまなナビゲーション、視差効果、ページング、モーダル ウィンドウ、ページ レイアウトなどから選択できます。各コンポーネントには、すぐに使用できる独自のチュートリアルがあります。

Ratchet

モバイル APP に HTML、CSS、JavaScript を使用する場合、Ratchet は優れたフレームワークとなるはずです。すべての UI コンポーネントはモバイル デバイス向けにカスタマイズされており、従来の HTML/CSS フレームワークにはない多くの機能が備えられています。コンポーネントのデフォルトの効果はどれも素晴らしいです。

Animo.JS

Animo は JQuery に基づいており、CSS アニメーションをより適切にトリガーするのに役立ちます。 CSS アニメーションによって提供されるハードウェア アクセラレーションを利用しながら、アニメーションをオーバーレイしたり、最初のアニメーションが完了した後に 2 番目のアニメーションをトリガーしたりできます。

Adobe Extract

Photoshop レイヤー スタイル ファイルを CSS に変換するのは面倒です。幸いなことに、Adobe は、レイヤーを選択してそのプロパティを CSS コードに変換できるツール (ブラウザーで実行される) を作成しました。 PSD ファイル内のオンライン Web サイトで使用されているテキストを選択することもできます。

Sculpt

Sculpt は SASS に基づいており、優れたフレームワークです。他のリリースされたフレームワークと比較して、Sculpt は放棄された下位バージョンのブラウザーをサポートします。 SASS を使用してモバイルファースト Web サイトを開発し、その Web サイトを以前のバージョンの IE で通常どおり実行したい場合は、Sculpt を検討してください。

CSS3 ジェネレーター

シンプルでユニバーサルな CSS3 属性ジェネレーター。それほど新しいものではありませんが、正確な構文を忘れたときに非常に役立ちます。

Bourbon Neat

SASS のお気に入りである Bourbon Neat は、単独で使用できるシンプルなセマンティック グリッド システムですが、Bourbon mixin ライブラリを使用するように設計されています。

Enjoy CSS

Enjoy CSS も CSS3 ジェネレーターですが、興味深いのは、CSS3 関連のコードを生成するだけでなく、それを適用する要素 (div、テキスト入力) を選択することもできることです。 、ボタンなど。シンプルな視覚的な方法で希望通りの効果を得ることができます。

キーフレーマー

ここでキーフレームベースの CSS アニメーションの作成を開始します。この Web サイトにアクセスして、いくつかのチュートリアルに従ってください。

Gumby

Gumby は、Ruby 環境で作業することを好む人のために設計された HTML/CSS フレームワークです。もちろん、個別にダウンロードすることもできますが、Ruby gem (このテクノロジーの専門家によって作成された Ruby gem) としてパッケージ化することもできます。

CSShake

これには CSS アニメーションが増えており、いくつかの変更を加えることに重点が置かれています (私が何を言ったかわかりますか?)、しかし、彼らはオンラインでお金を稼ぐ技術を披露しています (これには我慢できません!)。

Bounce.JS

Bounce.JS は、視覚化 (CSS3 アニメーションの設計用) と JS ライブラリ (実装用) を組み合わせているため、ビジュアル デザインが好きな人にとって非常に使いやすくなっています。

GridLover

フォント サイズを調整する簡単で視覚的な方法が必要ですか? GridLover は、タイポグラフィをプレビューし、適切な縦横比を設定し、CSS を取得する簡単な方法を提供します。 CSS でフォ​​ントのピクセル値、EM、または REM を取得でき、これらの値は通常の CSS、SASS、LESS、またはその他のコーディング スタイルにフォーマットされます。

CSS の抽出

CSS ファイルをすぐにセットアップしたいですか? 1 つの方法は、最初に HTML を記述し、次に ID、クラスなどを設定し、その HTML コードを ExtractCSS に貼り付けます。Web APP はすべてのセレクターをリストし、最後にそれらを CSS ファイルに組み込みます。

Kite

Kite はレイアウト用の CSS ライブラリです。そのデザインは CSS Flex モジュールを使用しますが、Flex を完全には使用しません。 Kite は IE8+ と互換性があります。

Pesticide

レイアウトで何が起こっているかを正確に確認する必要がありますか? PesticideCSS ファイルを追加します。ページ上のすべての要素に境界線を追加し、要素が階層の子である場合は境界線の色を微妙に変更します。シンプルだけど印象的。

どうぞ

CSS を前処理したり、IE フィルターを含む特定のプレフィックスを追加したりするためのさまざまなツールを探すことにうんざりしていませんか? これは、コマンド ラインを使用しても構いません。 SASS、LESS、Stylus と互換性があります

CSS カラー

CSS フレンドリーなカラー名のリスト (16 進数と rgba 形式を含む)。

CSS Vocabulary

CSS 関連の用語の便利なリストを提供する小さなアプリケーションです。 1 つを選択すると、コード例を強調表示して用語を説明します。

Tridiv

純粋な CSS を使用して複雑な 3D モデルを作成します。

ボタン

SASS と Compass を使用して CSS ボタン ライブラリを作成します

CSS メニュー メーカー

CSS メニュー メーカーは、シンプルで応答性の高いナビゲーションを構築するのに役立ちます

One% CSS グリッド

One% CSS グリッドは 12 列の流体ですレイアウト グリッド システム。より速く、より安価に応答性の高いレイアウトを構築するために設計されています。

Simptip

Simptip は、SASS によって作成された CSS プロンプト ボックス ツールです。プロンプト ボックスの方向 (上、右、下、左) を設定できるだけでなく、成功の色、情報の色、警告の色、危険の色などのさまざまな色を設定することもできます。

Myth

Myth は CSS プリプロセッサであるため、CSS を記述するだけでよく、下位バージョンのブラウザのサポートや下位バージョンの仕様の改善についても心配する必要はありません。

ホバー CSS

リンク、ボタン、ロゴ、SVG、アイキャッチ画像などで使用できる統合 CSS ホバー効果コード。

CSS アニメーション チート シート

CSS アニメーション チート シートは、プリセットのプラグアンドプレイ アニメーション CSS ライブラリのセットです。スタイル シートを Web サイトにインポートし、アニメーション化する要素にクラスを追加するだけです。それでおしまい。

Spinkit

Spinkit には、シンプルだが素晴らしい CSS アニメーション読み込み効果が含まれています

Typebase.CSS

Typebase.CSS は、小さくカスタマイズ可能なタイポグラフィ スタイル シートです。 Less バージョンと Sass バージョンの両方があるため、簡単に変更して最新の Web プロジェクトに組み込むことができます。

SpriteBox

CSS イメージャー スプライトをドラッグ アンド ドロップ エディターに変えて、コードを記述させます。

CSS Ratiocinator

CSS Ratiocinator は、実際のレンダリング効果をチェックして無駄な CSS コードをクリーンアップするコマンド ライン ツールです。これは、一部の CSS ファイルが制御不能になる大規模なプロジェクトに最適です。

CSS Beautifier

CSS の美化、縮小されたファイルはあるが元のファイルが見つからない場合 (またはコードが少し面倒な場合)、コードの美化は適切な書式設定と修正で修正できます。インデント。

CSScomb

CSS Beautifier を使用してコードを読みやすくした後、CSScomb を使用してコードを実行して、すべてのプロパティがアルファベット順に並べられていることを確認できます。セレクターではなく、常にフォント宣言の後の幅などのプロパティを覚えておいてください。

Anima

CSS アニメーションの機能を拡張するように設計されたアニメーション ライブラリで、同時に 100 個の要素をアニメーション化できます。

Recess

Recess は、コンパイラーとしても実行されるストリッパー プログラムであり、CSS が一連のルールに準拠し、無駄のない状態を維持することを目的としています。各ルールは、コーディング スタイルに合わせて個別に無効にすることができます。

ボーナス: A to Z CSS

ボーナス: A to Z CSS はツールではありませんが、初心者にとっては素晴らしいリソースです。 Guy Routledge は、ボックス モデルや最も一般的に使用される CSS プロパティなど、基本的な CSS ルールのすべてについてしっかりとしたレッスンを提供します。

翻訳元: http://www.ido321.com/1545.html
英語原文: 40 tools for writing better CSS