CSS Glassmorphism Generator ライブビジュアルエディターで、見事なフロストガラス効果を作成します。 バックドロップブラー、背景の透明度、境界線の不透明度、境界線の半径、ボックスシャドウをリアルタイムで調整し、カラフルなプレビューで結果を即座に確認できます。 生成されたCSS、またはプロジェクトですぐに使用できる完全なHTML+CSSスニペットをコピーします。クロスブラウザサポートのためのベンダープレフィックスも含まれています。 使用方法 スライダーを使用してガラスモルフィズムプロパティを調整します：backdrop blurは、フロストガラスの強度を制御し、background colorとalphaは、ティントを設定し、borderは、微妙なガラスのエッジを追加します。 6つのグラデーション背景から選択し、フローティングシェイプを切り替えて、ブラーがガラスカードの背後にあるコンテンツとどのように相互作用するかを確認します...
ツールを試す »CSS Transform Generator 視覚的にCSSのtransformプロパティを構築し、ライブプレビューで確認できます。回転、スケール、傾斜、移動、遠近感のための2Dおよび3D変換スライダーを調整し、生成されたCSSをコピーします。transform-originグリッドピッカー、アニメーションプレビュー切り替え、フリップやチルトなどの一般的な効果のワンクリックプリセットが含まれています。 使用方法 スライダーをドラッグして各変換プロパティを調整し、プレビュー要素にリアルタイムで適用される効果を確認します。 2Dセクションを使用して、回転、スケール、傾斜、移動を行います。 3Dセクションに切り替えて、rotateX、rotateY、rotateZ、および遠近感を設定します。 transform-originグリッドのセルをクリックして、回転中心点を変更します。 プリセットを試して、すばやく効果を得ましょう...
ツールを試す »CSSからJavaScriptスタイルオブジェクトへのコンバーター CSSからJavaScriptスタイルオブジェクトへのコンバーターは、CSS宣言をJavaScriptスタイルオブジェクトに変換し、その逆も行います。Reactインラインスタイル、React Native StyleSheets、またはstyled-componentsやEmotionなどのCSS-in-JSライブラリのいずれを使用している場合でも、このツールは変換を即座に処理します — 手動でのキャメルケースの書き直しはもう不要です。 使用方法 CSS宣言を入力パネルに貼り付けます。 目的の出力形式（Reactインラインスタイル、React Native StyleSheet、またはstyled-componentsテンプレートリテラル）を選択します。 コンバーターは各プロパティをリアルタイムで処理します：ハイフン区切りの名前はキャメルケースになり、値は適切に引用符で囲まれるか数値のまま保持され、ベンダープレフィックスは正しく処理されます。 逆方向の変換も可能です ...
ツールを試す »HTTPリクエストヘッダービルダー HTTPリクエストヘッダーを視覚的に構築します。一般的なヘッダー（Authorization、Content-Type、Accept、Cache-Controlなど）をドロップダウンから追加し、認証（Bearerトークン、Basic認証、APIキー）を設定し、カスタムヘッダーを追加します。出力は、curl、fetch、または任意のHTTPクライアント用にフォーマットされた、コピー準備完了のヘッダーブロックです。 使い方 [一般的なヘッダーを追加]ドロップダウンを使用して、適切なデフォルト値を持つ頻繁に使用されるヘッダーを挿入します。認証セクションで認証タイプと認証情報を設定し、カスタムヘッダーを手動で追加します。curl、Postman、またはコードで使用するために、完全なヘッダーセットをコピーします。 機能 一般的なヘッダープリセット – Content-Type、Accept、Authorization、Cache-Controlなど 認証タイプセレクター – Bearerトークン、...
ツールを試す »単語頻度アナライザー あらゆるテキストの単語頻度を分析します。コンテンツを貼り付けると、即座にランク付けされた頻度テーブル、ワードクラウドの可視化、テキスト統計、文字頻度の内訳を確認できます。n-gram分析（バイグラム、トライグラム）、ストップワードフィルタリング、CSV、JSON、またはプレーンテキストへのエクスポートをサポートします。すべての処理はブラウザ内で行われます。 使用方法 テキストを入力エリアに貼り付けます。入力中やオプションを変更すると、結果は即座に更新されます。大文字と小文字を区別するかどうか、ストップワードフィルタリング、最小単語長の設定、n-gramモード（単語、バイグラム、またはトライグラム）を選択します。頻度テーブルには、ランク、単語、カウント、パーセンテージ、および視覚的なバーが表示されます。ワードクラウドには、最も頻繁な単語がサイズ表示されます...
ツールを試す »Apache .htaccessフォーマッター＆バリデーター 適切なブロックインデント、構文チェック、一般的なエラー検出により、Apache .htaccessファイルをフォーマットおよび検証します。 .htaccessの内容を貼り付けると、閉じていないブロック、一致しないタグ、無効なRewriteRuleフラグなどに対する検証警告とともに、一貫してフォーマットされた出力が即座に表示されます。 一般的なスニペットテンプレートとRewriteRuleフラグのリファレンスが含まれています。 使用方法 .htaccessの内容を入力エリアに貼り付けます。 フォーマッターは即座に処理します — ブロックディレクティブ（IfModule、Directory、Filesなど）をインデントし、コメントを正規化し、構文を検証します。 インデントスタイル（スペース2つ、スペース4つ、またはタブ）、コメント正規化、および空行の処理を設定します。 フォーマットされた出力をコピーするか、.htaccessファイルとしてダウンロードします。 ...
ツールを試す »JSONからZodスキーマジェネレーター 任意のJSONデータを、すぐに使用できるZod検証スキーマに変換します。 JSONを貼り付けるだけで、再帰的な型推論、日付、UUID、メール、URLの文字列パターン検出、値が限定されたフィールドの自動列挙検出、オブジェクトの配列を処理する際のオプションフィールド処理を備えた、正しく型付けされたZodコードが得られます。 使用方法 JSONを入力エリアに貼り付けるか、サンプルボタンをクリックしてサンプルデータを読み込みます。 ツールは対応するZodスキーマを即座に生成します。 TypeScriptとプレーンJavaScriptの出力間を切り替えます。 厳密モードを有効にして正確なオブジェクト形状にするか、パススルーモードを有効にして未知のキーを許可します。 オプションで型推論エクスポート行を追加します。 ...
ツールを試す »TypeScript Enumジェネレーター 値のシンプルなリストからTypeScriptの列挙型、定数オブジェクト、およびユニオン型を生成します。 値を貼り付け、命名スタイルと出力形式を選択するだけで、オプションのJSDocコメント、型ガード、逆マッピング、値配列を備えた、すぐに使用できるTypeScriptコードが得られます。 使用方法 値を1行ずつ、またはカンマ区切りで入力エリアに入力します。 列挙型の名前を設定し、キーの命名スタイル（PascalCase、SCREAMING_SNAKE_CASE、またはcamelCase）を選択し、出力形式を選択します。 生成されるコードはリアルタイムで更新されます。 JSDocコメント、エクスポートキーワード、型ガード、値配列などの追加オプションを必要に応じて切り替えます。 ワンクリックで結果をクリップボードにコピーします。 機能 複数の出力...
ツールを試す »CSSフィルタージェネレーター CSSフィルタージェネレーターを使用すると、ライブ画像プレビューでCSSフィルター効果を視覚的に構築できます。 直感的なスライダーを使用して個々のフィルタープロパティを調整し、結果を即座に確認できます — 推測の必要はありません。 見た目に満足したら、生成されたCSSコードをコピーして、スタイルシートに直接貼り付けます。 使用方法 デフォルトのサンプル画像から開始するか、プレビューエリアに画像をドラッグアンドドロップするか、「画像をアップロード」をクリックして、独自の画像をアップロードします。 次に、フィルターのスライダーを調整して、目的の効果を実現します。 各スライダーは、ぼかし、明るさ、コントラスト、グレースケール、色相回転、反転、不透明度、彩度、セピアなど、異なるCSSフィルタープロパティを制御します。 ...
ツールを試す »CSSからTailwind CSSへのコンバーター CSSからTailwind CSSへのコンバーターは、バニラCSS宣言をTailwindユーティリティクラスに即座に変換します。 任意のCSSコードを貼り付けるだけで、対応するTailwindクラスが自動的にマッピングされます — 推測やクラス名の暗記は不要です。 コンバーターは、スペーシング、タイポグラフィ、色、レイアウト、フレックスボックス、グリッド、境界線、影、トランジションなどを処理します。 使用方法 左側の入力エリアにCSSコードを貼り付けます。 コンバーターは各CSS宣言をリアルタイムで処理し、最も近い対応するTailwindユーティリティクラスにマッピングします。 結果は右側の出力パネルに表示されます。 直接Tailwindの同等物を持つプロパティは自動的に変換され、対応するものがないプロパティは...
ツールを試す »帯域幅とダウンロード時間計算機 ファイルサイズと接続速度からダウンロード時間を計算するか、時間目標内にファイルをダウンロードするために必要な速度を見つけます。すべての一般的なファイルサイズ単位と速度プリセット（3G、4G、5G、Wi-Fi、ブロードバンド）をサポートし、設定可能なプロトコルオーバーヘッドパーセンテージを備えています。使用方法 ファイルサイズを入力し、接続速度を選択するか、プリセット（3G、4G、5G、光ファイバーなど）を選択し、プロトコルオーバーヘッドを設定して、推定ダウンロード時間を即座に確認します。または、目標時間から逆算して必要な速度を見つけます。機能 あらゆる単位のファイルサイズ – B、KB、MB、GB、TB 速度プリセット – 3G、4G LTE、5G、Wi-Fi 6、光ファイバー、...
ツールを試す »ヴィジュネル暗号エンコーダー＆デコーダー 「le chiffre indéchiffrable」（解読不能な暗号）と呼ばれた古典的な多表字換字式暗号であるヴィジュネル暗号を使用して、テキストを暗号化および復号化します。 テキストとキーワードを入力すると、ステップバイステップの視覚化、インタラクティブなタブラレクタ、および頻度分析による即時の結果が得られます。 すべての処理はブラウザ内で行われます。 使用方法 エンコードまたはデコードモードを選択し、テキストとアルファベットのキーワードを入力します。 暗号の結果は即座に更新されます。 アルファベット以外の文字（スペース、数字、句読点）は、元の文字の大文字と小文字を保持したまま通過します。 プレーンテキストをキーの拡張として使用するには、オートキーモードを切り替えます。 ステップバイステップのブレークダウンを表示して、各文字のシフトを確認するか、...
ツールを試す »JSONからHTMLテーブルレンダラー オブジェクトのJSON配列を、スタイル設定され、インタラクティブなHTMLテーブルに変換します。 JSONデータを貼り付けるだけで、ソート可能な列、設定可能なスタイル、ネストされたオブジェクトの処理、列の表示/非表示コントロールを備えたレンダリング済みテーブルが即座に表示されます。 結果を、インラインCSS、CSV、またはMarkdownテーブル形式の埋め込み可能なHTMLとしてエクスポートします。 使用方法 オブジェクトのJSON配列を入力エリアに貼り付けます。 ツールは、オブジェクト全体で一意のすべてのキーを自動検出し、それらをテーブルの列としてレンダリングします。 テーブルスタイル（プレーン、ストライプ、ボーダー付き、コンパクト、またはダーク）を選択し、ネストされたオブジェクトの表示方法を設定し、列の表示/非表示を切り替えます。 列ヘッダーをクリックしてソートします。 生成されたHTML、CSV、...
ツールを試す »アクセシブルカラーペアファインダー 任意の背景色に対して、WCAGアクセシビリティ基準を満たす前景色を見つけます。 背景色を入力すると、ツールはHSLカラー空間を検索して、AAまたはAAAのコントラストコンプライアンスを達成するテキストカラーのパレットを生成します。 各ペアをサンプルテキストでプレビューし、特定の色の組み合わせを確認し、アクセシブルなペアをCSSカスタムプロパティとしてエクスポートします。 使用方法 カラーピッカーまたは16進数入力を使用して背景色を選択または入力します。 ツールは即座にカラー空間をスキャンし、選択したWCAGレベルに合格する推奨前景色のグリッドを表示します。 いずれかのスウォッチをクリックして、背景色に対するテキストとしてプレビューします。 確認するには...
ツールを試す »SVGスプライトシートジェネレーター 複数のSVGファイルを単一のスプライトシートに結合して、効率的なアイコン読み込みを実現します。 SVGをドラッグアンドドロップでアップロードし、グリッドでプレビューし、シンボルIDを編集し、本番準備完了の結合済みスプライトファイルをダウンロードします。 外部、インライン、CSS背景アプローチの使用コードスニペットを取得します。 CSSで色を変更できるアイコンのために塗りつぶし（fills）と線（strokes）を削除したり、ファイルサイズを削減するためにエディターメタデータを削除したりできます。 使用方法 SVGアイコンファイルをアップロードエリアにドラッグアンドドロップするか、クリックして参照します。 各SVGは解析され、自動生成されたシンボルIDとともにプレビューグリッドに表示されます。 シンボルIDをクリックして編集します。 最適化を切り替えます...
ツールを試す »ビデオビットレート計算機 任意の解像度、フレームレート、コーデック、品質レベルの推奨ビデオビットレートを計算します。 標準解像度（480pから8K）から選択するか、カスタム寸法を入力し、コーデック（H.264、H.265、VP9、AV1、ProRes）を選択し、品質（ストリーミング、高、ウルトラ）を設定して、推奨ビットレート範囲を即座に確認します。 使用方法 ターゲット解像度を選択するか、カスタムの幅と高さをピクセル単位で入力します。 フレームレート（24〜120 FPS）、コーデック、品質レベルを選択し、推奨ビットレート範囲を読み取ります。 これを使用して、エンコーダー設定を構成したり、指定された期間のファイルサイズを推定したりします。 機能 標準解像度 — 480pから8K、カスタム入力も可能 5つのコーデック — H.264、H.265/HEVC、...
ツールを試す »HTTP Cookieビルダー＆ジェネレーター ビジュアルコンフィギュレーターを使用して、正しいHTTP Set-Cookieヘッダーを構築します。 名前、値、ドメイン、パス、有効期限、SameSite、Secure、HttpOnlyなどの属性を設定し、生成されたSet-Cookieヘッダー、document.cookie文字列、およびサーバーフレームワークのコードスニペットを取得します。 既存のSet-Cookie文字列を逆エンジニアリングするためのCookieパーサーと、一般的なCookieタイプのプリセット構成が含まれています。 使用方法 Cookieの名前と値を入力し、オプションの属性を設定します：Domain、Path、Max-Age、Expires、SameSite（None/Lax/Strict）、Secure、HttpOnly、Partitioned。 Set-Cookieヘッダーとdocument.cookie文字列は即座に更新されます。 一般的なパターン（セッションCookie、永続Cookie、CSRFトークンなど）のプリセットボタンを使用します。 生成されたヘッダーまたはExpress.js、PHPなどのサーバーコードスニペットをコピーします。
ツールを試す »Eメールヘッダーアナライザー＆パーサー 生のEメールヘッダーを構造化された読みやすい形式に解析および分析します。 Eメールヘッダーを貼り付けると、完全な配信パス、認証結果（SPF、DKIM、DMARC）、デコードされたMIMEヘッダー、スパム分析、ホップごとのタイミングを確認できます。 すべての処理はブラウザ内で行われます — データはどのサーバーにも送信されません。 使用方法 生のEメールヘッダーを入力エリアに貼り付けます。 アナライザーは即座に処理し、概要（送信者、受信者、件名、日付、発信元IP）、色分けされた合格/不合格インジケーター付きの認証結果、各サーバー間のタイミングを含む完全な配信ホップチェーン、およびデコードされたMIME値を含むすべてのヘッダーの構造化されたテーブルを表示します。 「サンプルを読み込む」ボタンを使用します...
ツールを試す »DPI / PPI電卓 解像度と物理的な対角線サイズから、あらゆる画面のピクセル密度（PPI/DPI）を計算します。幅と高さをピクセル単位、対角線画面サイズをインチ単位で入力すると、1インチあたりのピクセル数、ドットピッチ、総ピクセル数、および完全なディスプレイプロパティテーブルが即座に表示されます。 使用方法 ディスプレイの幅と高さの解像度（ピクセル単位）と物理的な対角線サイズ（インチ単位）を入力します。すべてのメトリックが即座に計算されます：PPI、ドットピッチ（mm）、アスペクト比、総ピクセル数、およびメガピクセル。 機能 PPI計算 – 解像度と物理サイズからの1インチあたりのピクセル数 ドットピッチ – 各ピクセルの物理サイズ（ミリメートル単位） 完全なプロパティテーブル – アスペクト...
ツールを試す »正規表現フレーバーコンバーター PCRE（PHP）、JavaScript、Python、Go、Java、Ruby：プログラミング言語のフレーバー間で正規表現を変換します。名前付きグループ、フラグ、後方参照、その他の構文の違いを自動的に変換します。互換性のない機能を明確な警告とともにハイライトします。サンプル文字列に対して変換された正規表現を検証するためのテストパネルが含まれています。 使用方法 正規表現パターンを入力し、ソースフレーバー（記述されている言語）とターゲットフレーバー（変換したい言語）を選択します。変換された正規表現は、フラグが翻訳された状態で即座に表示されます。変更点やサポートされていない機能に関する警告については、変換ノートを確認してください。変換されたパターンをサンプルテキストに対して検証するためにテストパネルを使用してください。 機能 6つの正規表現フレーバー...
ツールを試す »スコアボード ゲームを追跡する楽しい方法です。すべてのデータはブラウザに保存されます。さらに多くの機能がまもなく登場します！
価値ある無料ツールの提供を継続するためにご協力ください
