CSSからJSへのコンバーター
CSS宣言をJSスタイルオブジェクト(Reactインラインスタイル、React NativeStyleSheet、styled-components、Emotion、またはプレーンオブジェクト)に変換し、JSからCSSへも逆変換します。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-js-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"direction": "css-to-js",
"cssInput": ".container {\n display: flex;\n background-color…",
"outputFormat": "react"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-to-js-converter` tool (CSS to JS Converter) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-to-js-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSからJSへのコンバーター — 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-in-JSライブラリとReactは、通常のCSS構文を受け入れません。プロパティがcamelCaseで、値が(ほぼ)引用符で囲まれた文字列であるJavaScriptオブジェクトが必要です。このツールは、既にお持ちのCSS宣言(スタイルシートからコピーしたもの、デザインツールのエクスポート、または手書き)をそのオブジェクト形式に変換し、逆方向にも変換できます。JSスタイルオブジェクトを貼り付けて、通常のCSSを取得してください。
5つのCSS-からJSへの出力形式をサポート:
- Reactインラインスタイル — プレーン
const styles = { ... }オブジェクト、style={styles}の準備完了。 - React NativeStyleSheet —
StyleSheet.create({ container: { ... } })でラップ、pxユニットはプレーン数値に削除(React Nativeにはユニット文字列がありません)。 - styled-components — タグ付きテンプレートリテラル(
styled.div\...``)で、元のkebab-case CSSを保持(styled-componentsは実際のCSS構文を受け入れるため)。 - Emotion cssプロップ — Reactと同じcamelCaseオブジェクト形式、
css({ ... })でラップ。 - プレーンJSオブジェクト — 周囲の変数宣言なしのオブジェクトリテラルのみで、独自のコードに貼り付けます。
使用方法
- 方向を選択: 「CSSからJS」(デフォルト)または「JSからCSS」。
- CSS宣言を貼り付け(
.card { ... }などの完全なルールブロック、またはプレーンproperty: value;行の両方が機能)— または、JSからCSSの場合、JSスタイルオブジェクトを貼り付けます。 - CSSからJSの場合、上記の5つのオプションから出力形式を選択します。
- 変換されたコードが出力ボックスに瞬時に表示されます。コピーするか、
styles.jsとしてダウンロードします。
変換の詳細
- プロパティ名がkebab-caseからcamelCaseに変換(
background-color→backgroundColor)され、逆戻りします。 - ベンダープレフィックス付きプロパティはReactの規約に従う:
-webkit-transform→WebkitTransform、-ms-overflow-style→msOverflowStyle(他のプレフィックスとは異なり小文字ms)。 - CSSカスタムプロパティ(
--my-color)はそのままで、オブジェクトキーとして引用符で囲まれます。 - プレーン数値(
z-index: 10、line-height: 1.5)は引用符のないJS数値になり、他はすべて単一引用符で囲まれた文字列になります。React Nativeはさらにpadding: 16pxなどのpx値をプレーン数値16に変換します。 - 入力での宣言順序は出力で保持されます。
FAQ
完全なCSSルールまたはプレーン宣言のみを処理しますか?
両方。完全なルール(.container { display: flex; ... })を貼り付けると、セレクターが自動的に削除されるか、セミコロンで区切られた宣言のみを自分で貼り付けます。
「JSからCSS」は何を生成しますか?
camelCaseキーをkebab-caseに逆変換した単一.selector { ... }ブロック。ツールはプレーン数値が何のユニットを意図していたかを知ることができないため、値はそのままコピーされます。
styled-componentsの出力が他の形式と異なるのはなぜですか? styled-componentsのタグ付きテンプレートは実際のCSS構文を受け入れるため、その形式は元のプロパティ名と値をそのまま保持し、JSオブジェクトに変換しません。
CSSまたはJavaScript構文を検証しますか? いいえ — これは軽量パーサーで、完全なCSS/JSパーサーではありません。不正な入力はベストエフォートで解析され、使用可能なものが見つからない場合、出力は黙って失敗するのではなく、それを説明します。
プライバシー
すべての変換はブラウザ内で局所的に発生します。貼り付けたものはアップロードまたは保存されません。