ツール
ブラウザで動く小さなWebツール
タグ生成、公開前チェック、静的ページ準備をアカウントやアップロードなしで行えます。
HTML・アクセシビリティツール
HTMLタグ、headマークアップ、スニペット、公開作業を整えるための補助ツール。
HTML・アクセシビリティツール
カスタマイズ可能なselect要素ジェネレーター
appearance: base-select、ピッカーアイコン、チェックマーク、開閉状態のスタイルを使ったカスタマイズ可能なselect要素のCSSを生成します。
HTML・アクセシビリティツール
宣言的Shadow DOMスニペットジェネレーター
Scoped CSS、スロット、サーバーレンダリング対応の宣言的Shadow DOM HTMLスニペットを生成します。
HTML・アクセシビリティツール
フォーカスリングCSSジェネレーター
アクセシブルな:focus-visibleのoutlineまたはbox-shadow CSSルールをコントラストチェック付きで生成します。
HTML・アクセシビリティツール
HTML Invoker Commandsジェネレーター
Invoker Commands APIを使い、ダイアログ、ポップオーバー、details要素を操作する宣言的なコマンドボタンを生成します。JavaScriptは不要です。
HTML・アクセシビリティツール
HTMLポップオーバージェネレーター
popovertargetとPopover APIを使ったJavaScript不要のネイティブHTMLポップオーバーマークアップを生成します。
HTML・アクセシビリティツール
contenteditable=plaintext-onlyジェネレーター
リッチテキストフォーマットなしのプレーンテキスト入力のためのcontenteditable=plaintext-onlyアクセシブルHTMLマークアップを生成します。
HTML・アクセシビリティツール
ディレクトリアップロード入力ジェネレーター
フォルダアップロード用のwebkitdirectory付きHTMLファイル入力、ドラッグ＆ドロップゾーン、webkitRelativePath付きファイルリストを生成します。
HTML・アクセシビリティツール
Interest Invoker Popoverジェネレーター
JavaScriptなしでホバーとフォーカスでポップオーバーを開くinterestfor宣言的HTMLマークアップを生成します。
HTML・アクセシビリティツール
ARIA Notifyスニペットジェネレーター
aria-liveフォールバック付きのプログラムによるスクリーンリーダー通知のためのariaNotify()呼び出しを生成します。
CSS・デザインツール
レスポンシブレイアウト、余白、モバイル調整、UI細部向けのCSSジェネレーター。
CSS・デザインツール
CSSカルーセルジェネレーター
scroll-snap、スクロールボタン、スクロールマーカー、アクセシブルなリスト構造を備えたネイティブCSSカルーセルを生成します。JavaScriptは不要です。
CSS・デザインツール
CSSスクロールステートクエリジェネレーター
スナップ、固定、スクロール可能な要素をスタイルするCSS scroll-state()コンテナークエリを生成します。ブラウザー互換用のJavaScriptフォールバックも含まれます。
CSS・デザインツール
View Transition Builder
View Transitions APIのCSSとJavaScriptを生成し、スムーズなページおよび要素トランジションを実現します。同一ドキュメント（SPA）とクロスドキュメント（MPA）の両方をサポートし、reduced-motionフォールバック付きです。
CSS・デザインツール
CSS if()関数ビルダー
style()、media()、supports()条件を使用して、@mediaクエリなしでレスポンシブな値をインライン条件分岐するCSS if()を構築します。
CSS・デザインツール
CSS sibling-index()・sibling-count()ジェネレーター
nth-childセレクターなしでDOM位置に基づいて要素をスタイリングするsibling-index()とsibling-count()を使ったCSSを生成します。
CSS・デザインツール
CSS stretchサイジングジェネレーター
ブロック、フレックス、グリッド、絶対配置レイアウトでのfill-availableサイジングのためのstretchキーワードCSSを生成します。
CSS・デザインツール
CSS text-indent hanging/each-lineビルダー
ぶら下げインデントと改行後インデントのためのhangingおよびeach-lineキーワード付きCSS text-indentを生成します。
CSS・デザインツール
CSSフィルタージェネレーター
9つのフィルター機能とライブプレビューを備えたビジュアルCSSフィルターエディター。グラデーション見本または画像URLでテスト。クリーンなCSSをコピー。
CSS・デザインツール
CSSテキストシャドウジェネレーター
ネオン、グロー、3D、アウトラインのプリセットでCSSテキストシャドウを多層作成。テキスト、サイズ、最大3層をカスタマイズ。ライブプレビュー。
CSS・デザインツール
CSSアニメーションキーフレームジェネレーター
9つのアニメーションプリセット（fade、slide、scale、spin、pulse、bounce、shake）とカスタマイズ可能な duration、easing、iteration。ライブプレビュー付き。
CSS・デザインツール
CSS 3Dトランスフォームジェネレーター
回転、移動、スケール、パースペクティブ、原点コントロールを備えたビジュアル3D CSSトランスフォームビルダー。ライブプレビューカードがリアルタイムで奥行きを表示。
JSON・データ・フォーマットツール
構造化データやテキストの検証、変換、比較、整形をブラウザ内で行うツールです。
JSON・データ・フォーマットツール
JSONフォーマッタ・バリデータ
JSONデータのフォーマット、検証、最小化、ツリー表示を行います。末尾のカンマを検出し、エラー位置を表示します。すべての処理はブラウザ内でローカルに実行されます。
JSON・データ・フォーマットツール
JSONPathテスター
JSONデータに対してJSONPath式をテストします。ドット記法、ワイルドカード、フィルター、配列インデックスをサポートします。一致した結果を表示します。
JSON・データ・フォーマットツール
JSONスキーマ生成・検証ツール
サンプルデータからJSONスキーマを生成するか、JSONをスキーマに対して検証します。複数のドラフトをサポートし、型を自動的に推論します。
JSON・データ・フォーマットツール
正規表現テスター・デバッガー
マッチのハイライト表示、キャプチャグループ、置換プレビューを使って正規表現をテストできます。すべての処理はブラウザ内でローカルに行われます。
JSON・データ・フォーマットツール
Markdownプレビューエディタ
分割画面のMarkdownエディタで、GitHub Flavored Markdownをライブプレビューできます。見出し、太字/斜体、リンク、コードブロック、テーブル、タスクリストをサポートしています。
エンコード・ハッシュ・セキュリティツール
エンコード、ハッシュ、トークン、セキュリティヘッダーをブラウザ内で扱うツールです。
エンコード・ハッシュ・セキュリティツール
SRI ハッシュジェネレーター
SHA-256、SHA-384、SHA-512でスクリプト・スタイルシートファイルのSubresource Integrityハッシュを生成します。
エンコード・ハッシュ・セキュリティツール
Permissions-Policyヘッダージェネレーター
サイト全体のブラウザ機能アクセスを制御するPermissions-Policy HTTPヘッダーを生成します。
エンコード・ハッシュ・セキュリティツール
静的サイト向けCSPポリシージェネレーター
CDN、アナリティクス、フォント、埋め込みオプション付きの静的サイト向けContent-Security-Policyヘッダーを生成します。
エンコード・ハッシュ・セキュリティツール
Trusted Typesポリシージェネレーター
危険なDOMシンクに対して型付き値でDOMベースXSSを防ぐTrusted TypesポリシーとCSPヘッダーを生成します。
エンコード・ハッシュ・セキュリティツール
Uint8Array Base64/Hexコンバーター
ネイティブバイナリエンコーディングのためのUint8Array.toBase64()、.toHex()、.fromBase64()、.fromHex()コードスニペットを生成します。
エンコード・ハッシュ・セキュリティツール
JWTデコーダー・クレームインスペクター
JWTトークンをデコードして、ヘッダー、ペイロードクレーム、タイムスタンプを検査できます。すべてのデコードはローカルで行われ、トークンがサーバーに送信されることはありません。
エンコード・ハッシュ・セキュリティツール
Base64エンコーダー・デコーダー
テキストをBase64にエンコード、またはBase64をテキストにデコードできます。URLセーフなBase64にも対応しています。すべての処理はローカルで行われます。
エンコード・ハッシュ・セキュリティツール
URLエンコーダー・デコーダー
URLエンコードされた文字列をエンコードまたはデコードできます。encodeURIComponent（完全）とencodeURI（URLセーフ）の両モードに対応。
画像・SVG・アセットツール
アイコン、画像マークアップ、アセットパス、静的ファイルを確認するための補助ツール。
SEO・Web公開ツール
メタデータ、インデックス、canonical、SNSプレビュー、公開前チェックのためのツール。
GitHub Pages・デプロイツール
カスタムドメイン、静的公開、公開前チェック、GitHub Pages保守のためのツール。
GitHub Pages・デプロイツール
Assetlinks & AASA ジェネレーター
ディープリンク用のAndroid assetlinks.jsonとApple App Site Associationを生成します。
GitHub Pages・デプロイツール
GitHub Pagesワークフロージェネレーター
静的サイトをGitHub PagesにデプロイするためのGitHub ActionsワークフローYAMLを生成します。
GitHub Pages・デプロイツール
Zstandard圧縮ヘッダーヘルパー
Nginx、Apache、Cloudflare、Netlify向けのgzip/brotliフォールバック付きZstandard圧縮サーバー設定を生成します。
JavaScript・Web APIツール
最新のJavaScript機能、Web API、実行時診断に使えるツールとコード例です。
JavaScript・Web APIツール
Navigation APIルータースニペットジェネレーター
SPA向けのNavigation APIルーティングスニペットを生成します。History API不要。
JavaScript・Web APIツール
Service Workerモジュールテンプレートジェネレーター
キャッシュ戦略、プリキャッシュリスト、オフラインサポート付きのESモジュールService Workerテンプレートを生成します。
JavaScript・Web APIツール
Reporting APIヘッダージェネレーター
ブラウザレポート、CSP違反、Network Error Logging用のReport-ToおよびReporting-Endpoints HTTPヘッダーを生成します。
JavaScript・Web APIツール
URLPatternテスター
手動解析不要の名前付きグループ、ワイルドカード、正規表現マッチングによるURLパターンテストをURLPattern APIで行います。
JavaScript・Web APIツール
scrollendイベントスニペットジェネレーター
慣性/モメンタムを含むスクロール完了後に発火するscrollendイベントハンドラーをデバウンス比較付きで生成します。
JavaScript・Web APIツール
PerformanceObserverスニペットジェネレーター
good/needs-improvement/poor閾値付きでCore Web Vitals（LCP、INP、CLS）のPerformanceObserverコードを生成します。
JavaScript・Web APIツール
RegExp.escape()ヘルパー
安全な動的正規表現パターンのために文字列内の特殊文字をエスケープするRegExp.escape()呼び出しを生成します。
JavaScript・Web APIツール
Intl.DurationFormatジェネレーター
long/short/narrow/digitalスタイルのロケール対応時間長フォーマット用Intl.DurationFormatコードを生成します。
JavaScript・Web APIツール
Custom Highlights APIジェネレーター
DOMを変更せずにテキスト範囲をスタイリングするCSS ::highlight()とJavaScript Highlightオブジェクトを生成します。
JavaScript・Web APIツール
WebTransport URLテンプレートヘルパー
双方向ストリームとデータグラムを備えたHTTP/3（QUIC）経由のWebTransport接続スニペットを生成します。