HTML ツール
HTML・Pug・JSX、SVG コンポーネント、CSS の変換。マークアップとスタイルの書き換えを補助します。
このカテゴリには 11 種のツールがあります。すべてブラウザで動作し、登録は不要です。
SVG → JSX
SVG コードから React 用のコンポーネントを生成。strokeWidth などの属性変換例、props や色の扱いを解説。SVG は変換のためサーバーへ送信されます。
SVG → React Native
このツールを使用してSVGファイルをReact Nativeコンポーネントに変換し、クロスプラットフォームモバイルアプリケーションを簡単に構築し、開発体験を向上させます。
HTML → JSX
HTML を React 用の JSX にブラウザ内で変換。className・htmlFor の書き換え例、関数コンポーネントの出力方法、CSS やイベント処理の注意点を紹介します。
HTML → Pug
HTML を Pug にオンライン変換。断片モード、タブ、属性のカンマと引用符を指定し、フォームや HTML 文書の例で確認できます。入力はサーバーで処理します。
Markdown → HTML
Markdown を HTML コードに変換。日本語の見出し・リスト・強調の例、画像の相対パスや表の対応範囲を確認できます。ブラウザ内で処理します。
CSS → JS Objects
CSSファイルをJavaScriptオブジェクトに変換し、フロントエンドプロジェクトでスタイルの使用と操作を促進します。
CSS → template literal
オブジェクトスタイルをテンプレートリテラルに変換し、Reactなどのフレームワークでのスタイルの適用を最適化します。
CSS → TailwindCSS
CSS の宣言を Tailwind CSS のユーティリティクラスに変換。結果は @apply 形式で表示し、rem の基準値や設定も変更できます。既存 CSS の移行時のクラス探しに（Tailwind v3 のスケール）。
Less → CSS
Less の変数・ネスト・ミックスインをブラウザ内で CSS にコンパイル。公式の less.js を使うため、lessc をインストールせずに出力を確認できます。ベンダープレフィックスの設定にも対応。
Scss → CSS
SCSSプリプロセッサファイルを標準CSSに変換し、スタイルシートの記述と管理を簡略化します。
Sass → CSS
Sassプリプロセッサファイルを標準CSSに変換し、スタイルシートの読みやすさと再利用性を向上させます。