Use Cases
Capabilities
Guide
設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。
01 HOWTO
上部のフォーマットモードを確認し、左側の入力欄へ整形または圧縮したいコードを貼り付けるエリアです。入力を消す、入力をコピーする操作もここで行います。
インデント付きの整形や圧縮を選び、目的に合う出力へ切り替えられます。
整形または圧縮したいコードを左側のエディタへ貼り付けられます。
入力欄を空にして、別のコードを最初から試せます。
処理前のコードを控えとしてコピーできます。
02 HOWTO
読みやすく確認したい時は整形、貼り付けや配布向けに短くしたい時は圧縮を選ぶエリアです。選んだモードの結果は右側へ反映されます。
改行とインデントを整えて、レビューしやすいコードにできます。
不要な改行や空白を減らして、短いコードにできます。
選んだモードで処理した結果を右側で確認できます。
期待した結果にならない場合は、左側の入力を修正できます。
03 HOWTO
右側の結果欄で整形または圧縮後のコードを確認し、問題がなければコピーするエリアです。用途に合わせて整形結果と圧縮結果を切り替えられます。
処理後のコードが期待どおりになっているか確認できます。
処理後のコードをコピーして、エディタや管理画面へ貼り付けられます。
レビューや共有には読みやすい整形結果を使えます。
埋め込みや送信用には短い圧縮結果を使えます。
04 HOWTO
結果が意図と違う時に、入力内容、フォーマットモード、コピー対象を見直すエリアです。入力を消して別のコードでやり直すこともできます。
構文や貼り付け範囲を見直して、処理しやすいコードへ直せます。
現在の入力を消して、新しいコードでやり直せます。
整形または圧縮を選び直して、結果を確認できます。
修正後の結果を確認してからコピーできます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
整形や圧縮は、選んだ言語のルールに合わせて実行されます。HTML、CSS、JavaScript のどれを処理するかを先に確認すると失敗しにくくなります。
確認すること
圧縮すると改行や空白がまとめて削られます。読みやすさを保ちたい場面では、先に整形結果を確認してから使い分けると扱いやすくなります。
確認すること
このツールは HTML・CSS・JavaScript の処理専用です。TypeScript・SCSS・JSX などには対応していません。対象言語を先に確認してから使用してください。
FAQ
使う前に判断しやすい質問を先に整理します。
はい。HTML 全体だけでなく、貼り付けた一部の HTML 断片も整形できます。
このページは HTML 専用です。CSS は CSS フォーマッターを使ってください。
いいえ。整形と圧縮はブラウザ内で処理します。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
