CSS から JS Style へのコンバーター
CSS宣言を React インラインスタイルオブジェクト、React Native StyleSheet、または styled-components/Emotion css テンプレートリテラルに変換 — また、JS スタイルオブジェクトを通常の CSS に変換し戻します。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-style-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"conversionDirection": "css-to-js",
"outputFormat": "react-inline",
"cssInput": "background-color: #3b82f6;\nfont-size: 16px;\nopac…"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-to-js-style-converter` tool (CSS to JS Style Converter) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-to-js-style-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS から JS Style へのコンバーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールについて
CSS宣言のブロックを貼り付けると、すぐに使える JavaScript スタイルオブジェクトが戻ってきます — または逆に、JS スタイルオブジェクトを通常の CSS に変換します。このツールは、モダン JavaScript UI コードに CSS が表示される 3 つの方法をターゲットにしており、プロパティ名と値のルールが異なります：
- React インラインスタイル —
styleプロップ用の camelCase キー（backgroundColor、fontSize）を持つプレーンオブジェクト。数値ピクセル値は、React が自動的にpxを追加する場所（fontSize: 16）の裸の数字に変換されますが、opacityやfontWeightなどのユニットレスプロパティは、CSS 自体がそれらをユニットレスとして扱うため、数値のままです。 - React Native StyleSheet —
StyleSheet.create({ container: { ... } })でラップされた同じ camelCase 変換。レイアウトプロパティ（width、margin、padding、borderRadius、fontSizeなど）はpxサフィックスが削除されます。React Native の測定値は慣例によってユニットレスの数字だからです。 - styled-components / Emotion — タグ付きテンプレートリテラル（
const styles = css`...`;）。他の 2 つの形式とは異なり、プロパティ名は元の kebab-case のままで、値は逐語的にコピーされます — styled-components と Emotion はテンプレートリテラル内の実際の CSS 構文を解析するため、camelCase 変換または数値強制は行われません。
変換方向 を JavaScript → CSS に切り替えるとプロセスが逆になります。JS スタイルオブジェクト（引用符で囲まれていないキー、文字列型または数値型の値）を貼り付けると、標準的な property: value; CSS 行が返されます。数値は、ユニットレスプロパティ（opacity、zIndex、flex、lineHeight など）の 1 つでない限り、ピクセルに再拡張されます。これらのプロパティはプレーンな数字として書き戻されます。
使い方
- 変換方向 を選択します — CSS → JavaScript または JavaScript → CSS。
- CSS → JavaScript の場合は、出力形式 を選択します：React インラインスタイル、React Native StyleSheet、または styled-components/Emotion。
- CSS 宣言（または JS スタイルオブジェクト）を入力ボックスに貼り付けます。
property: value;行のようにゆるく貼り付けるか、selector { ... }ブロック内でラップできます。 - 入力時に出力が自動的に更新されます。
FAQ
なぜ React では font-size: 16px が fontSize: 16 になるのに、styled-components では font-size: 16px のままなのか？
React のインライン style プロップは、ほとんどのプロパティの裸の数字をピクセルとして扱うため、ツールは px を削除します。styled-components と Emotion はリテラル CSS テキストをレンダリングするため、単位は残る必要があります。
React Native ではどのプロパティが px を保持しますか？
React Native が数字を期待するものだけです：寸法、間隔（margin*、padding*）、位置オフセット、ボーダー幅/半径、fontSize、letterSpacing、およびギャッププロパティ。それ以外はすべて文字列として引用符で囲まれます。
ベンダープレフィックス付きプロパティを処理しますか？
はい — -webkit-、-moz-、-ms-、-o- プレフィックスは JS の同等物（WebkitTransform、MozTransform、msTransform、OTransform）に変換されます。
完全な CSS セレクターまたはネストされたルールを理解していますか？
いいえ — ゆるく入力されたか、単一の { ... } ブロックでラップされているかにかかわらず、宣言のみを読み取ります。セレクター、メディアクエリ、ネストされたルールは解析されません。
CSS カスタムプロパティ（--my-var）はどうなりますか？
カスタムプロパティを定義する宣言（-- で始まる）は CSS → JS 方向でスキップされます。値として var(--my-var) を使用することは保持されます。
プライバシー
このツールはブラウザー内で完全に実行されます — CSS と JavaScript はデバイスから離れることもサーバーに接することもありません。