ツール
無料 HTMLツール
HTMLタグ、headマークアップ、スニペット、公開作業を整えるための補助ツール。
利用できるツール
今すぐ使えるHTMLツール
Html
Customizable Select Generator
Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.
Html
HTML Invoker Command Generator
Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.
Html
Service Workerモジュールテンプレートジェネレーター
キャッシュ戦略、プリキャッシュリスト、オフラインサポート付きのESモジュールService Workerテンプレートを生成します。
Html
contenteditable=plaintext-onlyジェネレーター
リッチテキストフォーマットなしのプレーンテキスト入力のためのcontenteditable=plaintext-onlyアクセシブルHTMLマークアップを生成します。
Html
ディレクトリアップロード入力ジェネレーター
フォルダアップロード用のwebkitdirectory付きHTMLファイル入力、ドラッグ＆ドロップゾーン、webkitRelativePath付きファイルリストを生成します。
Html
PerformanceObserverスニペットジェネレーター
good/needs-improvement/poor閾値付きでCore Web Vitals（LCP、INP、CLS）のPerformanceObserverコードを生成します。
Html
Uint8Array Base64/Hexコンバーター
ネイティブバイナリエンコーディングのためのUint8Array.toBase64()、.toHex()、.fromBase64()、.fromHex()コードスニペットを生成します。
Html
Intl.DurationFormatジェネレーター
long/short/narrow/digitalスタイルのロケール対応時間長フォーマット用Intl.DurationFormatコードを生成します。
Html
Custom Highlights APIジェネレーター
DOMを変更せずにテキスト範囲をスタイリングするCSS ::highlight()とJavaScript Highlightオブジェクトを生成します。
Html
JSONフォーマッタ・バリデータ
JSONデータのフォーマット、検証、最小化、ツリー表示を行います。末尾のカンマを検出し、エラー位置を表示します。すべての処理はブラウザ内でローカルに実行されます。
Html
JWTデコーダー・クレームインスペクター
JWTトークンをデコードして、ヘッダー、ペイロードクレーム、タイムスタンプを検査できます。すべてのデコードはローカルで行われ、トークンがサーバーに送信されることはありません。
Html
Base64エンコーダー・デコーダー
テキストをBase64にエンコード、またはBase64をテキストにデコードできます。URLセーフなBase64にも対応しています。すべての処理はローカルで行われます。
Html
URLエンコーダー・デコーダー
URLエンコードされた文字列をエンコードまたはデコードできます。encodeURIComponent（完全）とencodeURI（URLセーフ）の両モードに対応。
Html
Markdownプレビューエディタ
分割画面のMarkdownエディタで、GitHub Flavored Markdownをライブプレビューできます。見出し、太字/斜体、リンク、コードブロック、テーブル、タスクリストをサポートしています。
このカテゴリでできること
HTMLの小さなミスは、プレビュー、アクセシビリティ、クロール、保守性に影響します。よく使うマークアップを確認しやすくします。
向いている作業
- 静的ページ用スニペットを作る。
- 繰り返しのタグ記述ミスを減らす。
- 複数ページのheadをそろえる。
よくある用途
- headマークアップを生成する。
- 記事やツール用のスニペットを作る。
- テンプレートに入れる前にHTMLを確認する。
Task guide
Use HTML tools when you need structured head markup, link relationships, or embed code for a page. Start by identifying what you need: preload and prefetch hints for performance-critical resources, link rel tags for SEO and documentation relationships, or responsive iframe embeds for external content. Review the generated output against your page structure before pasting it into your template or CMS. For repeated snippets across many pages, keep a consistent pattern by using the same tool inputs for every post.
Publishing checklist
- Verify generated tags match the HTML5 doctype requirements for your document.
- Check that all attribute values, such as href and src paths, resolve to the correct URLs in your final output.
- Confirm preload and prefetch hints reference actual resources that exist on your server or CDN.
- Test responsive iframe embeds at multiple screen widths, especially the narrowest breakpoint.
- Validate the output against the W3C markup validator before publishing.
FAQ
htmlツールのFAQ
そのまま貼り付けられますか？
出力を出発点として使い、テンプレートやプロジェクトに合わせて確認してください。
手書きではなくツールを使う理由は？
繰り返しが多く、少しのタイプミスで壊れやすい構文に向いています。