本文へスキップ
Numio

HTML ツール

HTML・Pug・JSX、SVG コンポーネント、CSS の変換。マークアップとスタイルの書き換えを補助します。

このカテゴリには 21 種のツールがあります。すべてブラウザで動作し、登録は不要です。

SVG パスエディター

SVG パスの形を直接編集できます。アンカーや曲線ハンドルを動かして、パスをコピーするか SVG を保存しましょう。

SVG 最適化ツール

SVGO で静的な SVG をローカルで最適化します。結果を比較し、個別のファイルまたは ZIP をダウンロードできます。

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 コードに変換。日本語の見出し・リスト・強調の例、画像の相対パスや表の対応範囲を確認できます。ブラウザ内で処理します。

Flexbox ジェネレーター

実際のフレックスレイアウトを操作できます。コンテナーや各アイテムを調整し、さまざまな幅で確認してから、CSS、HTML、Tailwind のコードを取得しましょう。

CSS クリップパスジェネレーター

キャンバス上で直接形を作れます。多角形の頂点をドラッグし、丸みのある形も試して、CSS または SVG をエクスポートしましょう。

ボックスシャドウジェネレーター

レイヤーを重ねて奥行きを表現できます。光源を動かし、柔らかさや色を調整して、そのまま使える影のコードをコピーしましょう。

CSS グリッドジェネレーター

CSS グリッドレイアウトを視覚的に作成できます。列と行のサイズを決め、セルをドラッグしてエリアに名前を付け、CSS、HTML、Tailwind をコピーしましょう。

キュービックベジェジェネレーター

2 つのハンドルをドラッグして CSS のイージングカーブを作成できます。linear のタイミングと動きを比べ、トランジションや Tailwind 用の cubic-bezier() をコピーしましょう。

角丸ジェネレーター

角ごとに丸みを付けたり、楕円の半径に切り替えたり、辺のハンドルをドラッグして不定形のブロブを作ったりできます。border-radius の CSS や Tailwind をコピーしましょう。

グラスモーフィズムジェネレーター

backdrop-filter ですりガラス風のパネルを作成できます。実際の背景の上でぼかし、透明度、彩度、枠線を調整し、CSS をコピーしましょう。

CSS グラデーション生成

ドラッグできるカラーストップ、角度ダイヤル、プリセットで線形・円形・扇形の CSS グラデーションを作成。CSS や Tailwind のクラスをすぐコピーできます。無料。

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に変換し、スタイルシートの読みやすさと再利用性を向上させます。