Logo

Fast Text Format

ダッシュボードに戻る

Fast Text Format Tools

フォーマット、変換、およびワークフローの合理化を行う、超高速ユーティリティの究極のコレクション。

お気に入り

最近使用したツール

最近追加されたツール

テキストとツール

コードとフォーマット

Base64 からファイルへ

Base64 文字列や Data URI を、ダウンロード可能なファイル(画像、PDF、ドキュメント、音声)に即座にデコード・プレビューします。

コード美化

JSON、JavaScript、CSS、HTMLコードを美化、検証、圧縮して整理された読みやすい構文にします。

CSS フォーマット

カスタムインデントで CSS スタイルシートを整形、美化、検証、圧縮します。

CSS ビジュアルジェネレーター

ボックスシャドウ、グラデーション、Flexbox、Grid レイアウトの CSS コードを視覚的に生成してエクスポートします。

CSV から JSON/SQL

CSVデータをJSON配列またはSQL INSERT文に変換します。

cURL から Fetch

cURLコマンドをJavaScript Fetch APIコードに簡単に変換します。

HTML / XML

乱雑なコードを即座に整形、圧縮、クリーンアップします。

HTML から JSX への変換

HTML タグと属性を React 互換の JSX に変換するクライアント側ツール。

HTML から Tailwind CSS への変換

標準のインラインスタイルや CSS 宣言を、プレビュー付きで Tailwind CSS ユーティリティクラスに変換します。

JS 難読化ツール

読みやすい JavaScript コードを難読化および圧縮されたコードに変換し、ロジックを保護します。

JSON から コード

JSONオブジェクトをさまざまな言語の型付きモデルに変換します。

JSON ツリービューアー

複雑な JSON データを視覚的に展開、折りたたみ、検索、フィルタリングし、パスを簡単に検査できます。

Markdown

ライブHTMLプレビューを使用して生のマークダウンを記述します。

Source Map ビューア

クライアント側で .map ファイルをアップロードし、スタックトレースを復元・逆最小化するツール。

SQL フォーマッター

乱雑なSQLクエリを美化し、フォーマットします。

文字列のエスケープとアンエスケープ

JSON 文字列、SQL クエリ、HTML、Java/C# 向けに、引用符、バックスラッシュ、改行を安全にエスケープ(および復元)します。

SVG オプティマイザー

生のSVGコードを圧縮およびクリーンアップします。

SVG を PNG/WEBP に変換

HTML Canvas を利用して SVG コードまたはファイルをダウンロード可能な画像にラスタライズするクライアント側ツール。

XML ユーティリティ

XML文字列のフォーマットと圧縮を行います。

YAML <-> JSON

YAMLとJSONを瞬時に変換します。

データと暗号

ジェネレーター

ASCII アート

巨大なアスキーアートテキストバナーを生成します。

バーコードジェネレーター

テキストから線形バーコード(UPC、EAN、Code39)を Canvas で生成するクライアント側ツール。

CHMOD 計算機

Linuxファイルの権限を簡単に計算します。

カラーコントラスト

WCAG カラーコントラストのアクセシビリティを確認します。

カラーフォーマット

HEX、RGB、HSLのカラーコードを即座に変換します。

Cron デコーダー

cronスケジュールを人間が読めるテキストに翻訳します。

ファビコンジェネレーター

通常の画像を汎用互換性のある.icoファイルに変換し、標準的なWebアプリアイコンサイズを生成します。

画像 Base64

画像ファイルを Base64 Data URI 文字列および CSS background-image プロパティに変換します。

画像圧縮ツール

ブラウザ内で JPEG、PNG、WEBP、AVIF 画像をローカルに圧縮・最適化します。

マークダウンテーブルジェネレーター

ユーザーが簡単に行/列を追加し、完全にフォーマットされた Markdown テーブル構文を即座に出力できるビジュアル グリッド エディター。

メタタグ&Open Graphジェネレーター

SEOメタタグ、Twitterカード、Facebook Open Graphタグを生成し、視覚的にプレビューします。

モックデータジェネレーター

数百行の偽のテスト データ (名前、電子メール、住所、日付、クレジット カード) を生成し、データベース テスト用に CSV、JSON、または SQL INSERT ステートメントとしてエクスポートします。

パスワード生成ツール

暗号化アルゴリズムを使用して強力で安全なパスワードを作成します。

PDFツールキット

ブラウザ内で100%安全かつローカルにPDFページの結合、分割、抽出、回転、並べ替えを行います。

プレースホルダーテキスト

UIモックアップ用にランダムなプレースホルダーテキストを作成します。

QR コード

テキストまたはURLから、スケーラブルでスキャン可能なQRコードを作成します。

正規表現テスターと正規表現ビルダー

リアルタイムの一致およびキャプチャ グループのハイライト表示、構文説明の内訳、および複数文字列テスト モードを使用して正規表現をテストします。

Robots.txt ジェネレーター

有効なrobots.txtルールとクローラーディレクティブを作成し、AIスクレイパーをブロックします。

UUID / GUID

汎用一意識別子 (v4) を即座に生成します。

XMLサイトマップジェネレーター

検索エンジン向けにカスタムURL、更新頻度、優先度を指定した有効なXMLサイトマップを構築します。

金融と単位

ネットワーク

コードとフォーマット

CSS ビジュアルジェネレーター

ボックスシャドウ、グラデーション、Flexbox、Grid レイアウトの CSS コードを視覚的に生成してエクスポートします。

シャドウ設定
0px
10px
25px
-5px
25%
16px
ライブプレビュー
Box Shadow
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);
グラデーション設定
135°
ライブプレビュー
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Flex コンテナ
16px
4

Click any item in the preview to select and inspect its properties.

選択中のアイテム: #1
ライブプレビュー
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
Grid パラメータ
3
2
16px
16px
ライブプレビュー
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}

使い方

ジェネレーターモード(ボックスシャドウ、グラデーション、Flexbox、Grid レイアウト)を選択します。スライダーで視覚的に調整し、生成された CSS をコピーまたはエクスポートします。

よくある質問

CSS ボックス シャドウはどのように機能し、各パラメーターは何を意味しますか?

CSS の box-shadow プロパティは、要素フレームに 1 つ以上のドロップシャドウを付加します。パラメーターは、水平オフセット (X)、垂直オフセット (Y)、ぼかし半径 (影のエッジがどの程度柔らかくまたは拡散して表示されるか)、拡散半径 (影がどの程度拡大または縮小するか)、影の色 (通常は半透明の rgba)、およびコンテナー内に影をレンダリングするためのオプションの 'inset' キーワードを指定します。

リアルな UI シャドウに複数のボックス シャドウ レイヤーを使用する必要があるのはなぜですか?

現実世界の影は、周囲環境光と直接指向性光の両方で構成されます。タイトで少し暗いシャドウと、広がりのある柔らかく不透明度の低いシャドウを重ねると、濁ったり人工的に見えることなく、自然な高さと奥行きが生まれます。

CSS の線形グラデーションと放射状グラデーションの違いは何ですか?

線形グラデーションは、度またはキーワード (例: 135 度または「右下へ」) で定義された直線の方向軸に沿って色を遷移します。放射状のグラデーションは、単一の原点から円形または楕円形のパターンで外側に現れ、スポットライトまたは球形の色の遷移を作成します。

CSS フレックスボックスと CSS グリッドのどちらを使用すべきですか?

Flexbox は、項目 (ナビゲーション バー、ボタン グループ、ツールバーの配置など) を単一の行または列に整理するのに最適な 1 次元レイアウト システムです。 CSS グリッドは、複雑な Web ページ構造、複数列のダッシュボード レイアウト、厳密なグリッド配置向けに設計された 2 次元レイアウト システムです。

Flexbox の justify-content と align-items の違いは何ですか?

justify-content は、主軸 (flex-direction が行の場合は水平、列の場合は垂直) に沿ったフレックス項目の分布を制御します。 align-items は、交差軸 (主軸に垂直) に沿った項目の位置を制御します。

repeat(auto-fit, minmax(...)) はメディア クエリを使用せずに応答性の高いグリッドをどのように作成しますか?

auto-fit キーワードは、コンテナの現在の幅に基づいて可能な限り多くの列をフィットさせるようにグリッド コンテナに指示します。 minmax(200px, 1fr) 関数は、各列が 200px 未満に縮小しないようにしますが、残りの利用可能なスペースを占有するために比例して拡張します。

最新の CSS レイアウトのギャップ プロパティとは何ですか?

ギャップ プロパティは、フレックスボックス レイアウトとグリッド レイアウトの両方で行と列間の一貫した間隔を定義します。これは、廃止されたマージン ハックとネガティブ マージンを置き換えるものであり、コンテナーの外周にスペースを追加しません。

生成された CSS スタイルは、最新のすべての Web ブラウザー間で互換性がありますか?

はい。最新の CSS ボックス シャドウ、線形/放射状グラデーション、フレックスボックス、CSS グリッドは、-webkit- や -moz- などのレガシー ベンダー プレフィックスを必要とせず、Chrome、Firefox、Safari、Edge、iOS Safari、Android ブラウザー全体でユニバーサルにサポートされています。

flex-grow と flex-shrink はアイテムのサイズをどのように決定しますか?

flex-grow は、コンテナの残りの正のスペースのうち、アイテムがその兄弟と比較してどれだけの量を吸収するかを指定します。 flex-shrink は、コンテナーのスペースが不十分な場合に項目を圧縮する速度を決定します。

エクスポートした CSS を React、Vue、Svelte、または Tailwind プロジェクトで使用できますか?

はい。エクスポートされた CSS ルールは、標準 CSS ファイル、CSS モジュール、スタイル付きコンポーネントに直接貼り付けることも、任意の Tailwind ユーティリティ クラス (shadow-[...]、bg-[linear-gradient(...)] など) に変換することもできます。

結果が見つかりません

検索キーワードを変更してもう一度お試しください。