polyshHTML クリーナー
貼り付けた HTML を、内容を表すタグだけのきれいで安全なマークアップにできます。
- ブラウザ内で動作
- アップロード不要
- アカウント不要
ブラウザツールを読み込んでいます…
HTML クリーナーでできること
Word、Google ドキュメント、メールテンプレート、サイトビルダーからコピーした HTML には、span、インラインスタイル、自動生成されたクラス名が何重にも含まれています。CMS やヘルプセンターのエディターに貼り付けると、サイトのスタイルとぶつかり、ページも肥大化します。このクリーナーは内容からマークアップを組み立て直し、構造を表すタグだけを残します。
結果の下のステータス行には、「インラインスタイル 3 個」「ラッパータグ 2 個」のように削除したものの数が表示されます。結果を「プレビュー」に切り替えて、整理後もきちんと読めるかを確認し、残したい種類があれば「その他のオプション」を使ってください。
例
入力
<div class="post"><p style="color:red" onclick="go()"><a href="javascript:alert(1)">ガイド</a>または<a href="/help/">ヘルプセンター</a>をお読みください。</p><span></span><!-- note --></div>
結果
<p>ガイドまたは<a href="/help/" rel="noopener noreferrer">ヘルプセンター</a>をお読みください。</p>
ステータス：整理しました。削除したもの：ラッパータグ 2 個, インラインスタイル 1 個, イベントハンドラー 1 個, 安全でないリンク 1 個, コメント 1 個。javascript: のリンクは外されてテキストだけが残り、安全なリンクには rel="noopener noreferrer" が付きます。
HTML クリーナーの使い方
- 「HTML」のボックスに HTML を貼り付けるか、「ファイルを開く」で .html ファイルを読み込みます。
- 「その他のオプション」を開き、インラインスタイル、クラスと ID、コメント、空の要素を残すか、画像や表を除くかを設定します。
- 「コピー」または「.html をダウンロード」をクリックします。
知っておきたいこと
- 残るのは決まった内容タグだけです。
<details>、<abbr>、カスタムコンポーネントなどの要素は外されてテキストだけになるので、インタラクティブな内容は後で確認してください。 - 「表を残す」をオフにしてもデータは消えません。各行が段落になり、セルは | で区切られます。
- 画像は src、alt、title、width、height を保ちますが、srcset と loading は削除されるため、レスポンシブ画像のセットは 1 つのファイルに戻ります。
HTML クリーナーについてよくある質問
Word や Google ドキュメントからコピーした HTML を整理するには？
見えているテキストではなく、HTML ソースをボックスに貼り付けてください。Word や Google ドキュメントは、テキストをインラインスタイルとクラス名付きの span で包みます。クリーナーはそれらを削除し、見出し、段落、リスト、リンク、表を残します。結果はエディターの HTML 表示に貼り付けてください。
リンクがプレーンテキストになったのはなぜですか？
href に、javascript: や data: のような、クリーナーが安全でないと判断するスキームが使われていたためです。クリーナーはリンクを削除しますが、文が読めるようにテキストは残します。リンク先が必要なら、エディターで実際の https:// または相対 URL を追加してください。
自分の CSS のためにクラスを残せますか？
はい。「その他のオプション」で「クラスと ID を削除」をオフにします。インラインスタイルには「インラインスタイルを削除」という別の切り替えがあるので、クラスは残しつつ、直接指定された色やフォントは削除できます。
HTML フォーマッターとの違いは何ですか？
クリーナーは、タグや属性を削除してマークアップを変更し、結果をスペース 2 つでインデントします。HTML フォーマッターは空白だけを変更し、貼り付けた要素と属性をすべて残します。