How to
HTML・CSS・JavaScript の整形と圧縮をブラウザ上で行える開発補助ツールです。崩れたコードを読みやすく整えたり、配布前のコードを軽くしたりできます。HTML・CSS・JavaScript を切り替えながら、整形・圧縮・確認・コピーを一か所で進められます。
Use Cases
Capabilities
Steps
画面を見ながら進められるように、操作の順番と確認ポイントをまとめています。
STEP 1
対象言語のタブから HTML、CSS、JavaScript を選び、入力欄へ処理したいコードを貼り付けます。
HTML、CSS、JavaScript のタブを切り替えて、処理対象の言語を選びます。
整形または圧縮したいコードを、そのまま入力欄へ貼り付けます。
STEP 2
「整形」または「圧縮」を押して結果を確認し、問題がなければ「結果をコピー」を押して利用先へ貼り付けます。
コードを読みやすい形へ並べ直したい時に使います。
改行や空白を減らして、できるだけ短いコードへまとめたい時に使います。
結果欄のコードをそのままコピーして、エディタや管理画面へ貼り付けられます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
整形や圧縮は、選んだ言語のルールに合わせて実行されます。HTML、CSS、JavaScript のどれを処理するかを先に確認すると失敗しにくくなります。
確認すること
圧縮すると改行や空白がまとめて削られます。読みやすさを保ちたい場面では、先に整形結果を確認してから使い分けると扱いやすくなります。
確認すること
このツールは HTML・CSS・JavaScript の処理専用です。TypeScript・SCSS・JSX などには対応していません。対象言語を先に確認してから使用してください。
FAQ
使う前に判断しやすい質問を先に整理します。
HTML、CSS、JavaScript に対応しています。TypeScript や SCSS には対応していません。
いいえ。整形、圧縮、コピーはブラウザ内で完結します。
このページは HTML・CSS・JavaScript の処理専用です。TypeScript・SCSS・JSX などには対応していません。
現時点では標準のインデント設定で整形します。インデント幅の変更には対応していません。
いいえ。整形・圧縮処理はブラウザ内で完結します。
コメントと空白を除去する圧縮を行います。動作に影響しない不要な記号を最小化しますが、処理前に元の動作を確認しておくことをおすすめします。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
