広告が嫌いですか? 行く広告なし今日 

CSSからJavaScriptスタイルオブジェクトへのコンバーター

データ開発者

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

CSSからJavaScriptスタイルオブジェクトへのコンバーター

CSS宣言をJavaScriptスタイルオブジェクトに即座に変換するか、その逆のプロセスを実行してJSからCSSに戻します。Reactインラインスタイル、React Native StyleSheet、styled-components、Emotion、およびプレーンJSオブジェクトを含む5つの出力形式をサポートします。ベンダープレフィックス、CSS変数、数値検出、およびセレクターの除去を伴う完全なCSSルールブロックを扱います — すべてブラウザでクライアントサイドで実行されます。

使用方法

CSS宣言を入力エリアに貼り付けて、ターゲットの出力形式を選択してください。コンバーターは、プロパティ名を自動的にcamelCaseに変換し、ベンダープレフィックスを処理し、選択したターゲットに適切に値をフォーマットします。JavaScriptスタイルオブジェクトを標準CSSに戻すには、JSからCSSモードに切り替えます。結果をワンクリックでクリップボードにコピーします。

機能

両方向変換 – CSSをJSスタイルオブジェクトに、またはJSオブジェクトをCSSに変換
5つの出力形式 – Reactインラインスタイル、React Native StyleSheet、styled-components、Emotion css prop、およびプレーンJavaScriptオブジェクト
ベンダープレフィックスの処理 – 正しく変換します -webkit-transform に WebkitTransform, -moz-appearance に MozAppearance、およびその他のベンダープレフィックス付きプロパティ
スマート数値値 – 単位なしの数値を整数として保持します (margin: 0 そのまま 0)、React Nativeのためにpx単位を削除し、Reactのために単位付きの文字列値を保持します
CSS変数サポート – カスタムプロパティを処理します (--custom-prop) と var() 参照
セレクターの除去 – 完全なCSSルールブロックを貼り付けると、コンバーターは宣言のみを抽出します
Syntax Highlighting – CSSとJavaScriptの両方で色分けされた出力、クリップボードへのコピー機能付き

広告削除する？

 よくある質問

JavaScriptでCSSプロパティをcamelCaseにする必要があるのはなぜですか？

JavaScriptオブジェクトキーには、ハイフンをそのまま識別子として含めることはできません。background-colorのようなプロパティは、backgroundマイナス colorと解釈されます。Reactおよびその他のJSフレームワークの規則では、camelCaseの同等物（backgroundColor、fontSize、borderRadius）を使用します。このコンバーターは、ベンダープレフィックスの特別な大文字化規則を含め、変換を自動的に処理します。
ReactとReact Nativeのスタイル処理の違いは何ですか？

Reactインラインスタイルは、文字列値にCSS単位が含まれるcamelCaseプロパティを使用するため、font-size: 16pxはfontSize: '16px'になります。React NativeはStyleSheet APIを使用しており、ピクセル値は単位なしのプレーンな数値であるため、同じプロパティはfontSize: 16になります。React Nativeは、特にmarginのような複数の値を持つショートハンドプロパティなど、すべてのCSSプロパティをサポートしているわけではありません。
ベンダープレフィックスはJavaScriptでどのように変換されますか？

ベンダープレフィックスは、JavaScriptで特定のキャピタライゼーション規則に従います。プレフィックスは先頭のハイフンを失い、大文字化されます: -webkit-transformはWebkitTransformに、-moz-appearanceはMozAppearanceに、-ms-grid-columnsはmsGridColumnsになります。msプレフィックスは慣例により小文字ですが、webkit、moz、oは大文字であることに注意してください。
styled-componentsまたはEmotion CSSをプレーンCSSに戻せますか？

はい。JSからCSSモードを使用する場合、JavaScriptスタイルオブジェクトを貼り付けると、コンバーターはcamelCaseプロパティをハイフン区切りのCSSプロパティに変換し、文字列値をアンラップし、出力を標準CSS宣言としてフォーマットします。これは、元のスタイルがどのJSフレームワーク用に記述されたかに関係なく機能します。なぜなら、それらはすべて同じcamelCase規則を使用しているからです。