Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
在线压缩HTML代码，移除空格、注释等冗余字符，优化CSS、JS和SVG，减小文件体积。
概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
HTMLコード圧縮は、貼り付けたHTMLテキストから連続する空白をひとつにまとめ、タグの間にある空白を取り除き、HTMLコメントを削除して、先頭と末尾の空白を整える機能です。入力したテキストに対して短い出力を作るため、インデントや改行、コメントが多い断片を手早く一行に近い形へ整理したいときに使えます。
処理は入力全体への文字列置換です。HTMLの要素や構文を解析して、場所ごとに安全な変換を選ぶ方式ではありません。CSS・JavaScript・SVGを個別に最適化したり、属性を省略・短縮したりする処理も行いません。構文を理解して表示や動作の同等性を保証するビルド用minifierとは用途が異なります。
画面には入力と出力それぞれの文字数・行数が表示され、圧縮モードでは入力文字数と出力文字数から算出した変化率も確認できます。これは文字列の長さを比較した値です。日本語などの文字コード、改行形式、保存時のエンコードは反映しないため、HTMLファイルのバイト数や通信時の転送量が同じ割合で減るとは限りません。実ファイルの容量を知りたい場合は、採用する文字コードで保存した後にファイルサイズを確認してください。
HTMLでは通常の文章中の空白、コメント、preやtextareaのような入力・整形済みテキスト、scriptやstyleの中身で扱いが異なります。WHATWGのHTML Standardにも、要素の種類や文書内の位置に応じた構文規則が定められています。このツールはその違いを判別せずに文字を置き換えるため、行内要素の間のスペースがなくなったり、連続空白がスクリプト文字列や表示用テキスト内で変わったりすることがあります。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
圧縮したいHTMLテキストを入力欄に貼り付けます。サンプルを読み込んで、入力と出力の見え方を先に確認することもできます。
圧縮モードを選びます。入力を変更すると処理結果が更新されます。圧縮モードには、空白・コメント・CSS・JavaScriptを個別に切り替える設定はありません。
出力を元のコードと見比べ、文章の区切り、pre・textarea、スクリプトやスタイル内の内容を重点的に確認します。
使えることを確かめた出力だけをコピーするか、テキストとしてダウンロードします。読みやすいインデントを付け直したいときは整形モードを利用します。
たとえば<p>赤<span>青</span> <span>緑</span></p>のタグ間にある空白は削除されます。文字の区切りとして必要な空白なら、圧縮後に表示が詰まっていないかブラウザーで確認してください。
活用例
仕事や日常の流れの中での活用方法を紹介します。
単純なサンプルHTMLに改行やコメントが多いとき、圧縮結果を資料へ貼り付け、例として見せるコードを短く整えられます。表示例に使う場合は、テキストの間隔が変わっていないか確認します。
手元の短いHTML片について、空白やコメントを整理した前後の文字数をすぐ比較できます。変更幅の目安を得た後、実際の保存容量が必要ならファイルとして別途測定します。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
いいえ。CSS・JavaScriptを言語として解析して個別に縮小する処理はありません。HTMLテキスト全体に空白やコメントの置換を適用するため、コード内の文字列も変わる可能性があります。
いいえ。入力と出力の文字数をもとにした変化率です。文字コードによって1文字あたりのバイト数は異なり、実際のファイル容量や転送量とは一致しません。
タグの間にある空白や連続空白も置換対象になるためです。行内要素の間に必要な空白がないか、またpre・textareaやスクリプト内の文字列が変わっていないか、元データと照合してください。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
この出力は構文を解析した安全な最適化結果ではなく、表示や動作が元データと同等である保証はありません。
連続空白の集約やタグ間空白の削除は、画面上の文章、空白をそのまま扱う領域、スクリプト文字列、スタイル指定などに影響することがあります。元のHTMLを残したうえで、出力を使う場合は対象ページで表示と操作を確認してください。公開ファイルの容量削減や継続的なビルド処理が目的なら、HTML構文を解析し、必要に応じてCSS・JavaScriptもそれぞれ扱える制作環境で確認する方法が適しています。
関連
関連ツール、特集、利用可能なAPIを探せます。