CSS to JS スタイルオブジェクトコンバーター
CSS 宣言(property: value;)を貼り付けると、camelCase キーの JavaScript スタイルオブジェクトが得られ、React の `style` プロパティやあらゆる JS スタイリングにすぐ使えます。ベンダープレフィックスや CSS カスタムプロパティにも対応します。すべてブラウザ内でローカルに実行され、何もアップロードされません。
—
JS スタイルオブジェクト
使い方
- 入力ボックスに CSS 宣言を貼り付けます。
- 各プロパティは camelCase に、各値は文字列として引用符で囲まれます。
- 出力ボックスから生成されたスタイルオブジェクトをコピーします。
よくある質問
- プロパティ名はどう変換されますか?
- ハイフン付きプロパティは camelCase になります(font-size → fontSize)。ベンダープレフィックスは React のルールに従い、-webkit- は Webkit、-ms- は小文字の ms のままです。
- CSS カスタムプロパティはどうなりますか?
- --main-color のような変数は名前を保持し、引用符付きのキーになります。React がそのまま適用するためです。
- 値は数値に変換されますか?
- いいえ。すべての値は引用符付き文字列として出力され、常に有効です。単位なしの数値が必要な場合は手動で引用符を外してください。
- 私の CSS はどこかに送信されますか?
- いいえ。変換は完全にブラウザ内で行われ、何もアップロードされません。
関連ツール
HTML → JSX コンバータ
HTML スニペットを貼り付けると React 用の JSX に — `class` は `className` に、`onclick` は `onClick` に、void タグは自己クローズ、インラインスタイルはオブジェクト化可能。
開発 0 0
JS オブジェクト ↔ JSON
JavaScript オブジェクトリテラル (`{name: 'Alice'}`) を厳密な JSON に変換 — または厳密な JSON を、引用符なしのキーを持つ整然とした JS リテラルに戻す。
変換 0 0
HTML / CSS / JS ミニファイア
HTML / CSS / JavaScript の空白とコメントを除去 — 削減サイズを表示してコピー。
開発 0 0
EditorConfig ジェネレーター
インデントスタイル・改行・文字セット・よく使う上書きを備えた .editorconfig ファイルをブラウザ上で作成します。
開発 0 0
CSS セレクターテスター
HTML に対して CSS セレクターをテストし、どの要素にマッチするかを正確に確認します。ブラウザ上で動作します。
開発 0 0
CSS Flexbox プレイグラウンド
flex-direction・justify-content・align-items・gap をクリックで調整 — CSS や Tailwind クラスをコピー。
開発 0 0